/* ============================================================================ * Initial Force / Swing Catalyst — Design System Tokens * * Foundation layer (1 of 3). Single source of truth for color, type, * radius, spacing, and layout used by every Initial Force surface — * marketing pages, customer stories, support portal, research prototypes, * internal tools. * * Layer 1 — Tokens this file * Layer 2 — Components ./components/ (UI building blocks, owned by * Adrian via VCA work) * Layer 3 — Sections ./sections/ (web blocks: hero, pull-quote, * stat-band, CTA-band, …) * * Version: 0.6.0 (2026-06-05) * Source: Figma — "Agentic web system" (file rWlPPFcOVdfEFWPD6CoeJa, * foundations node 7:3) is the canonical foundations twin, kept * 1:1 with this file. Palette + type originally derived from PGA * Material 2025 (file FqafGORVwndmyaoUGuZAe9). Last synced * 2026-06-05 against node 7:3. * Status: Selective rebuild against Figma palette + typography. * Brand orange and accent-strong corrected; Sand and Green * families introduced; Montserrat + PT Serif adopted as * canonical sans/serif. Cream `--color-bg-soft` retained as * off-white role token (distinct from Sand which is a warm * fill). 2024 brand guidelines remain superseded. * * v0.3.0: Heading-size tokens introduced after Clare-sync * 2026-05-07 — H1 tightened from 56 → 48 (max), H2 settled * at 32. Type-size tokens added so headings are tokenised * like every other foundation value. Five sections promoted * from "pending" to "extracted" in the same release. * * v0.4.0: Neutral fundamentals rebuild (2026-06-01). The * blue-tinted gray ramp (derived from Swing Quality Blue) read * cool/washy and was retired for UI use. New true-neutral * `--ink-*` ramp introduced, tones taken from Sana Labs * (sanalabs.com): near-black #151515, surfaces #e6e6e4 / * #efefef, muted #6e6e6e. Role tokens (ink, ink-soft, body, * muted, line, bg-soft, bg-tint) repointed to it. Canvas * stays white. Blue family kept only for the dark footer band. * * v0.5.0: Body-text scale + functional-heading tier (2026-06-01). * Inspired by Paraform's typographic discipline (bureauSerif/ * bureauSans). Added --text-lead/body/small/micro with line-height * locked to 1.5 across the whole scale, and slight positive * tracking (+0.01em) at caption/legal sizes for small-sans * legibility. Added --text-functional (sans, weight 500) as the * quiet alternative to a serif H2/H3 — the dual-headline idea: * serif for editorial statements, sans-500 for utility labels. * Added --measure-lead/body (ch-based reading-width caps) after a * Paraform body-copy comparison: matching size + 1.5 leading still * read flat because our lines ran ~85ch vs their ~50ch. Measure was * the missing lever. Body typeface stays Montserrat (head-of-design * call, 2026-06-01) — compensate with measure, not a font swap. * Font families and H1 size deliberately unchanged. * * v0.6.0: Foundations re-synced 1:1 against the Figma "Agentic * web system" file (node 7:3), 2026-06-05. Added the * `--text-uptitle*` token set (Montserrat SemiBold 13 / +0.08em, * matching Figma `Label/Uptitle`) — the old inline "eyebrow" rule * (12px/700/0.12em) is retired and the `.eyebrow` class renamed to * `.uptitle` across all sections + pages. Added * `--text-subsection-track` (-0.025em, Figma Heading/Subsection). * Colors, radius, and the rest of the type scale already matched. * ============================================================================ */ /* Webfonts leveres av next/font (app/layout.tsx) — Google Fonts-@import * fjernet i Next.js-migreringen (Unit 1). Statiske fasit-sider rendres med * fallback-stack lokalt; bruk main-deployen for font-nøyaktig fasit. */ :root { /* ────────────────────────────────────────────────────────────────────── * Brand palette — raw values from Figma * * Four families, each with a structured tint ramp: * Dark · Solid · Tint 80 · 60 · 40 · 20 · 10 · 5 * * Use the role tokens below in components and sections. * The raw palette is here for reference and for cases where a one-off * value from a specific tint step is genuinely needed. * ────────────────────────────────────────────────────────────────────── */ /* Swing Orange — primary brand accent */ --orange-dark: #cb3d00; --orange-solid: #ff5c00; --orange-tint-80: #ff7033; --orange-tint-60: #ff9466; --orange-tint-40: #ffb899; --orange-tint-20: #ffdbcc; --orange-tint-10: #ffede6; --orange-tint-5: #fff6f2; /* Swing Quality Blue — primary brand neutral (ink) */ --blue-dark: #090f1f; --blue-solid: #151926; --blue-tint-80: #444751; --blue-tint-60: #73757d; --blue-tint-40: #a1a3a8; --blue-tint-20: #d0d1d4; --blue-tint-10: #e8e8e9; --blue-tint-5: #f3f4f4; /* Swing Sand — warm secondary fill */ --sand-dark: #cf9a7c; --sand-solid: #f0cab4; --sand-tint-80: #f3d5c3; --sand-tint-60: #f6dfd2; --sand-tint-40: #f9eae1; --sand-tint-20: #fcf4f0; --sand-tint-10: #fefaf8; --sand-tint-5: #fefcfb; /* Swing Green — secondary brand accent (deep teal) */ --green-dark: #003633; --green-solid: #004a46; --green-tint-80: #336e6b; --green-tint-60: #669290; --green-tint-40: #99b7b5; --green-tint-20: #ccdbda; --green-tint-10: #e6eded; --green-tint-5: #f2f6f6; /* ────────────────────────────────────────────────────────────────────── * Neutral / Ink ramp — true neutral grays (Sana-derived, 2026-06-01) * * Replaces the blue-tinted gray ramp for ALL UI + text use. Truly * neutral (R=G=B) so nothing reads cool or washy; the two lightest * surface steps adopt Sana Labs' exact warm-neutral surface tones * (#e6e6e4 / #efefef), the near-black echoes Sana's #161616. * * Canvas stays white (decided 2026-06-01) — Sana floats white cards on * a #efefef canvas; we keep white pages and use this ramp for text, * lines and soft surfaces only. * * The Blue family above is retained for genuine brand-blue use (the * dark footer band) — NOT for grays anymore. * ────────────────────────────────────────────────────────────────────── */ --ink-950: #151515; /* near-black — headings, primary text, dark buttons */ --ink-900: #1f1f1f; --ink-800: #2e2e2e; /* dark surfaces, ink-soft */ --ink-700: #404040; /* body copy */ --ink-600: #5c5c5c; --ink-500: #6e6e6e; /* muted — meta/captions (legible on white, ~4.9:1) */ --ink-400: #909090; /* decorative / disabled only */ --ink-300: #b8b8b8; --ink-200: #dcdcda; /* strong borders */ --ink-150: #e6e6e4; /* hairlines, card borders, surfaces (Sana) */ --ink-100: #efefef; /* soft band / placeholder (Sana canvas tone) */ --ink-50: #f6f6f5; /* faint emphasis surface */ /* Pure neutrals */ --white: #ffffff; --light-grey: var(--ink-150); /* ────────────────────────────────────────────────────────────────────── * Role tokens — semantic aliases * * Use these in components and sections, not the raw palette above. * If the role you need does not exist, propose adding it — don't * inline a raw value or a one-off hex. * ────────────────────────────────────────────────────────────────────── */ /* Ink — text + headlines (neutral ramp, Sana-derived 2026-06-01) */ --color-ink: var(--ink-950); /* primary text, headlines */ --color-ink-soft: var(--ink-800); /* secondary headlines, dark surfaces */ --color-body: var(--ink-700); /* body copy */ --color-muted: var(--ink-500); /* meta, captions, disabled */ /* Lines */ --color-line: var(--ink-150); /* hairlines, card borders */ --color-line-soft: #f0f0ee; /* internal dividers */ /* Backgrounds */ --color-bg: var(--white); /* page — stays white */ --color-bg-soft: #f6f6f5; /* off-white emphasis surface — neutral (was warm cream) */ --color-bg-tint: var(--ink-100); /* placeholder/image-fallback surface */ --color-bg-sand: var(--sand-tint-20); /* warm sand fill — featured cards, brand emphasis */ /* Accent — Swing Orange */ --color-accent: var(--orange-solid); /* CTAs, links, stat values, highlights */ --color-accent-soft: var(--orange-tint-10); /* tinted accent surfaces */ --color-accent-strong: var(--orange-dark); /* hover/active on accent */ /* Secondary accent — Swing Green */ --color-secondary: var(--green-solid); /* secondary brand accent (use sparingly) */ --color-secondary-soft: var(--green-tint-10); /* tinted secondary surfaces */ --color-secondary-strong: var(--green-dark); /* hover/active on secondary */ /* ────────────────────────────────────────────────────────────────────── * Typography * * Two families, both Google Fonts: * Montserrat — primary. Body, UI, navigation, buttons, uptitles. * Sans-serif designed for big text and headings. * Fallback: Trebuchet MS, then system stack. * * PT Serif — secondary. Editorial headlines, blockquotes, stat * numbers, customer-story chrome, hero copy. * Fallback: Georgia, then system stack. * ────────────────────────────────────────────────────────────────────── */ --serif: 'PT Serif', 'Georgia', 'Cambria', 'Times New Roman', serif; --sans: 'Montserrat', 'Trebuchet MS', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* ────────────────────────────────────────────────────────────────────── * Heading sizes * * Decided in Clare-sync 2026-05-07. H1 is 48px max — 56 felt too * loud and ate space that should belong to lead copy. H2 sits at 32 * to narrow the gap to H3 (20) and keep skimming intact. Mobile H1 * collapses to 36 via the responsive override at the bottom of this * file. * * Customer stories and articles may go a step smaller on H2 (28-30) * for editorial flow — overrideable per surface, not a global token. * ────────────────────────────────────────────────────────────────────── */ --text-display: 48px; /* H1 — page-opening editorial headline */ --text-display-line: 1.05; --text-display-track: -0.02em; --text-page: 40px; /* hero / page heading (Figma "Heading 40 pt") */ --text-page-line: 1.2; --text-page-track: -0.015em; --text-section: 32px; /* H2 — inter-page section heading */ --text-section-line: 1.2; --text-section-track: -0.01em; --text-subsection: 20px; /* H3 — sub-heading inside content */ --text-subsection-line: 1.3; --text-subsection-track: -0.025em; /* Figma Heading/Subsection: -0.5px @ 20 */ /* Functional heading — sans, weight 500. The quiet alternative to a serif * H2/H3: utility section titles (filter headers, card-group labels, list * headings) where a serif editorial headline would be too loud. Half of a * dual-headline system — serif 400 for editorial statements, sans-500 for * functional labels. Set with `font-family: var(--sans)` + the weight token. */ --text-functional: 22px; --text-functional-line: 1.2; --text-functional-track: -0.015em; --text-functional-weight: 500; /* ────────────────────────────────────────────────────────────────────── * Body text scale * * The heading tokens above cover display type set in serif. These cover * everything set in sans for reading and UI. Line-height is locked to 1.5 * across the whole scale — body copy keeps one fixed leading rhythm * regardless of size, so prose, captions, and meta align to the same * baseline feel. Tracking is 0 through body size, then slightly positive * (+0.01em) at caption/legal sizes to keep small sans open and legible. * ────────────────────────────────────────────────────────────────────── */ --text-lead: 18px; /* hero / intro lead paragraph */ --text-lead-line: 1.5; --text-body: 16px; /* default reading + UI body */ --text-body-line: 1.5; --text-small: 14px; /* captions, secondary meta, dense UI */ --text-small-line: 1.5; --text-small-track: 0.01em; --text-micro: 12px; /* legal, footnotes, uptitle meta */ --text-micro-line: 1.5; --text-micro-track: 0.01em; /* Measure — max reading width for body copy. Capped so prose sits in calm * editorial columns (~55–65 real characters) instead of long runs that * read as technical documentation. The single biggest lever on "feel" * after size and leading. * * NB ch caveat: Montserrat's "0" glyph is wide, so 1ch ≈ 1.3 real average * characters. These values are tuned to the *rendered* result, not the ch * number — 48ch lands ~63 chars, 40ch lands ~55. Marketing card blurbs may * go tighter inline; this is the default global reading column. */ --measure-lead: 40ch; /* hero / intro lead paragraph (~55 chars) */ --measure-body: 48ch; /* default reading column — body, small, micro, prose (~63 chars) */ /* ────────────────────────────────────────────────────────────────────── * Label / Uptitle * * The small accent-orange kicker above a heading (formerly "eyebrow", * renamed to "uptitle" per the article-synk vocabulary decision and to * match the Figma type style `Label/Uptitle`). Sans (Montserrat), * SemiBold, uppercase, with open tracking. Set on `.uptitle`; pair with * `color: var(--color-accent)` and `text-transform: uppercase`. * * Figma 1:1 — Montserrat SemiBold 13 / lineHeight 15.6 (1.2) / * letterSpacing +1.04px (+0.08em). * ────────────────────────────────────────────────────────────────────── */ --text-uptitle: 13px; --text-uptitle-line: 1.2; --text-uptitle-track: 0.08em; --text-uptitle-weight: 600; /* ────────────────────────────────────────────────────────────────────── * Radius * * Three steps. Most surfaces use --radius-lg. --radius-xl is reserved * for large hero/feature treatments. --radius-md is for compact UI. * ────────────────────────────────────────────────────────────────────── */ --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; /* ────────────────────────────────────────────────────────────────────── * Layout * * Page container width and horizontal gutter. Sections inherit these * unless they intentionally break out (full-bleed bands). * ────────────────────────────────────────────────────────────────────── */ --max-w: 1240px; --gap-page: 80px; /* desktop horizontal page padding */ --gap-page-sm: 24px; /* mobile horizontal page padding */ } /* ============================================================================ * Responsive token overrides * * --gap-page collapses on small viewports so every surface gets the same * mobile gutter without repeating media queries in each file. * ============================================================================ */ @media (max-width: 768px) { :root { --gap-page: var(--gap-page-sm); --text-display: 36px; --text-page: 30px; --text-section: 26px; } }