Celune DocsGetting Started
Color Usage
The token system follows a two-layer architecture: primitive gray and color scales are defined first, then semantic tokens reference those primitives. All values are CSS custom properties defined in @repo/ui/theme.css and mapped to Tailwind utilities via @theme inline in each app's globals.css. This page documents the semantic tokens you should use in components.
Text
Use the foreground scale to create visual hierarchy in text. The scale ranges from high-contrast body text down to near-invisible muted labels. Never rely solely on color to convey meaning; pair color changes with font-weight or position to maintain accessibility.
text-foregroundhsl(0° 0% 98%)text-foreground-lighthsl(0° 0% 70.6%)text-foreground-lighterhsl(0° 0% 53.7%)text-foreground-mutedhsl(0° 0% 30.2%)text-foreground-contrasthsl(0° 0% 8.6%)| Token | Tailwind class | Usage |
|---|---|---|
--foreground-default | text-foreground | Primary body text, headings |
--foreground-light | text-foreground-light | Secondary body text, descriptions |
--foreground-lighter | text-foreground-lighter | Nav links, placeholders, metadata |
--foreground-muted | text-foreground-muted | Captions, section labels, timestamps |
--foreground-contrast | text-foreground-contrast | Text placed on colored backgrounds (brand, destructive) |
Background
A six-level surface scale creates depth and visual hierarchy across the interface. The background token is the outermost canvas; higher-numbered surfaces sit progressively on top. Use the scale consistently so that visual elevation always matches semantic importance.
bg-backgroundbg-surface-75bg-surface-100bg-surface-200bg-surface-300bg-surface-400bg-mutedBorder
Five border tokens cover the range from nearly invisible separators to high-contrast strokes for inputs and emphasis. Use the weakest token that still provides sufficient separation at the given depth.
border-borderborder-border-mutedborder-border-controlborder-border-strongborder-border-strongerSemantic colors
Three semantic scales carry meaning beyond surface and text: brand (the primary green), destructive (errors and delete actions), and warning (cautions and non-critical alerts). Each scale runs from 200 (lightest, used for tinted backgrounds) through 600 (for text on light surfaces), with a -default token for the primary use case.
Brand
Emerald green is the identity color. Use bg-brand for primary buttons and active indicator bars. Use text-brand for link text and icon accents.
bg-brandhsl(153.1° 60.2% 52.7%)bg-brand-600hsl(154.9° 59.5% 70%)bg-brand-500hsl(154.9° 100% 19.2%)bg-brand-400hsl(155.5° 100% 9.6%)bg-brand-300hsl(155.1° 100% 8%)bg-brand-200hsl(162° 100% 2%)Destructive
Used for error states, delete confirmations, and any action that is irreversible. The -200 token is the tinted background for destructive banners; the -default token is the button fill.
bg-destructivehsl(10.2° 77.9% 53.9%)bg-destructive-600hsl(9.7° 85.2% 62.9%)bg-destructive-500hsl(7.9° 71.6% 29%)bg-destructive-400hsl(6.7° 60% 20.6%)bg-destructive-300hsl(7.5° 51.3% 15.3%)bg-destructive-200hsl(10.9° 23.4% 9.2%)Warning
Used for cautionary states and non-critical alerts. Warning does not imply data loss; use destructive for that. Amber fills are most visible against dark surfaces, so apply the full scale consistently.
bg-warninghsl(38.9° 100% 42.9%)bg-warning-600hsl(38.9° 100% 42.9%)bg-warning-500hsl(34.8° 90.9% 21.6%)bg-warning-400hsl(33.2° 100% 14.5%)bg-warning-300hsl(32.3° 100% 10.2%)bg-warning-200hsl(36.6° 100% 8%)Scale convention:
-200tokens are tinted backgrounds for banners and callouts.-300to-400are used for borders on those backgrounds.-500is the muted fill state.-600is the text color on dark surfaces. The-defaulttoken (e.g.bg-brand,bg-destructive) is the primary button or badge fill.