/* ========================================================================== RUBRIK — DESIGN TOKENS Layer 1: primitives (raw values, never referenced by components) Layer 2: semantic (role-named, referenced by components) -------------------------------------------------------------------------- Naming: --rb-{layer}-{category}-{role}-{variant} rb = namespace ref = reference / primitive sys = system / semantic ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. PRIMITIVES — COLOR Sourced from the reference build; untokenised one-offs folded in. ---------------------------------------------------------------------- */ /* Brand / core */ --rb-ref-ink: #12201f; /* near-black green — primary text + dark surfaces */ --rb-ref-white: #ffffff; --rb-ref-black: #000000; /* Teal family */ --rb-ref-teal-900: #144f53; /* deep teal — primary CTA, brand fg */ --rb-ref-teal-600: #00b4a5; --rb-ref-teal-500: #00c5b5; /* teal primary — accents, active tab */ --rb-ref-teal-400: #00d5c3; --rb-ref-teal-200: #cdefea; /* language pill fill */ --rb-ref-teal-100: #d2e6e4; /* hairline / teal border */ --rb-ref-teal-050: #ebf9f8; /* teal tint surface */ --rb-ref-cyan-400: #00f5ff; --rb-ref-mint-300: #8ae9ad; /* Neutrals — warm/cool greys used for text */ --rb-ref-grey-900: #141414; --rb-ref-grey-800: #262626; --rb-ref-grey-750: #2e2e2e; --rb-ref-grey-700: #444444; /* secondary text */ --rb-ref-grey-600: #595959; /* tertiary text */ --rb-ref-grey-550: #6b6a6a; --rb-ref-grey-500: #6b7280; /* muted text */ --rb-ref-grey-450: #7d7d7d; /* placeholder */ --rb-ref-grey-350: #99a1af; /* disabled */ --rb-ref-grey-250: #d9d9d9; /* medium border */ --rb-ref-grey-200: #e5e7eb; /* default border */ --rb-ref-grey-050: #f7f7f7; /* muted surface */ /* Slate / navy (editorial text colours) */ --rb-ref-slate-600: #435366; --rb-ref-navy-900: #011735; --rb-ref-navy-800: #072347; /* Warm paper family (FAQ + banner surfaces) */ --rb-ref-sand-100: #faf5f1; /* warm white — FAQ ground */ --rb-ref-sand-200: #f5f1ea; --rb-ref-sand-250: #f4ede8; --rb-ref-sand-300: #f3efeb; --rb-ref-sand-350: #d6cec7; /* FAQ rule, closed */ --rb-ref-sand-450: #b3aba6; /* FAQ rule, open */ --rb-ref-blush-200: #fae4e0; /* Utility */ --rb-ref-link: #008199; --rb-ref-danger: #d4183d; --rb-ref-gradient-teal: #00dcca; --rb-ref-gradient-yellow: #fbff00; /* ---------------------------------------------------------------------- 2. PRIMITIVES — TYPEFACE FK Grotesk / FK Grotesk Mono / Tiempos Text are licensed faces and are NOT bundled. Each stack degrades to a metrically similar system face so layout holds without them. Swap the first entry when licences land. ---------------------------------------------------------------------- */ --rb-ref-font-sans: "FK Grotesk", "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif; --rb-ref-font-mono: "FK Grotesk Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --rb-ref-font-serif: "Tiempos Text", "Iowan Old Style", Georgia, "Times New Roman", serif; --rb-ref-weight-regular: 400; --rb-ref-weight-medium: 500; --rb-ref-weight-bold: 700; /* ---------------------------------------------------------------------- 3. PRIMITIVES — SPACE 4px base. Every step is a multiple of 4; 8+ are multiples of 8. ---------------------------------------------------------------------- */ --rb-ref-space-0: 0; --rb-ref-space-1: 4px; --rb-ref-space-2: 8px; --rb-ref-space-3: 12px; --rb-ref-space-4: 16px; --rb-ref-space-5: 20px; --rb-ref-space-6: 24px; --rb-ref-space-7: 32px; --rb-ref-space-8: 40px; --rb-ref-space-9: 48px; --rb-ref-space-10: 56px; --rb-ref-space-11: 64px; --rb-ref-space-12: 80px; --rb-ref-space-13: 96px; --rb-ref-space-14: 120px; --rb-ref-space-15: 160px; /* ---------------------------------------------------------------------- 4. PRIMITIVES — RADIUS / BORDER / ELEVATION ---------------------------------------------------------------------- */ --rb-ref-radius-none: 0; --rb-ref-radius-xs: 4px; --rb-ref-radius-sm: 6px; --rb-ref-radius-md: 9px; --rb-ref-radius-lg: 10px; --rb-ref-radius-xl: 14px; --rb-ref-radius-2xl: 20px; --rb-ref-radius-full: 9999px; --rb-ref-border-hairline: 1px; --rb-ref-border-medium: 2px; --rb-ref-shadow-sm: 0 1px 2px rgb(18 32 31 / 0.06); --rb-ref-shadow-md: 0 4px 16px rgb(18 32 31 / 0.08); --rb-ref-shadow-lg: 0 12px 32px rgb(18 32 31 / 0.12); /* ---------------------------------------------------------------------- 5. PRIMITIVES — GRID ---------------------------------------------------------------------- */ --rb-ref-grid-columns-desktop: 12; --rb-ref-grid-columns-tablet: 8; --rb-ref-grid-columns-mobile: 4; --rb-ref-page-max: 1440px; /* the canvas is capped, as in the reference */ --rb-ref-content-max: 1312px; /* 1440 − (64 × 2) */ /* ====================================================================== SEMANTIC LAYER — the only tokens components should reference ====================================================================== */ /* --- Foreground ------------------------------------------------------ */ --rb-sys-fg-primary: var(--rb-ref-ink); --rb-sys-fg-secondary: var(--rb-ref-grey-700); --rb-sys-fg-tertiary: var(--rb-ref-grey-600); --rb-sys-fg-muted: var(--rb-ref-grey-500); --rb-sys-fg-placeholder: var(--rb-ref-grey-450); --rb-sys-fg-disabled: var(--rb-ref-grey-350); --rb-sys-fg-slate: var(--rb-ref-slate-600); --rb-sys-fg-navy: var(--rb-ref-navy-800); --rb-sys-fg-brand: var(--rb-ref-teal-900); --rb-sys-fg-accent: var(--rb-ref-teal-500); --rb-sys-fg-link: var(--rb-ref-link); --rb-sys-fg-danger: var(--rb-ref-danger); --rb-sys-fg-on-dark: var(--rb-ref-white); --rb-sys-fg-on-accent: var(--rb-ref-ink); /* --- Background / surfaces ------------------------------------------- */ --rb-sys-bg-canvas: var(--rb-ref-white); --rb-sys-bg-muted: var(--rb-ref-grey-050); --rb-sys-bg-dark: var(--rb-ref-ink); --rb-sys-bg-warm: var(--rb-ref-sand-100); --rb-sys-bg-teal-tint: var(--rb-ref-teal-050); --rb-sys-bg-accent: var(--rb-ref-teal-500); --rb-sys-bg-pill: var(--rb-ref-teal-200); --rb-sys-bg-scrim: rgb(18 32 31 / 0.55); /* --- Border ---------------------------------------------------------- */ --rb-sys-border-subtle: var(--rb-ref-grey-200); --rb-sys-border-default: var(--rb-ref-grey-250); --rb-sys-border-teal: var(--rb-ref-teal-100); --rb-sys-border-strong: var(--rb-ref-ink); --rb-sys-border-brand: var(--rb-ref-teal-900); --rb-sys-border-rule: var(--rb-ref-sand-350); --rb-sys-border-rule-active: var(--rb-ref-sand-450); --rb-sys-border-on-dark: rgb(255 255 255 / 0.15); /* --- Interactive: CTA ------------------------------------------------ */ --rb-sys-cta-primary-bg: var(--rb-ref-teal-900); --rb-sys-cta-primary-fg: var(--rb-ref-white); --rb-sys-cta-primary-bg-hover:#0f3f42; --rb-sys-cta-secondary-bg: var(--rb-ref-white); --rb-sys-cta-secondary-fg: var(--rb-ref-teal-900); --rb-sys-cta-secondary-border:var(--rb-ref-teal-900); --rb-sys-cta-secondary-bg-hover: var(--rb-ref-teal-050); --rb-sys-cta-dark-bg: var(--rb-ref-ink); --rb-sys-cta-dark-fg: var(--rb-ref-white); --rb-sys-cta-dark-bg-hover: var(--rb-ref-grey-800); --rb-sys-cta-accent-bg: var(--rb-ref-mint-300); --rb-sys-cta-accent-fg: var(--rb-ref-ink); /* --- Focus ----------------------------------------------------------- */ --rb-sys-focus-ring: var(--rb-ref-link); --rb-sys-focus-ring-width: 2px; --rb-sys-focus-ring-offset: 2px; /* --- Typeface roles -------------------------------------------------- functional = UI + headings narrative = long-form label = mono/eyebrow `narrative` is deliberately mapped to the SANS stack today. The reference asks for Tiempos Text but ships no @font-face for it, so its own fallback chain ends in sans-serif and every "serif" run on that page actually renders as FK Grotesk. Pointing this at a real serif would diverge from the reference AND read as a two-family page with no editorial reason. Repoint it at --rb-ref-font-serif the day Tiempos is licensed; the dev panel's Typeface > Narrative control previews that swap live. ---------------------------------------------------------------------- */ --rb-sys-font-functional: var(--rb-ref-font-sans); --rb-sys-font-narrative: var(--rb-ref-font-sans); --rb-sys-font-label: var(--rb-ref-font-mono); /* --- Layout ---------------------------------------------------------- */ --rb-sys-page-max: var(--rb-ref-page-max); --rb-sys-content-max: var(--rb-ref-content-max); --rb-sys-gutter: var(--rb-ref-space-4); /* 16px — mobile & tablet */ --rb-sys-grid-gap: var(--rb-ref-space-6); /* 24px at every breakpoint */ --rb-sys-grid-columns: var(--rb-ref-grid-columns-mobile); /* Section rhythm — four tiers, normalised to the 8px scale. The reference drifted (84px, asymmetric 64/80) and disagreed with itself at mobile; these are the intended values. Every tier is within 8px of what the reference actually rendered, and the rhythm is now monotonic. xl hero only — holds the fold, so it stays 80 at every size lg platform intro, FAQ md testimonials, teasers sm stat card grid */ --rb-sys-section-y-xl: var(--rb-ref-space-12); /* 80 → 80 → 80 */ --rb-sys-section-y-lg: var(--rb-ref-space-9); /* 48 → 56 → 80 */ --rb-sys-section-y-md: var(--rb-ref-space-8); /* 40 → 48 → 48 */ --rb-sys-section-y-sm: var(--rb-ref-space-8); /* 40 → 40 → 40 */ /* Vertical relationships inside a section */ --rb-sys-stack-heading-body: var(--rb-ref-space-6); --rb-sys-stack-block: var(--rb-ref-space-9); /* --- Motion ------------------------------------------------------------ The interaction pass runs on these. swift/morph/drawer come from the studied motion corpus: swift for enter/exit that should feel instant, morph for on-screen movement, drawer for sheets. Constant motion (marquee, progress) is always `linear`; `ease-in` is never used on UI. */ --rb-sys-ease-out: cubic-bezier(0.33, 1, 0.68, 1); --rb-sys-ease-expo: cubic-bezier(0.19, 1, 0.22, 1); --rb-sys-ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --rb-sys-ease-swift: cubic-bezier(0.23, 1, 0.32, 1); --rb-sys-ease-morph: cubic-bezier(0.77, 0, 0.175, 1); --rb-sys-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --rb-sys-duration-1: 150ms; --rb-sys-duration-2: 220ms; --rb-sys-duration-3: 320ms; --rb-sys-duration-4: 500ms; --rb-sys-duration-5: 700ms; --rb-sys-duration-6: 1000ms; /* Studio-governed globals. --rbs-motion-scale multiplies editorial durations (≥500ms); micro-feedback ignores it. --rbs-ease-reveal is the curve the reveal system uses, swappable from the Studio. */ --rbs-motion-scale: 1; --rbs-ease-reveal: var(--rb-sys-ease-expo); --rb-sys-z-base: 0; --rb-sys-z-raised: 10; --rb-sys-z-sticky: 100; --rb-sys-z-overlay: 500; --rb-sys-z-modal: 900; --rb-sys-z-dev: 9999; } /* -------------------------------------------------------------------------- BREAKPOINT OVERRIDES The reference uses exactly two breakpoints: 768 (tablet) and 1200 (desktop). Mobile-first: base = <768. -------------------------------------------------------------------------- */ @media (min-width: 768px) { :root { --rb-sys-grid-columns: var(--rb-ref-grid-columns-tablet); --rb-sys-gutter: var(--rb-ref-space-4); /* 16px */ --rb-sys-section-y-xl: var(--rb-ref-space-12); /* 80px */ --rb-sys-section-y-lg: var(--rb-ref-space-10); /* 56px */ --rb-sys-section-y-md: var(--rb-ref-space-9); /* 48px */ --rb-sys-section-y-sm: var(--rb-ref-space-8); /* 40px */ } } @media (min-width: 1200px) { :root { --rb-sys-grid-columns: var(--rb-ref-grid-columns-desktop); --rb-sys-gutter: var(--rb-ref-space-11); /* 64px */ --rb-sys-section-y-xl: var(--rb-ref-space-12); /* 80px */ --rb-sys-section-y-lg: var(--rb-ref-space-12); /* 80px */ --rb-sys-section-y-md: var(--rb-ref-space-9); /* 48px */ --rb-sys-section-y-sm: var(--rb-ref-space-8); /* 40px */ } }