Design Tokens
DaSCH brand colors, typography, and neutral scale defined as CSS custom properties via Tailwind v4 @theme.
Examples
Color Scales
Semantic color tokens (50–950) derived from DaSCH brand values in OKLCH. Each row shows the full scale for one semantic color.
Colors are defined as CSS custom properties (e.g. var(--color-primary-500)) and are also available as Tailwind utilities (e.g. bg-primary-500).
Typography
Font tokens: font-display (Lora) for headings and font-body (Lato) for body text, with fallback stacks.
font-display — Lora, Georgia, Times New Roman, serif
The quick brown fox jumps over the lazy dog
Heading level two in display font
Smaller heading in Lora with serif fallbacks
font-body — Lato, Helvetica Neue, Arial, sans-serif
Body text set in Lato. This is the default font for paragraph content, form labels, and UI elements. The fallback chain ensures readable sans-serif text even without web fonts loaded.
Smaller body text for captions, metadata, and secondary information.