Guidelines/Dark Mode

Dark Mode

Light vs dark — semantic token flip, component behavior

Light modeDefault
Semantic tokens
--surface-canvas#FBF7EE
--surface-card#FFFFFF
--border-ink#0B0B0B
--text-strong#0B0B0B
--text-muted#9A958A
--shadow-sm4px 4px 0 #0B0B0B
Components
Campaign · Active
ActiveDraftHighMedium
Enable notifications
!
Warning
Trial expires in 3 days. Upgrade to keep access.
const x = slab.build();
Dark modedata-theme="dark"
Semantic tokens — overridden
--surface-canvas#131310
--surface-card#1F1F1C
--border-ink#E8E3D8 ← flipped
--text-strong#F5F0E8
--text-muted#6A6560
--shadow-sm4px 4px 0 #000000
Same markup — tokens do the work
Campaign · Active
ActiveDraftHighMedium
Enable notifications
!
Warning
Trial expires in 3 days. Upgrade to keep access.
const x = slab.build();