Color System

Our color system is built on semantic tokens that provide consistent theming across light and dark modes. The system is organized into five main categories:

Background Colors
Primary Colors
Brand Colors
Semantic Colors
Text & Border Colors

Usage Guidelines

Use Semantic Tokens: Always prefer semantic tokens over direct color values to maintain consistency and theme support.
Dark Mode Support: Our semantic tokens automatically handle dark mode transitions.
Component Design: When creating new components, follow the semantic token system:
- Use bg-* tokens for backgrounds
- Use text-* tokens for text content
- Use border-* tokens for borders
Semantic States: Use semantic color variations to convey meaning:
- Info: For informational UI elements
- Success: For successful actions and positive states
- Attention: For warnings and important notices
- Error: For error states and destructive actions
Brand Colors: Use brand colors sparingly and primarily for:
- Primary CTAs
- Brand identity elements
- Key interactive components

Using Semantic Tokens

Our color tokens are CSS variables that automatically handle light and dark mode transitions. Here's how to use them:

Background Colors

// Basic backgrounds
<div className="bg-default">Default background</div>
<div className="bg-subtle">Subtle background</div>
<div className="bg-emphasis">Emphasis background</div>
 
// Primary backgrounds
<div className="bg-primary-default">Primary background</div>
<div className="bg-primary-emphasis">Primary emphasis</div>

Semantic Colors

// Info states
<div className="bg-semantic-info-subtle">Info subtle</div>
<div className="bg-semantic-info-emphasis">Info emphasis</div>
 
// Success states
<div className="bg-semantic-success-subtle">Success subtle</div>
<div className="bg-semantic-success-emphasis">Success emphasis</div>
 
// Error states
<div className="bg-semantic-error-subtle">Error subtle</div>
<div className="bg-semantic-error-emphasis">Error emphasis</div>

Text Colors

<p className="text-emphasis">High emphasis text</p>
<p className="text-default">Default text</p>
<p className="text-subtle">Subtle text</p>
<p className="text-muted">Muted text</p>

Background Tokens

emphasis

var(--cal-bg-emphasis)

default

var(--cal-bg, white)

subtle

var(--cal-bg-subtle)

muted

var(--cal-bg-muted)

inverted

var(--cal-bg-inverted)

Primary Background Tokens

primary.default

var(--cal-bg-primary)

primary.emphasis

var(--cal-bg-primary-emphasis)

primary.muted

var(--cal-bg-primary-muted)

Brand Colors

brand.default

var(--cal-brand,#111827)

brand.emphasis

var(--cal-brand-emphasis,#101010)

brand.subtle

var(--cal-brand-subtle,#9CA3AF)

brand.accent

var(--cal-brand-accent,white)

Semantic Background Tokens

semantic.info.subtle

var(--cal-bg-semantic-info-subtle)

semantic.info.emphasis

var(--cal-bg-semantic-info-emphasis)

semantic.success.subtle

var(--cal-bg-semantic-success-subtle)

semantic.success.emphasis

var(--cal-bg-semantic-success-emphasis)

semantic.attention.subtle

var(--cal-bg-semantic-attention-subtle)

semantic.attention.emphasis

var(--cal-bg-semantic-attention-emphasis)

semantic.error.subtle

var(--cal-bg-semantic-error-subtle)

semantic.error.emphasis

var(--cal-bg-semantic-error-emphasis)

Border Tokens

border.emphasis

var(--cal-border-emphasis)

border.default

var(--cal-border)

border.subtle

var(--cal-border-subtle)

border.muted

var(--cal-border-muted)

border.semantic.error

var(--cal-border-semantic-error)

Text Tokens

Semantic text colors for various purposes

text.emphasis

var(--cal-text-emphasis)

text.default

var(--cal-text)

text.subtle

var(--cal-text-subtle)

text.muted

var(--cal-text-muted)

text.inverted

var(--cal-text-inverted)

Colors