Typography tokens
Typography is the most impactful design decision after color. Two products with identical color palettes but different typography feel like completely different brands. Yet most token systems reduce typography to a single --font-sans variable and call it done.
A complete typography token set includes font families, weights, sizes, line heights, and letter spacing. Each needs a token.
Font families
/* Three font families cover 99% of interfaces */
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'Geist Mono', monospace;Heading and body fonts are often different. A serif heading with a sans-serif body creates visual hierarchy without relying on size alone. A monospace font is essential for code snippets, data tables, and technical interfaces. For font pairing strategies, see Inter + Space Grotesk pairing.
Font weights
/* Heading weights vs body weights */
--font-weight-heading: 600;
--font-weight-body: 400;
--font-weight-bold: 600;
--font-weight-medium: 500;Tokenizing weights matters because different fonts render the same weight differently. Inter at 600 looks different from Space Grotesk at 600. By tokenizing, you can adjust heading and body weights independently when switching fonts.
Letter spacing
/* Tighter for headings, normal for body, wider for caps */
--letter-spacing-tight: -0.02em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.05em;Letter spacing is the secret weapon of professional typography. Tighter spacing on large headings creates density and authority. Wider spacing on small uppercase labels improves readability. Without tokens, these values end up scattered and inconsistent.
Line height
--line-height-heading: 1.2;
--line-height-body: 1.75;
--line-height-tight: 1.1;
--line-height-relaxed: 1.8;Headings need tighter line height (1.1-1.3). Body text needs looser line height (1.6-1.8). These values affect readability more than most developers realize. A body line-height of 1.4 feels cramped. 1.75 feels breathable. The difference is a single token.
Spacing tokens
Spacing is what separates amateur layouts from professional ones. Consistent spacing creates rhythm. Inconsistent spacing creates visual noise. A spacing scale is a set of predefined values that every margin, padding, and gap references.
/* 4px base spacing scale */
--space-0: 0;
--space-0-5: 2px;
--space-1: 4px;
--space-1-5: 6px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;The 4px base (also called a 4-point grid) is the industry standard. Tailwind uses it. Material Design uses it. Most spacing in professional interfaces is a multiple of 4. The scale is not linear after --space-6 because large gaps need bigger jumps to feel proportionally distinct.
Semantic spacing tokens add a purpose layer on top of the scale:
/* Semantic spacing */
--space-section: var(--space-16); /* Between page sections */
--space-card-padding: var(--space-6); /* Inside cards */
--space-stack: var(--space-4); /* Between stacked elements */
--space-inline: var(--space-2); /* Between inline elements */Shadow tokens
Shadows define depth. They tell the user what sits on top of what. A well-designed shadow system has three to four levels: subtle (for cards), medium (for dropdowns), and large (for modals). Some systems add an XL for popovers.
/* Shadow scale: three levels */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07),
0 2px 4px -2px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
0 4px 6px -4px rgba(0, 0, 0, 0.04);The multi-layer shadow (two box-shadow values separated by a comma) creates a more natural-looking depth than a single shadow. The first layer provides the main elevation. The second adds a tight contact shadow that grounds the element.
Shadow style is a brand differentiator that most teams overlook. Stripe uses subtle, tight shadows. Linear uses almost no shadows. Notion uses soft, diffused shadows. Tokenizing your shadow style ensures consistency across every elevated surface. For the deep dive on shadow systems, see shadow system web design.
Border-radius tokens
Border-radius defines shape language. Sharp corners feel technical and precise. Rounded corners feel friendly and approachable. Fully rounded feels playful. The choice is a brand decision, and it needs to be consistent.
/* Border-radius scale */
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;Most components use two or three radius values: --radius-md for buttons and inputs, --radius-lg for cards and modals, and --radius-full for avatars and pills. Defining the scale ensures that a card never has border-radius: 8px in one place and border-radius: 10px in another.
Motion tokens
Motion is the most under-tokenized dimension. Animation duration and easing curves affect how a product feels. Snappy 150ms transitions feel responsive. Slow 400ms transitions feel deliberate. The easing curve determines whether motion feels mechanical or natural.
/* Duration tokens */
--duration-fast: 100ms;
--duration-normal: 200ms;
--duration-slow: 350ms;
--duration-slower: 500ms;
/* Easing tokens */
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Semantic motion tokens */
--transition-color: var(--duration-fast) var(--ease-default);
--transition-transform: var(--duration-normal) var(--ease-out);
--transition-opacity: var(--duration-normal) var(--ease-default);
--transition-layout: var(--duration-slow) var(--ease-out);Color transitions should be fast (100-150ms) because they are subtle. Transform and opacity transitions can be slightly slower (200ms) because they are more visible. Layout transitions (expanding panels, sliding drawers) should be the slowest (300-500ms) because they involve larger visual changes.
The complete token surface
Here is the full set of token categories that a mature design system covers:
/* Complete design token surface */
/* 1. Color (semantic) */
bg, surface, surface-hover, text, muted, accent,
accent-hover, accent-soft, border, success, warning, error
chart-1 through chart-5
/* 2. Typography */
font-heading, font-body, font-mono
font-weight-heading, font-weight-body, font-weight-bold
letter-spacing-tight, letter-spacing-normal, letter-spacing-wide
line-height-heading, line-height-body
/* 3. Spacing */
space-1 through space-24 (4px grid)
/* 4. Shape */
radius-sm, radius-md, radius-lg, radius-xl, radius-full
shadow-sm, shadow-md, shadow-lg
/* 5. Motion */
duration-fast, duration-normal, duration-slow
ease-default, ease-in, ease-outSeedFlip seeds cover the full surface
Every SeedFlip seed includes tokens across all five categories. Colors, three font families, font weights, letter spacing, a spacing scale, shadow definitions (with named styles like "minimal," "soft," and "layered"), and border-radius values. The seed is not just a color palette. It is a complete design vocabulary.
/* SeedFlip seed: beyond just colors */
{
"fonts": {
"heading": "Space Grotesk",
"body": "Inter",
"mono": "Geist Mono"
},
"fontWeight": { "heading": 600, "body": 400 },
"letterSpacing": { "heading": "-0.02em" },
"radius": "12px",
"shadow": {
"sm": "0 1px 2px rgba(0,0,0,0.05)",
"md": "0 4px 6px rgba(0,0,0,0.07)",
"lg": "0 10px 15px rgba(0,0,0,0.08)",
"style": "soft"
}
}When you export a seed, you get the complete token surface in your preferred format (CSS variables, Tailwind config, or shadcn/ui theme). Your system is complete from day one, not just the color layer. For variable font considerations, check variable fonts web guide.
Your design system feels incomplete because it is incomplete. Color is one fifth of the token surface. Typography, spacing, shadows, border-radius, and motion each deserve the same tokenization rigor. Define them once, reference them everywhere, and your product gains a visual consistency that most teams chase for months. The complete surface is what separates a color file from a design system.