Exercise #6

Density Themes: Compact vs Comfortable Viewports

Enterprise applications (like Bloomberg Terminal, Jira, or Shopify POS) require high information density, while consumer mobile apps require large, comfortable touch targets.

Rather than building separate components, design systems implement Density Tokens:

Compact Mode: Button padding: 6px 12px, Table row height: 32px, Font size: 13px.
Comfortable Mode: Button padding: 12px 20px, Table row height: 48px, Font size: 15px.

By parameterizing spatial tokens under a data-density="compact" attribute, the same data grid component adapts instantly to trader screens or casual tablet users.

Topics

The Multi-Brand Challenge: Scaling Beyond a Single Identity

3-Tier Token Mapping for Multi-Brand Ecosystems

CSS Custom Properties & Runtime Theme Switching

Dark Mode Architecture: Beyond Inverting Hex Colors

Managing Contrast Invariants Across Multi-Brand Themes

Density Themes: Compact vs Comfortable Viewports

White-Label Design Systems: Empowering B2B Customers

Token Scoping & Shadow DOM Boundaries

Figma Modes: Syncing Multi-Brand Systems to Design Files

Testing Multi-Brand Parity with Visual Regression Suites

From lesson

Multi-Brand Systems & Theming Architecture

Level 5 · Auditing & Multi-Brand Theming