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 backgroundsText
--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 buttonsInteractive
--color-active-glow#0490ccActive nav, pressed states--surface-branding-secondary-hover#ffffffHover text on ghost buttonsLight 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-secondary#c22200 (darker red — #ff2a05 only reaches 3.76:1 on white)--text-on-dark-tertiary#666666 (grey, darker than dark-mode's #999999 for contrast on white)--color-active-glow#036b94 (darker blue — #0490cc only reaches 3.58:1 on white)<!-- Dark mode is the default. One attribute switches every token. -->
<body data-theme="light">/* tokens.css — dark mode (default) */
:root {
--brand-yellow: #ffb412;
--brand-red: #ff2a05;
--brand-blue: #0490cc;
--brand-black: #000000;
--brand-white: #ffffff;
--brand-grey: #999999;
--surface-dominant: var(--brand-black);
--surface-branding-primary: var(--brand-yellow);
--surface-branding-primary-30: var(--text-on-dark-primary);
--surface-branding-primary-10: rgba(255, 180, 18, 0.10);
--text-on-dark-primary: var(--brand-white);
--text-on-dark-secondary: var(--brand-red);
--text-on-dark-tertiary: var(--brand-grey);
--text-on-dark-btn: var(--brand-black);
--color-active-glow: var(--brand-blue);
}
/* Light mode — same names, new values */
[data-theme="light"] {
--surface-dominant: var(--brand-white);
--text-on-dark-primary: var(--brand-black);
--text-on-dark-secondary: #c22200;
--text-on-dark-tertiary: #666666;
--color-active-glow: #036b94;
}
/* Components only ever reference tokens */
.card-title { color: var(--text-on-dark-secondary); }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.
LABEL SMALL
Body — regular reading copy
Large body — intro paragraphs
Section heading — black
Heading M
Heading XL
Heading XXL
Hero
"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, buttonsLetter 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<!-- Inter: upright + italic, weights 200 / 400 / 600 / 900 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,200;0,400;0,600;0,900;1,200;1,400;1,600;1,900&display=swap">:root {
--font-primary: 'Inter', sans-serif;
--text-xs: 12px; --text-m: 16px; --text-l: 20px;
--text-xl: 24px; --text-2xl: 32px; --text-3xl: 48px;
--text-4xl: 56px; --text-5xl: 96px;
--fw-extralight: 200; --fw-regular: 400;
--fw-semibold: 600; --fw-black: 900;
--lh-xs: 24px; --lh-s: 32px; --lh-m: 32px;
--lh-xl: 56px; --lh-xxl: 64px; --lh-xxxl: 96px;
--ls-none: 0px; --ls-heading: -0.5px;
--ls-label-s: 2px; --ls-label-m: 4px; --ls-label-xl: 6px;
}
body {
font-family: var(--font-primary);
font-size: var(--text-m);
font-weight: var(--fw-regular);
line-height: var(--lh-xs);
}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<!-- .container applies the responsive page padding -->
<div class="container">
...
</div>:root {
--space-xxs: 4px; --space-xs: 8px; --space-s: 12px;
--space-m: 16px; --space-l: 24px; --space-xl: 32px;
--space-1xl: 40px; --space-2xl: 64px; --space-3xl: 80px;
--space-4xl: 96px; --space-5xl: 140px;
--page-padding-x: var(--space-1xl); /* 40px */
}
@media (max-width: 768px) { :root { --page-padding-x: 16px; } }
@media (max-width: 480px) { :root { --page-padding-x: 12px; } }
.container { max-width: 1440px; margin-inline: auto; padding-inline: var(--page-padding-x); }
/* Usage */
.stack { display: flex; flex-direction: column; gap: var(--space-l); }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 containers100px (literal)Pills, circular avatars, number circles<button class="btn btn-primary">Get in touch</button> <!-- radius-xxs -->
<img class="acf-image-full__img" src="…" alt="…"> <!-- radius-xs -->:root {
--radius-xxs: 4px; /* buttons, tags, small chips */
--radius-xs: 8px; /* cards, images, containers */
}
.btn { border-radius: var(--radius-xxs); }
.acf-image-full__img { border-radius: var(--radius-xs); }
.acf-flow__img-wrap { border-radius: 100px; } /* full circle */