Design
System
Four layers of the system.
Each page documents a design decision — how it works, why it was made, and how to use it correctly. Token references throughout link back to `tokens.css`.
Noto Sans for headings (weight 500, lh 1.4), Poppins for body copy (weight 300, lh 1.8). Full H1–H4 / P1–P4 scale, all 9 Poppins weights, WCAG contrast validation, and usage rules.
A warm, neutral 5-color palette built for WCAG AA/AAA compliance. Full contrast matrix, approved text pairings, semantic role definitions, and color-in-context specimens.
Two variants (Solid, Outline), four sizes (SM/MD/LG/XL), six states (Default/Hover/Focus/Active/Disabled/Loading), and icon combinations. All token-driven. All WCAG-compliant.
14-step 4px-base spacing scale. 12-column web grid across 5 breakpoints. iOS HIG and Android Material Design 3 native grid specifications. Mobile-first breakpoint documentation.
Everything lives in tokens.css.
One file drives all 5 pages. Change --c-peach here — the hero, cards, scale rows, and every highlighted token in all four DS pages update automatically.
/* ── CORE PALETTE ─────────────── */
:root {
--c-white: #FFFFFF;
--c-sand: #EEEDEB;
--c-peach: #FFE9D6;
--c-taupe: #757263;
--c-black: #000000;
/* ── TYPOGRAPHY ───────────────── */
--font-display: 'Noto Sans';
--font-body: 'Poppins';
--h-weight: 500; /* H1–H4 */
--p-weight: 300; /* P1–P4 */
/* ── SPACING ──────────────────── */
--sp-4: 16px; /* BASE ★ */
--sp-24: 96px; /* Section */
/* ── BUTTONS ──────────────────── */
--btn-radius: 9999px; /* Pill */
--btn-weight: 600;
}See the system in production.
The portfolio homepage uses every token defined here — the same palette, type scale, spacing, and buttons you've been reading about.
View Portfolio