Senior LevelCSS & Modern Layouts
How do you implement a CSS design token system for enterprise-scale applications?
❓ Interview Prompt: Explain design tokens, token tiers (global/alias/component), and CSS custom property architecture for multi-brand systems.
Design tokens are the foundational values (colors, spacing, typography, shadows) of a design system, stored as technology-agnostic key-value pairs:
Token Tiers:
1
Global tokens: Raw values with no semantic meaning.
--color-brown-800: #3d2c2e.2
Alias/Semantic tokens: Context-aware references.
--color-text-primary: var(--color-brown-800).3
Component tokens: Component-specific overrides.
--btn-bg: var(--color-text-primary).Multi-Brand Architecture:
Switch brand themes by redefining alias tokens on a parent class/attribute:
[data-brand="acme"] { --color-text-primary: #1a1a1a; }
Token Format:
Store in JSON (Design Tokens Community Group format) and generate CSS, iOS, Android outputs via tools like Style Dictionary.
Code Implementation Example
css
/* Global tokens (raw values) */
:root {
--color-brown-800: #3d2c2e;
--color-brown-400: #886f68;
--color-rose-50: #f5edf0;
--space-4: 1rem;
--radius-md: 8px;
}
/* Semantic tokens (contextual) */
:root {
--color-text-primary: var(--color-brown-800);
--color-text-muted: var(--color-brown-400);
--color-bg-page: var(--color-rose-50);
}
/* Component tokens */
.btn {
--btn-bg: var(--color-text-primary);
--btn-text: var(--color-bg-page);
background: var(--btn-bg);
color: var(--btn-text);
}💡Three-tier design token system with global, semantic, and component tokens.
🎯 Interview Key Takeaway
Structure tokens in three tiers (global → semantic → component) for scalable, multi-brand design systems.
#Design Tokens#Architecture#Design System#Senior
Back to all CSS & Modern Layouts Questions→