Color, typography, spacing, and focus ring tokens. All values carry WCAG contrast documentation. No hardcoded values — every implementation references these tokens.
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Mono:wght@300;400&family=Outfit:wght@300;400;500&display=swap');
Dark UI palette. All components render against these base values. Semantic accent colors carry verified WCAG AA contrast ratios on both dark and light surfaces.
Each semantic color also exposes --[color]-lt (10–12% opacity fill) and --[color]-bd (30% opacity border) variants for light-surface component previews.
Three font families. Serif for display and hierarchy. Mono for labels, IDs, and data. Sans for body copy and UI text. Minimum 11px for uppercase labels, 12px for body.
| Token | Value | Usage |
|---|---|---|
| --serif | Cormorant Garamond, Georgia, serif | Page titles, section headings, component names. Weights 300, 400, 600 — italic variants available. |
| --mono | DM Mono, monospace | Component IDs, labels, tokens, code, nav links, metadata. Weights 300, 400. Minimum 11px, 0.1em+ letter-spacing. |
| --sans | Outfit, sans-serif | Body copy, descriptions, UI component text. Weights 300, 400, 500. Line-height 1.65–1.85. |
| Scale | Size | Usage |
|---|---|---|
| Display | clamp(56px, 7vw, 104px) | RAD logotype / hero headline |
| H1 | clamp(48px, 6vw, 96px) | Interior page titles |
| H2 | clamp(26px, 2.5vw, 38px) | Component names |
| Section title | clamp(32px, 3.5vw, 52px) | Principles, pattern headings |
| Body large | 17px | Page subtitles, lead copy |
| Body | 15–16px | Component descriptions |
| UI text | 13–14px | Preview components, action text |
| Label | 11px · 0.2em tracking | Uppercase mono labels |
| Micro | 9–10px · 0.25–0.35em tracking | IDs, eyebrows, timestamps |
Base-4 spacing scale. All component padding, gap, and margin values reference these tokens.
| Token | Value | Usage |
|---|---|---|
| --space-xs | 4px | Icon-to-label gap, tight chip padding |
| --space-sm | 8px | Intra-component element spacing |
| --space-md | 16px | Standard component internal padding |
| --space-lg | 24px | Component-to-component gap |
| --space-xl | 32px | Section padding, card padding |
| --space-2xl | 48px | Layout column gap |
| --space-3xl | 80px | Page section padding |
Applied to all interactive elements via :focus-visible. Never suppressed. WCAG AA compliant on all background values in the RAD palette.
| Property | Value | Notes |
|---|---|---|
| outline | 3px solid #147060 | Teal-dark. 3.2:1 on white, 4.8:1 on --black-mid |
| outline-offset | 3px | Ensures ring is always visible outside element bounds |
| Selector | :focus-visible | Keyboard navigation only — does not trigger on mouse click |
Minimum contrast requirements: 4.5:1 for body text (WCAG AA), 3:1 for large text and UI elements. All semantic accent colors verified.
RAD is the original work of Jackie Curry. All rights reserved. No portion may be reproduced, adapted, or incorporated into any product or system without express written permission.
Permitted: citation in academic or editorial contexts with full attribution.
© 2025 Jackie Curry. All rights reserved. Publication date: 2025.
For licensing inquiries, connect on LinkedIn →