Tokens
Design tokens ship from @akanaka-design/tokens as CSS variables and TypeScript constants. Import the stylesheet once at your app root:
import "@akanaka-design/tokens/css";
Use the sections below to browse colors, type, spacing, radius, and shadows. Click any swatch or card to copy the CSS variable name to your clipboard.
Color
Primary (Terracotta), Neutrals (Warm Stone), and semantic colors. Click a swatch to copy its CSS variable.
Primary (Terracotta)
Neutrals (Warm Stone)
Semantic
Typography
Type ramp from @akanaka-design/tokens. Sizes and weights reference CSS variables. Sans uses Manrope; mono uses JetBrains Mono (with system fallbacks).
The quick brown fox
Display
2.25rem · Extrabold (800)
The quick brown fox
H1
1.5rem · Bold (700)
The quick brown fox
H2
1.125rem · Semibold (600)
The quick brown fox
H3
1rem · Semibold (600)
The quick brown fox jumps over the lazy dog.
Body
0.875rem · Regular (400)
The quick brown fox jumps over the lazy dog.
Body Small
0.8125rem · Regular (400)
Caption or supporting text
Caption
0.75rem · Medium (500)
Section label
Overline
0.6875rem · Semibold (600)
Spacing
Spacing scale used by Tailwind utilities (e.g. p-4, gap-6). Click a row to copy the CSS variable.
Border radius
Corner radii for components and surfaces. Click a sample to copy its CSS variable.
Shadows
Elevation and focus ring. Click a card to copy the shadow variable.
Semantic Tokens
Purpose-based tokens for backgrounds, foregrounds, and borders. These reference primitive colors and enable future theming (dark mode, high contrast).