CORE / Design System

Design tokens for product and marketing handoff.

The production marketing site uses a compact v2 token system layered over the broader component-library theme. This page captures the CORE brand language that should travel into application work.

Source filesrc/app/v2/_styles/tokens.css

Treat these values as the current brand primitives. The older global theme still exists for application components, but these are the tokens that define the public site.

CORE / Palette

Warm paper, disciplined ink, restrained gold.

Gold is an accent, navy is structural, and the neutral steps carry most of the interface.

--c-navy#0D1729

Navigation, dark sections, layer-one surfaces

--c-ink#1A1917

Primary text and primary CTA fill

--c-paper#F7F6F2

Warm page background

--c-paper-2#EFEDE6

Inset surfaces and schematic fills

--c-white#FFFFFF

Cards and clean contrast

--c-rule#E5E3DE

Primary hairlines on paper

--c-rule-2#D4D2CD

Stronger rules and dividers

--c-rule-navyrgba(255,255,255,0.09)

Hairlines on navy

--c-mid#4A4845

Secondary body text

--c-muted#6B6861

Muted text and metadata

--c-subtle#9B9893

Subtle labels and inactive UI

--c-ghost#C5C3BE

Very quiet UI markers

--c-on-navy#FFFFFF

Primary text on navy

--c-on-navy-65rgba(255,255,255,0.65)

Secondary text on navy

--c-on-navy-45rgba(255,255,255,0.45)

Muted text on navy

--c-on-navy-30rgba(255,255,255,0.30)

Subtle text on navy

--c-gold#B8924A

Primary accent and CTA on navy

--c-gold-deep#8E6B2C

Eyebrows and accent text on paper

--c-gold-linergba(184,146,74,0.55)

Hover underline and emphasis line

CORE / Copy Ready

Drop this into the application project as the starting point.

The snippet below mirrors the production token source and keeps names intact for a clean handoff.

:root {
  --c-navy: #0D1729;
  --c-ink: #1A1917;
  --c-paper: #F7F6F2;
  --c-paper-2: #EFEDE6;
  --c-white: #FFFFFF;
  --c-rule: #E5E3DE;
  --c-rule-2: #D4D2CD;
  --c-rule-navy: rgba(255,255,255,0.09);
  --c-mid: #4A4845;
  --c-muted: #6B6861;
  --c-subtle: #9B9893;
  --c-ghost: #C5C3BE;
  --c-on-navy: #FFFFFF;
  --c-on-navy-65: rgba(255,255,255,0.65);
  --c-on-navy-45: rgba(255,255,255,0.45);
  --c-on-navy-30: rgba(255,255,255,0.30);
  --c-gold: #B8924A;
  --c-gold-deep: #8E6B2C;
  --c-gold-line: rgba(184,146,74,0.55);
  --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-display-xl: clamp(40px, 4.6vw, 64px);
  --t-display-l: clamp(36px, 4.0vw, 56px);
  --t-display-m: clamp(28px, 2.6vw, 36px);
  --t-body-l: 17px;
  --t-body: 16px;
  --t-body-s: 14px;
  --t-meta: 12px;
  --t-eyebrow: 11px;
  --t-eyebrow-s: 10px;
  --tr-display: -0.03em;
  --tr-tight: -0.01em;
  --tr-eyebrow: 0.22em;
  --tr-credibility: 0.18em;
  --tr-nav: 0.04em;
  --tr-wordmark: 0.22em;
  --lh-display: 1.08;
  --lh-body: 1.55;
  --lh-tight: 1.35;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;
  --rail-max: 1280px;
  --rail-pad-d: 56px;
  --rail-pad-t: 32px;
  --rail-pad-m: 20px;
  --nav-h: 64px;
  --nav-h-cmpct: 56px;
  --r-0: 0;
  --r-1: 2px;
  --r-2: 3px;
  --r-pill: 999px;
  --b-hair: 1px;
  --b-thick: 1.5px;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-quick: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-1: 150ms;
  --d-2: 300ms;
  --d-3: 400ms;
  --d-notch: 800ms;
  --reveal-y: 8px;
  --reveal-y-child: 6px;
  --stagger: 55ms;
  --z-nav: 100;
  --z-tweaks: 9999;
}

CORE / Type

Typography

--f-sans'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

--f-mono'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace

--t-display-xlclamp(40px, 4.6vw, 64px)

--t-display-lclamp(36px, 4.0vw, 56px)

--t-display-mclamp(28px, 2.6vw, 36px)

--t-body-l17px

--t-body16px

--t-body-s14px

--t-meta12px

--t-eyebrow11px

--t-eyebrow-s10px

--tr-display-0.03em

--tr-tight-0.01em

--tr-eyebrow0.22em

--tr-credibility0.18em

--tr-nav0.04em

--tr-wordmark0.22em

--lh-display1.08

--lh-body1.55

--lh-tight1.35

CORE / System

Spacing, Layout, Radii, Motion

--s-14px

--s-28px

--s-312px

--s-416px

--s-520px

--s-624px

--s-732px

--s-840px

--s-956px

--s-1072px

--s-1196px

--s-12128px

--rail-max1280px

--rail-pad-d56px

--rail-pad-t32px

--rail-pad-m20px

--nav-h64px

--nav-h-cmpct56px

--r-00

--r-12px

--r-23px

--r-pill999px

--b-hair1px

--b-thick1.5px

--ease-outcubic-bezier(0.22, 0.61, 0.36, 1)

--ease-out-quickcubic-bezier(0.4, 0, 0.2, 1)

--ease-in-outcubic-bezier(0.65, 0, 0.35, 1)

--d-1150ms

--d-2300ms

--d-3400ms

--d-notch800ms

--reveal-y8px

--reveal-y-child6px

--stagger55ms

--z-nav100

--z-tweaks9999

CORE / Supporting Colors

State colors used by schematics and forms.

These are not in the root token file yet, but they appear in production v2 styles and should be promoted if the app uses the same visual language.

success#10B981

Positive state, live indicator

success-deep#047857

Success text

warning#F59E0B

Warning state

warning-deep#B45309

Warning text

error#B5443D

Declined or error annotation

error-deep#a03838

Form error text

primary-hover#2A2925

Primary button hover

gold-hover#C99F55

Gold CTA hover

paper-warm#FAFAF8

Warm schematic panel

paper-soft#fdfdfb

Document panel fill