Kin Design System
A three-dimensional design token system that adapts across 3 brands (DoorDash, Wolt, Deliveroo), 3 languages (Consumer, Merchant, Courier), and 2 themes (Light, Dark).
Foundation Tokens
Core design primitives built on OKLCH color science. 10-step perceptually uniform scales for color, typography, spacing, motion, and more.
Color
10-step OKLCH gray scale with perceptually uniform lightness. Semantic status colors for feedback.
Typography
Modular type scale with display and body families. Line heights and letter spacing optimized for digital interfaces.
Icons
937 SVG icons across Prism (802 monochrome) and Delicia (137 color) sets. Searchable and copyable.
Spacing
4px grid foundation with density multipliers per language. Consumer (1.75x), Merchant (0.875x), Courier (1.5x).
Motion
Spring physics over linear easing. Per-language configurations for Consumer (relaxed), Merchant (snappy), Courier (tactile).
More Tokens
Elevation, radius, grid, voice, and illustration guidelines. Complete foundation for digital products.
System Architecture
Three-layer design token system: Foundation establishes universal values. Languages apply context-specific adjustments. Brands inject unique personality. The result: 18 distinct visual expressions (3 brands × 3 languages × 2 themes) from a single coherent foundation.
Foundation Layer provides core design values: 10-step gray scale, modular type scale, 4px spacing grid, spring physics motion. These remain consistent across all contexts.
Language Layer adapts for context: Consumer (generous spacing, relaxed motion), Merchant (compact density, efficient motion), Courier (glanceable scale, tactile feedback).
Brand Layer expresses personality: DoorDash (bold red, DD Norms), Wolt (warm blue, Omnes), Deliveroo (sophisticated teal, Inter/Stratos).