/* ========================================================================== Latent Brand v2: Design Tokens — the shared sheet Brand guide source: Brand Guide--sep7 (Figma psFiqYboepuZeyl9poRMIS) Type scale source: LatentWeb--Sep70 (Figma eABdJqaathwDkmzmwUGgem) Status: TEST BRAND. Nothing in production loads this file. Every rebrand page links this file rather than carrying its own copy. Edit here; do not fork per run folder. See ../README.md. ========================================================================== */ /* -------------------------------------------------------------------------- Typography Primary: FK Grotesk Regular, one weight, every size. Mono: Berkeley Mono. The licensed Berkeley files are not in the repo yet, so the stack falls through to the embedded FK Grotesk Mono until they land. -------------------------------------------------------------------------- */ :root { /* ------------------------------------------------------------------ Named palette: from the brandbook. Use the names, not raw hex. ------------------------------------------------------------------ */ /* Darks */ --v2-onyx: #131215; /* primary dark surface. The per-run copies said #151215. */ --v2-deep-black: #0A0A0A; /* film plates: never pure #000 */ --v2-shadow: #342F37; /* raised dark surface */ --v2-taupe: #57505C; /* muted dark text / borders on light */ /* Lights */ --v2-off-white: #FAFAFA; /* primary light surface */ --v2-white-smoke: #F5F5F5; /* secondary light surface */ --v2-platinum: #EBEBEB; /* hairlines on light, quiet fills */ /* Purples: the accent family */ --v2-mauve: #C0A1FF; /* the accent: one hit per viewport */ --v2-pale: #D6C2FF; /* soft accent on dark */ --v2-light-lavender: #E2DFFF; /* tinted wells on light */ --v2-slate-blue: #7262B7; /* muted structural purple */ --v2-amethyst: #3D2B60; /* deep purple ground */ /* Muted blues/greys */ --v2-haze: #7783A6; /* annotation blue-grey */ --v2-dusk: #BCBFD3; /* muted light text on dark */ --v2-wordmark-ink: #42404A; /* wordmark ink (matches the mark SVG) */ /* ------------------------------------------------------------------ Semantic aliases: components reference THESE. ------------------------------------------------------------------ */ /* Dark-first: v2 leads with dark editorial plates */ --v2-bg-dark: var(--v2-onyx); --v2-bg-dark-raised: var(--v2-shadow); --v2-text-on-dark: var(--v2-off-white); --v2-text-on-dark-2: var(--v2-dusk); --v2-border-on-dark: rgba(245, 245, 245, 0.14); /* Light surfaces */ --v2-bg-light: var(--v2-off-white); --v2-bg-light-2: var(--v2-white-smoke); --v2-text-primary: var(--v2-onyx); --v2-text-secondary: var(--v2-taupe); --v2-border-on-light: var(--v2-platinum); /* Action */ --v2-accent: var(--v2-mauve); --v2-accent-soft: var(--v2-pale); --v2-accent-well: var(--v2-light-lavender); /* ------------------------------------------------------------------ Type ------------------------------------------------------------------ */ --v2-font-display: "FK Grotesk", "Host Grotesk", "Helvetica Neue", Arial, sans-serif; --v2-font-body: "FK Grotesk", "Host Grotesk", "Helvetica Neue", Arial, sans-serif; --v2-font-mono: "Berkeley Mono", "FK Grotesk Mono", ui-monospace, "SF Mono", monospace; /* One weight. FK Grotesk Regular carries every size, display included. */ --v2-weight: 400; /* ------------------------------------------------------------------ The named scale. Mapped 1:1 from Figma `LatentWeb--Sep70` (file eABdJqaathwDkmzmwUGgem) text variables. Desktop values are the Figma values at 1920; the clamp floor is the mobile end. H1 48 / 48 -3% S1 36 / 40 -2% S2 28 / 31 -2% S3 24 / 26 -2% P1 18 / 22 -2% P2 16 / 18 -2% L1 14 / 15 -2% L1 Mono 16 / 19 L2 Mono 12 / 14 48 is the ceiling. Nothing on the site is larger than H1. Quote attribution sits off the named scale at 22 / 24, measured off the quote block on the LatentWeb--Sep70 Home Page. ------------------------------------------------------------------ */ --v2-h1: clamp(2rem, 5vw, 3rem); --v2-h1-lh: 1; --v2-s1: clamp(1.75rem, 3.75vw, 2.25rem); --v2-s1-lh: 1.111; --v2-s2: clamp(1.5rem, 2.9vw, 1.75rem); --v2-s2-lh: 1.107; --v2-s3: 1.5rem; --v2-s3-lh: 1.083; --v2-p1: 1.125rem; --v2-p1-lh: 1.222; --v2-p2: 1rem; --v2-p2-lh: 1.125; --v2-l1: 0.875rem; --v2-l1-lh: 1.071; --v2-attrib: 1.375rem; --v2-attrib-lh: 1.091; --v2-mono-l1: 1rem; --v2-mono-l1-lh: 1.1875; --v2-mono-l2: 0.75rem; --v2-mono-l2-lh: 1.1667; /* Legacy t-shirt aliases: the pages predate the named scale. Each one resolves to its nearest scale step so nothing renders off-scale. */ --v2-text-xs: var(--v2-mono-l2); --v2-text-sm: var(--v2-l1); --v2-text-base: var(--v2-p2); --v2-text-lg: var(--v2-p1); --v2-text-xl: var(--v2-p1); --v2-text-2xl: var(--v2-s2); --v2-text-3xl: var(--v2-s1); --v2-text-4xl: var(--v2-s1); --v2-text-5xl: var(--v2-h1); --v2-text-6xl: var(--v2-h1); --v2-leading-tight: 1.0; --v2-leading-snug: 1.2; --v2-leading-body: 1.55; --v2-tracking-h1: -0.03em; --v2-tracking-display: -0.02em; --v2-tracking-mono: 0.06em; /* ------------------------------------------------------------------ Space / radius / rules: 4px grid, square-cornered editorial system ------------------------------------------------------------------ */ --v2-space-4: 0.25rem; --v2-space-8: 0.5rem; --v2-space-12: 0.75rem; --v2-space-16: 1rem; --v2-space-20: 1.25rem; --v2-space-24: 1.5rem; --v2-space-32: 2rem; --v2-space-40: 2.5rem; --v2-space-48: 3rem; --v2-space-64: 4rem; --v2-space-80: 5rem; --v2-space-96: 6rem; --v2-space-128: 8rem; /* ------------------------------------------------------------------ The grid. Brandbook 8.1-8.4 (Figma psFiqYboepuZeyl9poRMIS): six columns, hairline gutters, minimal margins, strict alignment. The brandbook states the principle and draws the grid; it gives no numbers, so the margin and gutter are measured off the 1920 web frames and the field is capped to a conventional content width: margin 40 gutter 32 field cap 1300 (at 1920) 6 x 184.67 + 5 x 32 = 1300, with fractional columns accepted. Margin and gutter scale with the viewport (2.084vw / 1.667vw are the 40 and 32 at 1920) and floor on small screens. Columns are never declared in px, the field divides itself. ------------------------------------------------------------------ */ --v2-grid-columns: 6; --v2-grid-margin: clamp(1rem, 2.084vw, 2.5rem); --v2-grid-gutter: clamp(0.75rem, 1.667vw, 2rem); --v2-field-max: 1300px; /* One column of the current field, for anything that has to size itself against the grid rather than sit in it. */ --v2-grid-column: calc( (100% - (var(--v2-grid-columns) - 1) * var(--v2-grid-gutter)) / var(--v2-grid-columns) ); --v2-radius-none: 0; /* v2 default. The system is square. */ --v2-radius-xs: 2px; /* buttons, tags: maximum allowed */ --v2-radius-sm: 4px; /* nav CTA + compliance pill, measured off LatentWeb--Sep70 */ --v2-radius-full: 999px; /* dots and dots only */ /* ------------------------------------------------------------------ Nav + footer, measured off the Home Page frame of LatentWeb--Sep70 (1:142, 1920 wide). The frame is flattened, so these come from the render at 1:1 rather than from layer properties. ------------------------------------------------------------------ */ --v2-nav-height: 72px; /* row centre at y36 */ --v2-nav-lockup: 28px; /* mark height X; lockup width follows */ --v2-nav-gap: 2rem; /* 32 between labels */ --v2-nav-cta-gap: 2.5rem;/* 40 from last label to the CTA */ --v2-cta-height: 36px; --v2-cta-pad: 20px; --v2-rule: 1px solid var(--v2-border-on-light); --v2-rule-dark: 1px solid var(--v2-border-on-dark); /* ------------------------------------------------------------------ Motion: see MOTION.md for the full spec ------------------------------------------------------------------ */ --v2-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --v2-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --v2-dur-fast: 180ms; --v2-dur-base: 360ms; --v2-dur-slow: 720ms; /* Signal-cluster physics (canvas + CSS dot systems) */ --v2-dot-size: 6px; --v2-dot-size-lg: 10px; --v2-grain-opacity: 0.06; }