/* ========================================================================== AXIS PREMIUM DESIGN SYSTEM — tokens.css -------------------------------------------------------------------------- The complete token set for the Axis fleet. Synthesized from four evidence-backed teardowns (Lusion / Stripe / Linear / Locomotive) into ONE original system. Patterns are adopted, never cloned: every value below was re-tuned for legal/commercial work. THEME MODEL — "the chamber" and "the paper" - data-theme="dark" (default): ink-navy surfaces, brass SIGNAL accent - data-theme="light" : cool paper surfaces, ink-blue ACTION ramp Original move: the accent ROLE flips with theme. In the dark theme the accent is a signal color (sparingly, never large fills — Lusion discipline); in the light theme the same slot becomes the action ramp (Stripe discipline). FONTS — free only (OFL). Loaded via Google Fonts in the demo; self-host for fleet production. Never commercial faces (no Sohne, no Helvetica Now, no PP Locomotive New, no Aeonik). ========================================================================== */ :root { /* ======================================================================== 1. TYPE — families & tuned weights ======================================================================== */ /* Inter = the Linear-precision UI face (free variable, supports 510/590 fractional weights). Fraunces = the display face (free variable serif, light + optical sizing gives Stripe's weight-300 elegance with Locomotive's typographic craft — a free stand-in for editorial display faces like PP Editorial New). IBM Plex Mono = the data face (case numbers, citations, counters — Lusion's mono-for-data pattern). */ --font-sans: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Fraunces", "Fraunces Variable", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Tuned variable weights (fractional 510/590 — Linear evidence; 330 light display — Stripe evidence). */ --w-light: 300; --w-regular: 400; --w-medium: 510; --w-semibold: 590; --w-bold: 680; --w-display: 330; /* Fraunces display weight */ --display-opsz: 144; /* optical size axis for display serif */ /* ======================================================================== 2. TYPE — scale 9-step title discipline (Linear evidence: tracking deepens as size grows, line-height collapses to 1.0) + fluid display steps (Locomotive evidence: vw-driven display with clamp bounds — we add the upper bound they skip). Sizes re-tuned; never Linear's exact px values. ======================================================================== */ --title-1: 1.0625rem; /* 17px */ --title-1-lh: 1.4; --title-1-ls: -.012em; --title-2: 1.25rem; /* 20px */ --title-2-lh: 1.3; --title-2-ls: -.012em; --title-3: 1.5rem; /* 24px */ --title-3-lh: 1.3; --title-3-ls: -.014em; --title-4: 1.875rem; /* 30px */ --title-4-lh: 1.18; --title-4-ls: -.018em; --title-5: 2.25rem; /* 36px */ --title-5-lh: 1.14; --title-5-ls: -.02em; --title-6: 2.625rem; /* 42px */ --title-6-lh: 1.1; --title-6-ls: -.022em; --title-7: 3.125rem; /* 50px */ --title-7-lh: 1.08; --title-7-ls: -.022em; --title-8: 3.625rem; /* 58px */ --title-8-lh: 1.06; --title-8-ls: -.024em; --title-9: 4.25rem; /* 68px */ --title-9-lh: 1.04; --title-9-ls: -.024em; /* Fluid display steps (Locomotive vw scaling + clamp caps; weight 300-ish via Fraunces 330; line-height near 1.0). */ --display-1: clamp(3.25rem, 7.2vw, 7.75rem); --display-1-lh: 0.98; --display-1-ls: -.028em; --display-2: clamp(2.5rem, 5vw, 5rem); --display-2-lh: 1.02; --display-2-ls: -.026em; --display-3: clamp(2rem, 3.6vw, 3.75rem); --display-3-lh: 1.06; --display-3-ls: -.024em; /* Body & labels. Body is 16px, NOT 15px — legal long-form needs it (Linear's 15px is an app decision; the teardown flags it as an anti-pattern for legal reading). */ --text-micro: .6875rem; /* 11px — uppercase utilitarian labels */ --text-mini: .8125rem; /* 13px — nav, meta */ --text-small: .875rem; /* 14px — card body, CTA */ --text-regular: 1rem; /* 16px — body */ --text-large: 1.125rem; /* 18px — lead body */ --text-lede: clamp(1.125rem, 1.6vw, 1.375rem); /* section subheads */ --body-lh: 1.65; --label-ls: .08em; /* uppercase label tracking */ /* ======================================================================== 3. COLOR — dark theme "the chamber" (default) 4 ink-navy background levels + 4 text steps (Linear evidence) but navy-tinted, never pure black (Linear's own pure-black marketing bg is a flagged anti-pattern — banding + OLED burn-in). Lusion's navy world (#020022 family) is the tint reference. ======================================================================== */ --bg-canvas: #05060c; /* deepest — page backdrop */ --bg-0: #0a0c15; /* level 0 — body */ --bg-1: #10131e; /* level 1 — surfaces */ --bg-2: #151a29; /* level 2 — raised */ --bg-3: #1c2233; /* level 3 — elevated, chips */ --text-1: #f2f5fb; /* primary — blue-tinted white, never pure white */ --text-2: #bcc5d8; /* secondary */ --text-3: #8b94a9; /* tertiary */ --text-4: #5f6880; /* quaternary */ /* Alpha border system — 5-14% white is THE border language on dark (Linear evidence), plus a hairline. */ --border-faint: rgba(255, 255, 255, .05); --border-thin: rgba(255, 255, 255, .08); --border-solid: rgba(255, 255, 255, .14); --border-strong: rgba(255, 255, 255, .22); --hairline: .5px; /* SIGNAL accent (dark) — brass. Used ONLY as signal: hover dots, active states, one highlighted word per headline, edge glows. Never a large fill (Lusion discipline: accents are signal colors). */ --sig-200: #f7e6c0; --sig-300: #f0d9a8; --sig-400: #e9c98a; --sig-500: #e0b35f; --sig-600: #c7953f; --sig-glow: rgba(224, 179, 95, .22); /* edge glows */ --sig-tint: rgba(224, 179, 95, .08); /* hover tints */ --sig-text: #f0d9a8; /* signal text on dark */ /* ACTION ramp — ink-blue (the light theme's primary action; defined in both themes so components never break). Cool blue-grey neutrals, never pure grey (Stripe evidence). */ --action-25: #f3f5ff; --action-50: #e6ebff; --action-100: #d4dcfc; --action-200: #b3c0f7; --action-300: #8d9ff0; --action-400: #6b82e8; --action-500: #4c66dc; --action-600: #3a52c4; --action-700: #2e42a3; --action-800: #24337f; --action-900: #1b2660; --action-975: #131c47; --action: var(--action-600); --action-hover: var(--action-700); --action-tint: rgba(58, 82, 196, .1); --neutral-50: #eef2f8; --neutral-100: #e2e9f2; --neutral-200: #cfd9e8; --neutral-300: #b3c0d4; --neutral-400: #93a1b8; --neutral-500: #74839c; /* SEMANTIC CTA — theme swaps the identity (the original move: in the dark chamber the CTA is brass-on-ink; on paper it is ink-blue-on-white). */ --cta-bg: var(--sig-500); --cta-text: #14151d; --cta-wipe: var(--sig-300); --cta-hover: #ecca8d; --cta-secondary-bg: transparent; --cta-secondary-border: var(--border-solid); --cta-secondary-text: var(--text-1); /* Surfaces, lifts, bevels (white-overlay lifting on dark — Linear evidence; 135° bevel highlight on top-left edges). */ --surface-1: var(--bg-1); --surface-2: var(--bg-2); --lift-1: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)); --lift-2: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)); --bevel: linear-gradient(135deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, 0) 60%); /* Shadows — five-layer stack (Linear evidence: escalating opacity, ambient not drop). Our offsets + opacities. */ --shadow-stack: 0 8px 2px 0 rgba(0, 0, 0, 0), 0 5px 2px 0 rgba(0, 0, 0, .03), 0 3px 2px 0 rgba(0, 0, 0, .06), 0 1px 1px 0 rgba(0, 0, 0, .11), 0 0 1px 0 rgba(0, 0, 0, .16); --shadow-tiny: 0 1px 4px -1px rgba(0, 0, 0, .25); --shadow-medium: 0 3px 12px rgba(0, 0, 0, .3); --shadow-high: 0 7px 32px rgba(0, 0, 0, .45); /* ======================================================================== 4. SPACING — fluid clamp scale (Locomotive evidence: 8→250px range, one interpolation formula). Ours: 16px root, clamp(mobile, vw, desktop), mid term = desktop value at 1440px viewport. ======================================================================== */ --space-micro: clamp(.5rem, .972vw, .875rem); /* 8 → 14 */ --space-tiny: clamp(1rem, 1.389vw, 1.25rem); /* 16 → 20 */ --space-small: clamp(1.5rem, 2.083vw, 1.875rem); /* 24 → 30 */ --space-medium: clamp(2rem, 2.778vw, 2.5rem); /* 32 → 40 */ --space-large: clamp(3.25rem, 5.556vw, 5rem); /* 52 → 80 */ --space-big: clamp(5rem, 10.417vw, 9.375rem); /* 80 → 150 */ --space-huge: clamp(6.25rem, 13.889vw, 12.5rem); /* 100 → 200 */ --space-enormous: clamp(8.75rem, 17.361vw, 15.625rem); /* 140 → 250 */ /* ======================================================================== 5. MOTION — token library (both benchmarks ship ZERO animation libraries; all motion is tokenized CSS + small JS writing CSS vars). ======================================================================== */ /* Easing curves (evidence-backed, original names): --ease-settle = Stripe's fast-in soft-land snap (.25,1,.5,1) --ease-rise = Linear's blur-rise reveal curve (.32,.72,0,1) --ease-slip = Locomotive's premium enter (.23,1,.32,1) */ --ease-settle: cubic-bezier(.25, 1, .5, 1); --ease-rise: cubic-bezier(.32, .72, 0, 1); --ease-slip: cubic-bezier(.23, 1, .32, 1); --ease-leave: cubic-bezier(.4, 0, .2, 1); /* Speeds — two working speeds + specials (Linear evidence: .1s quick / .25s regular; Locomotive pair: .45s enter / .2s leave; Stripe: 1.2s stat counters). */ --speed-quick: .1s; --speed-fast: .2s; --speed-regular: .25s; --speed-slow: .45s; --speed-counter: 1.2s; /* Blur-rise reveal spec (Linear evidence: blur(10px) + translateY(20%) + 30px padding guard against clipping). */ --reveal-blur: 10px; --reveal-distance: 20%; --reveal-guard: 30px; /* Stagger steps */ --stagger-1: 40ms; --stagger-2: 70ms; --stagger-3: 120ms; /* Marquee (Linear evidence: 30s linear infinite logo strip) */ --marquee-duration: 30s; /* ======================================================================== 6. GEOMETRY — radii, pills, frame ======================================================================== */ --radius-4: 4px; --radius-6: 6px; --radius-8: 8px; --radius-12: 12px; --radius-16: 16px; --radius-24: 24px; --radius-32: 32px; --radius-pill: 9999px; --radius-circle: 50%; /* Pill CTA geometry (Linear evidence: 32px pill height on small CTAs) */ --pill-sm: 32px; --pill-md: 44px; --pill-lg: 56px; /* Page frame (Linear evidence: 1344px content cap, fluid padding) */ --content-max: 1344px; --page-pad-x: clamp(1.25rem, 4vw, 3rem); --page-pad-y: var(--space-large); --header-height: 64px; --header-blur: 20px; /* header backdrop blur (Linear evidence) */ /* 12-column fluid grid (Lusion/Locomotive evidence) */ --grid-cols: 12; --grid-gap: clamp(1rem, 2vw, 2rem); --section-y: var(--space-big); /* Focus ring — visible on both themes */ --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--sig-500); /* Edge-highlight lamp (the card spotlight that follows the pointer) */ --edge-lamp: rgba(255, 255, 255, .06); /* Scroll progress rail */ --rail-width: 2px; } /* ========================================================================== 7. LIGHT THEME — "the paper" Cool paper surfaces + ink text (Stripe evidence: cool neutrals, tinted section alternates) + ink-blue action ramp + navy-tinted soft shadows. ========================================================================== */ [data-theme="light"] { --bg-canvas: #f6f8fc; --bg-0: #fbfcfe; --bg-1: #ffffff; --bg-2: #f1f4f9; --bg-3: #e8edf5; --text-1: #11141f; --text-2: #3d4557; --text-3: #5f6879; --text-4: #8b93a5; --border-faint: rgba(17, 20, 31, .05); --border-thin: rgba(17, 20, 31, .09); --border-solid: rgba(17, 20, 31, .16); --border-strong: rgba(17, 20, 31, .3); /* Signal stays brass — but dark brass text for paper contrast */ --sig-text: #8a6420; --sig-glow: rgba(199, 149, 63, .28); --sig-tint: rgba(224, 179, 95, .12); /* CTA identity flips to the ink-blue action ramp */ --cta-bg: var(--action-600); --cta-text: #ffffff; --cta-wipe: var(--action-700); --cta-hover: var(--action-500); --cta-secondary-bg: var(--bg-1); --cta-secondary-border: var(--border-solid); --cta-secondary-text: var(--text-1); --surface-1: var(--bg-1); --surface-2: var(--bg-2); --lift-1: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .2)); --lift-2: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)); --bevel: linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .4) 30%, rgba(255, 255, 255, 0) 60%); /* Navy-tinted soft shadows (Stripe evidence: blue-tinted shadow, never pure black) */ --shadow-stack: 0 8px 2px 0 rgba(23, 32, 66, 0), 0 5px 2px 0 rgba(23, 32, 66, .02), 0 3px 2px 0 rgba(23, 32, 66, .04), 0 1px 1px 0 rgba(23, 32, 66, .07), 0 0 1px 0 rgba(23, 32, 66, .1); --shadow-tiny: 0 1px 4px -1px rgba(23, 32, 66, .14); --shadow-medium: 0 16px 32px rgba(23, 32, 66, .12); --shadow-high: 0 7px 32px rgba(23, 32, 66, .18); --edge-lamp: rgba(58, 82, 196, .05); --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--action-600); } /* ========================================================================== 8. BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* native scroll — scroll-jacking is banned */ } body { margin: 0; background: var(--bg-0); color: var(--text-1); font-family: var(--font-sans); font-size: var(--text-regular); font-weight: var(--w-regular); line-height: var(--body-lh); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--sig-500); color: #14151d; } [data-theme="light"] ::selection { background: var(--action-600); color: #fff; } /* Display type helper — Fraunces light with optical sizing */ .display { font-family: var(--font-display); font-weight: var(--w-display); font-variation-settings: "opsz" var(--display-opsz); } /* Mono label helper — tiny uppercase utilitarian labels (Lusion evidence) */ .label { font-family: var(--font-mono); font-size: var(--text-micro); font-weight: var(--w-regular); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--text-4); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-6); }