Principle:Helicone Helicone Design System
| Knowledge Sources | |
|---|---|
| Domains | UI Design, Design Tokens, Theming |
| Last Updated | 2026-02-14 06:32 GMT |
Overview
A Design System defines a set of semantic visual tokens (colors, spacing, typography, radii) that decouple visual intent from specific color values, enabling consistent theming across light and dark modes.
Description
Rather than scattering raw color hex codes and pixel values throughout component styles, a design system centralizes visual decisions into design tokens -- named variables with semantic meaning such as background, foreground, primary, destructive, and muted. Each token resolves to a concrete CSS value depending on the active theme (light or dark mode). Components reference only the semantic token names, never the underlying values, which makes theme-wide changes a single-point edit.
The token system is configured in the CSS utility framework (Tailwind CSS) so that standard utility classes like bg-background, text-foreground, and border-border automatically resolve to the correct theme-aware values. Additional tokens cover sidebar colors, chart palettes, and component-specific variants.
Usage
Use the design system when:
- Building any user-facing UI component.
- Adding new color or spacing values to the application.
- Implementing light/dark mode theming.
- Ensuring visual consistency across independently developed features.
Theoretical Basis
Design Systems apply the Indirection principle: by inserting a layer of named tokens between components and raw values, changes propagate globally without modifying individual components. The token hierarchy follows a semantic layering model where abstract tokens (e.g., primary) map to concrete tokens (e.g., sky-500), which in turn map to raw values (e.g., #0EA5E9). Theme switching is implemented as a strategy pattern, where the active theme selects the mapping table from semantic tokens to concrete values.