Design Playground
Visual reference for all design tokens, colors, and components.
Primitive Palette
Neutral Gray Scale
gray-10 gray-20 gray-30 gray-40 gray-50 gray-60 gray-70 gray-80 gray-90 Accents
blue-30 blue-40 blue-50 blue-70 green-40 green-50 amber-50 red-40 red-50 Semantic Tokens
Shown in both themes simultaneously. Left = light, right = dark.
fg Body text primary Links, accents surface Elevated surfaces border Borders, dividers muted Secondary text subtle Tertiary text, h3/h4 emphasis Headings, bold success Confirmations, tips warning Warning callouts error Error messages bg Page background on-primary Text on primary bg Typography
Type Scale (Inter)
XL The quick brown fox
L The quick brown fox jumps over the lazy dog
M The quick brown fox jumps over the lazy dog
S The quick brown fox jumps over the lazy dog
XS The quick brown fox jumps over the lazy dog
Mono (JetBrains Mono)
const ratio = 4.51; // WCAG AA pass
const ratio = 4.51; // bold variant
Font Weights
400 Normal - Body text, hero headings
500 Medium - Section headings, translation links
600 Semibold - Subscribe heading, CTA button
700 Bold - Site name, year labels, callout headers
Line Height
base Line height base. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
tight Line height tight. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Text Colors
emphasis - Headings and bold text
fg - Body text
subtle - Tertiary, h3/h4
muted - Secondary, captions
Language Surfaces
The playground stays in English, but the most visible UI strings are shown in every supported locale.
Spacing
xs 0.25rem s 0.5rem m 1rem l 1.5rem xl 2rem 2xl 3rem 3xl 4rem Border Radius
s m l Shadows
xs s Components
Callout
Code
Inline code: const x = 42; within a sentence.
// Code block
function greet(name: string): string {
return `Hello, ${name}!`;
}Blockquote
Good design is as little design as possible. Less, but better.
Lists
- Unordered item one
- Unordered item two
-
Nested list:
- Sub-item A
- Sub-item B
- Ordered item one
- Ordered item two
- Ordered item three
Table
| Token | Light | Dark | Contrast |
|---|---|---|---|
fg | gray-90 | gray-20 | 17.35 / 13.06 |
muted | gray-50 | gray-40 | 5.52 / 6.98 |
primary | blue-50 | blue-40 | 6.89 / 5.19 |
Horizontal Rule
Content above the rule.
Content below the rule.
Form Elements
Successfully subscribed!
Something went wrong. Try again.
Interaction
Focus Ring
Tab to the button to see the focus ring:
Timing
--speed-in: 0ms (instant hover enter)
--speed-out: 150ms (smooth hover leave)