Introduction
Kin is a three-dimensional design system that adapts across 3 brands, 3 languages, and 2 themes—creating 18 unique visual expressions from a single, coherent foundation.
Design Philosophy
Universal Foundation, Local Expression
One design language. Three distinct brands. Kin provides the grammar—brands provide the accent.
The system maintains consistency where it matters (spacing rhythm, typographic hierarchy, interaction patterns) while allowing divergence where brands need unique personality (color palettes, display typefaces, illustration styles).
Context-Aware Adaptation
Design decisions aren't universal truths—they're contextual choices. What works for a consumer leisurely browsing restaurants doesn't work for a courier navigating while riding a bike.
Kin adapts its density, motion, and scale to three distinct contexts:
- Consumer: Generous spacing, relaxed motion, comfortable reading
- Merchant: Compact density, efficient motion, information-first hierarchy
- Courier: Glanceable scale, tactile feedback, wayfinding clarity
Systematic Craft
Dieter Rams: "Good design is as little design as possible."
Every token, every component, every decision must earn its place. The system resists feature creep and ornamental complexity. Constraints breed creativity.
Core Principles
1. Clarity Above All
If a user can't understand it instantly, it's not good enough. Every interface element must communicate its purpose without explanation.
2. Respect Context
A merchant preparing 50 orders per hour has different needs than a consumer deciding what to eat for dinner. Design for the context, not a generic "user."
3. Embrace Constraints
The 4px grid isn't a limitation—it's liberation from arbitrary decisions. Constraints create consistent visual rhythm.
4. Design with Data
Type scales follow mathematical ratios. Color scales maintain perceptually uniform lightness. Motion uses spring physics, not arbitrary durations. The system is built on measurable foundations, not aesthetic preference.
5. Accessible by Default
WCAG AA compliance isn't a feature—it's table stakes. Every color pair, every touch target, every motion respects accessibility standards.
System Architecture
Three-Dimensional Token System
Brands: DoorDash, Wolt, Deliveroo Languages: Consumer, Merchant, Courier Themes: Light, Dark
= 18 unique visual combinations
Foundation Layer
Core design tokens: 10-step gray scale, modular type scale, 4px spacing grid, spring physics motion.
These tokens remain consistent across all brands and contexts—the universal grammar of the system.
Language Layer
Context-specific multipliers and overrides:
- Spacing density (Consumer 1.75x, Merchant 0.875x, Courier 1.5x)
- Motion timing (Consumer 400ms, Merchant 175ms, Courier 200ms)
- Type scale adjustments (Courier +2 steps for glanceability)
Brand Layer
Brand-specific expressions:
- Accent colors (DoorDash red, Wolt blue, Deliveroo teal)
- Display typefaces (DD Norms, Omnes, Inter/Stratos)
- Illustration styles (future: brand-specific illustration systems)
Using This Documentation
This specimen site is a brand manual for designers, not technical documentation for engineers.
You'll find:
- Visual specimens showing tokens at scale
- Design rationale explaining "why" not just "what"
- Cross-brand comparisons highlighting personality differences
- Accessibility guidance baked into every decision
You won't find:
- Code snippets or implementation details
- CSS variable names or class utilities
- Framework-specific instructions
For implementation guidance, consult your engineering team.
Reference
Inspired by:
- IBM Design Language: Systematic, comprehensive, designer-focused
- Apple Human Interface Guidelines: Context-aware, platform-specific
- Dieter Rams' 10 Principles: "Weniger, aber besser" (Less, but better)