/* ========================================================= RapidCanvas Design System — Colors & Typography Source of truth: source_spec.md (§4) + logo assets ========================================================= */ /* ---------- FONT FACES ---------- Licensed brand files, self-hosted from /fonts. */ @font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Oswald'; src: url('fonts/Oswald-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* -------- BRAND COLORS (exact hex, no near-matches) -------- Yael's brand guide v2 (2026-05) renamed the primaries. Hex unchanged — both old and new var names alias the same values so existing HTMLs continue working. New code should use the new names. */ --rc-dark-blue: #0E1328; /* primary bg, cover, headers */ --rc-orange: #FF5C00; /* hero stats, CTAs, primary accent */ --rc-orange-cover: #FF6624; /* cover variant */ --rc-orange-grad: #FF6D00; /* gradient end-point */ --rc-pink: #FD9DFF; /* secondary accent, gradient start */ --rc-white: #FFFFFF; --rc-rich-black: #0E1328; /* DEPRECATED 2026-05-06: alias to Windsor Blue (--rc-dark-blue) — Yael confirmed Rich Black NOT in canonical palette */ --rc-light-gray: #F3F3F4; /* card fills, subtle bg, dividers */ /* New names per Yael's "RapidCanvas Brand update" Figma (2026-05) — use these going forward */ --windsor-blue: var(--rc-dark-blue); --electric-orange: var(--rc-orange); --clear-magenta: var(--rc-pink); /* -------- SIGNATURE GRADIENT -------- */ --rc-gradient: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%); --rc-gradient-0: linear-gradient(0deg, #FD9DFF 0%, #FF6D00 100%); /* -------- SEMANTIC ROLES (light surface) -------- */ --fg-1: var(--rc-rich-black); /* primary text */ --fg-2: #4A4A4F; /* secondary text */ --fg-3: #8A8A92; /* tertiary / captions */ --fg-accent: var(--rc-orange); --fg-accent-alt: var(--rc-pink); --bg-1: var(--rc-white); /* primary surface */ --bg-2: var(--rc-light-gray); /* card / subtle */ --bg-3: #E6E6E9; /* dividers */ --bg-invert: var(--rc-dark-blue); /* -------- SEMANTIC ROLES (dark surface — e.g. cover slides) -------- */ --dark-fg-1: var(--rc-white); --dark-fg-2: #C7C9D1; --dark-fg-3: #7E8298; --dark-bg-1: var(--rc-dark-blue); --dark-bg-2: #1A2040; /* -------- TYPE STACK -------- */ --font-body: 'Inter', system-ui, sans-serif; /* Inter ONLY per brand */ --font-display: 'Oswald', sans-serif; /* display ≥80px ONLY */ /* -------- TYPE SCALE (px-based for deck/print parity) -------- */ --fs-caption: 12px; --fs-micro: 14px; --fs-body: 16px; --fs-body-lg: 18px; --fs-lead: 22px; --fs-h4: 24px; --fs-h3: 32px; --fs-h2: 44px; --fs-h1: 64px; --fs-display: 120px; /* Oswald; stat heroes */ --fs-mega: 200px; /* Oswald; cover stat */ --lh-tight: 1.1; --lh-body: 1.4; --lh-loose: 1.6; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.08em; /* eyebrow, all-caps labels */ /* -------- SPACING SCALE (8pt grid) -------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* -------- RADII -------- Rounded but restrained — cards and buttons are soft, not pills. */ --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* -------- ELEVATION / SHADOW -------- Cards are flat on light gray or use a very soft shadow. Decks avoid shadow entirely; web uses shadow-1. */ --shadow-0: none; --shadow-1: 0 1px 2px rgba(14, 19, 40, 0.06), 0 2px 8px rgba(14, 19, 40, 0.04); --shadow-2: 0 4px 12px rgba(14, 19, 40, 0.08), 0 12px 32px rgba(14, 19, 40, 0.06); /* -------- BORDERS -------- */ --border-1: 1px solid var(--bg-3); --border-strong: 1px solid #0E1328; } /* ========================================================= BASE ELEMENTS — semantic tokens wired to HTML tags ========================================================= */ html, body { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-body); color: var(--fg-1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; } h1 { font-size: var(--fs-h1); font-weight: 800; } h2 { font-size: var(--fs-h2); font-weight: 700; } h3 { font-size: var(--fs-h3); font-weight: 700; } h4 { font-size: var(--fs-h4); font-weight: 600; } p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; text-wrap: pretty; } small, .caption { font-size: var(--fs-caption); color: var(--fg-3); } /* Utility roles */ .eyebrow { font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-2); } .stat-hero { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 700; color: var(--rc-orange); line-height: 0.95; letter-spacing: -0.01em; } .stat-hero--mega { font-size: var(--fs-mega); } .stat-hero--pink { color: var(--rc-pink); } .tagline { font-family: var(--font-body); font-weight: 700; font-style: italic; color: var(--fg-1); } .tagline--invert { color: var(--dark-fg-1); } .bg-gradient { background: var(--rc-gradient); } .bg-dark { background: var(--rc-dark-blue); color: var(--dark-fg-1); } .bg-light-gray { background: var(--rc-light-gray); } .text-gradient { background: var(--rc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Cards — flat on light gray, subtle border if on white */ .card { background: var(--rc-light-gray); border-radius: var(--r-lg); padding: var(--sp-6); } .card--white { background: var(--rc-white); border: var(--border-1); } /* Buttons — rectangular w/ small radius, never pill for CTA */ .btn { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); letter-spacing: var(--ls-wide); text-transform: uppercase; padding: 14px 28px; border-radius: var(--r-md); border: 0; cursor: pointer; transition: filter 120ms ease, transform 120ms ease; } .btn--primary { background: var(--rc-orange); color: var(--rc-white); } .btn--secondary { background: var(--rc-dark-blue); color: var(--rc-white); } .btn--ghost { background: transparent; color: var(--rc-dark-blue); border: 1px solid var(--rc-dark-blue); } .btn:hover { filter: brightness(0.92); } .btn:active { transform: translateY(1px); }