Foundation thatsadam Design System

thats adam
Design Tokens

Every visual decision is expressed as a CSS custom property in tokens.css. Colours, spacing, type scale, and radii — components never hardcode values, they always reference a token. This is what makes dark ↔ light theme switching work automatically.

Colours & Themes

Two complete token sets sharing the same variable names. Applying data-theme="light" to <body> remaps every token simultaneously — no component changes required.

Surface

--surface-dominant#000000 (white in light mode)Page background
--surface-branding-primary#ffb412Primary accent, borders, glows
--surface-branding-primary-30#000000 (white in dark mode)Subtle borders & dividers
--surface-branding-primary-40#000000 (white in dark mode)Hover states (button, interactive elements)
--surface-branding-primary-10rgba(255, 180, 18, 0.10)Card fills, hover backgrounds

Text

--text-on-dark-primary#ffffffHeadings, primary body
--text-on-dark-secondary#ff2a05Labels, accent text, card titles
--text-on-dark-tertiary#999999Body copy, captions
--text-on-dark-btn#000000Label on filled buttons

Interactive

--color-active-glow#0490ccActive nav, pressed states
--surface-branding-secondary-hover#ffffffHover text on ghost buttons
Light mode overrides (applied via data-theme="light" on body)
--surface-dominant#ffffff (white)
--surface-branding-primary#ffb412 (yellow — stays consistent across modes)
--text-on-dark-primary#000000 (black)
--text-on-dark-tertiary#666666 (grey, darker than dark-mode's #999999 for contrast on white)
--color-active-glow#0490cc (blue — same as dark mode)
Do

Always write color: var(--text-on-dark-primary) — never color: #ffffff.

Don't

Never hardcode hex values in component CSS — it breaks theme switching and creates invisible drift from the Figma source.

Type Scale

Inter is the sole typeface. Extreme weight contrast — 200 extralight vs 900 black — is the defining typographic personality of the system.

--text-xs12px
LABEL SMALL
--text-m16px
Body — regular reading copy
--text-l20px
Large body — intro paragraphs
--text-xl24px
Section heading — black
--text-2xl32px
Heading M
--text-3xl48px
Heading XL
--text-4xl56px
Heading XXL
--text-5xl96px
Hero
Extralight contrastfw-200
"The defining quote sits in extralight — maximum visual contrast against black-weight headings."
Font weights
--fw-extralight200 · Quotes, pull-out text, editorial emphasis
--fw-regular400 · Body copy, descriptions
--fw-semibold600 · Labels, captions, secondary UI text
--fw-black900 · Headings, titles, buttons
Letter spacing
--ls-none0px · Body text
--ls-heading-0.5px · Large display headings
--ls-label-s2px · Small labels
--ls-label-m4px · Medium labels
--ls-label-xl6px · Large eyebrow labels

Spacing Scale

11-step scale from 4px to 140px. No arbitrary pixel values in components — always a token. --page-padding-x adapts responsively: 40px → 16px → 12px.

--space-xxs4px
--space-xs8px
--space-s12px
--space-m16px
--space-l24px
--space-xl32px
--space-1xl40px
--space-2xl64px
--space-3xl80px
--space-4xl96px
--space-5xl140px

Border Radius

Two radii cover all UI needs. Chips and circular avatars use border-radius: 50% or 100px directly.

--radius-xxs · 4pxTags, option dots, small chips
--radius-xs · 8pxCards, images, large containers
100px (literal)Pills, insight chips, circular avatars