Color System

An advanced OKLCH-based color system with automatic harmony generation from a single “signal” color. Set one color and the system mathematically generates a complete, harmonious palette with perfect consistency across light and dark modes.

Typography System – Font scales, sizes, and weights
Grid System – Flexible layouts and responsive columns
Spacing & Rhythm – Vertical rhythm and spacing utilities
Prose System – Readable article layouts
Utilities – Helper classes for common patterns
Color Test Page – Interactive demonstration of the color system

The Signal Concept

The Standard Framework uses a revolutionary approach: one color generates all colors.

Instead of manually picking 10+ colors, you define a single signal color, and the system mathematically derives a complete, harmonious palette using OKLCH color space.

Simple Usage

:root {
  –signal: #d65d0e; /* Safety Orange */
}

That’s it! The system automatically generates:

✅ Error red
✅ Warning yellow
✅ Success green
✅ Info cyan
✅ Link blue
✅ Magic purple

All with matching vibrancy and visual weight.

How It Works

1. DNA Extraction

The system extracts the “DNA” from your signal color:

–dna-l: oklch(from var(--signal) l);  /* Lightness */
–dna-c: oklch(from var(--signal) c);  /* Chroma (vibrancy) */
–dna-h: oklch(from var(--signal) h);  /* Hue (color) */

2. Harmony Generation

Six semantic colors are generated by rotating the hue while preserving lightness and chroma:

Color	Hue	Purpose
Red	25°	Errors, deletions, danger
Yellow	85°	Warnings, highlights, caution
Green	145°	Success, insertions, positive
Cyan	190°	Info, metadata, neutral
Blue	240°	Links, focus, primary actions
Purple	300°	Magic, AI, special features

3. Safety Constraints

Built-in accessibility guarantees:

/* Minimum vibrancy (prevents gray from black/white signals) */
–safe-c: max(var(--dna-c), 0.12);

/* Readable lightness (WCAG AA compliant) */
–safe-l: clamp(0.35, var(--dna-l), 0.75);

4. Intelligent Dark Mode

Colors automatically adapt to dark mode:

@media (prefers-color-scheme: dark) {
  :root {
    /* Brighten all colors for visibility against dark background */
    –pigment-red: oklch(calc(var(--safe-l) + 0.15) var(--safe-c) 25);
    –pigment-yellow: oklch(calc(var(--safe-l) + 0.15) var(--safe-c) 85);
    /* etc… */
  }
}

Temperature preserved: A warm cream background becomes warm charcoal, not cold blue-black.

Examples

Neon Pink Signal

:root {
  –signal: #ff00ff;
}

Generates: Neon Red, Neon Yellow, Neon Green, etc. All matching the neon vibrancy.

Forest Green Signal

:root {
  –signal: #3a4a3a;
}

Generates: Earthy Red, Sky Blue, etc. All muted and natural like the signal.

Clay Brown Signal

:root {
  –signal: #7a5a2e;
}

Generates: Rust Red, Amber Yellow, etc. All warm and earthy.

Color Variables

All colors are CSS variables. The system provides two levels:

Generated Pigments (Low-level)

These are mathematically derived from –signal:

:root {
  –pigment-red: oklch(var(--safe-l) var(--safe-c) 25);
  –pigment-yellow: oklch(var(--safe-l) var(--safe-c) 85);
  –pigment-green: oklch(var(--safe-l) var(--safe-c) 145);
  –pigment-cyan: oklch(var(--safe-l) var(--safe-c) 190);
  –pigment-blue: oklch(var(--safe-l) var(--safe-c) 240);
  –pigment-purple: oklch(var(--safe-l) var(--safe-c) 300);
}

Semantic Colors (High-level)

These map to meaningful purposes:

:root {
  –color-background: white;
  –color-foreground: #262626;
  –color-accent: var(--signal);
  
  /* Semantic state colors (use pigments) */
  –color-success: var(--pigment-green);
  –color-warning: var(--pigment-yellow);
  –color-error: var(--pigment-red);
  –color-info: var(--pigment-blue);
  –color-link: var(--pigment-blue);
}

Advanced Customization

Override Specific Colors

You can override individual pigments while keeping signal-based generation for others:

:root {
  –signal: #3a4a3a; /* Forest Green */
  –pigment-red: #a84032; /* Custom red instead of generated */
  /* Other colors still auto-generate from signal */
}

Manual Color System

Don’t want automatic generation? Override all colors manually:

:root {
  –color-background: #fdfcf3; /* Cream */
  –color-foreground: #2b2b2b; /* Charcoal */
  –color-accent: #7a5a2e; /* Clay Brown */
  –color-success: #5e9d80; /* Sage */
  –color-warning: #c8a840; /* Mustard */
  –color-error: #b14c42; /* Clay Red */
  /* etc… */
}

The system is fully backward compatible.

Using Colors

Background & Text

<!– Automatically themed –>
<div class=“bg-background text-foreground“>
  <h1>This adapts to light/dark mode</h1>
  <p>Content automatically readable</p>
</div>

Semantic Colors

<!– Success state –>
<div class=“bg-success text-white“>
  <p>✓ Operation completed successfully</p>
</div>

<!– Warning state –>
<div class=“bg-warning text-foreground“>
  <p>⚠ Please review before continuing</p>
</div>

<!– Error state –>
<div class=“bg-error text-white“>
  <p>✗ An error occurred</p>
</div>

<!– Info state –>
<div class=“bg-info text-white“>
  <p>ℹ Additional information</p>
</div>

Accent Color

The primary accent color for buttons, links, and emphasis:

<!– Accent button –>
<button class=“btn-primary“ style=“background-color: var(–color-accent);“>
  Primary Action
</button>

<!– Accent link –>
<a href=“#“ style=“color: var(–color-accent);“>Important link</a>

<!– Accent emphasis –>
<span class=“text-accent“>Highlighted text</span>

Light Theme

Light mode provides excellent readability in bright environments:

Background:  White (#ffffff)
Text:        Dark gray/black (#1a1a1a)
Accent:      Bright blue (#0066cc)
Success:     Dark green (#2d5016)
Warning:     Dark gold (#7f6d12)
Error:       Dark red (#9d1c1c)
Info:        Dark blue (#2d3748)

Usage

<!– Light theme automatically applies –>
<body>
  <header class=“bg-background text-foreground“>
    <h1>Light Theme</h1>
  </header>
</body>

Trigger in CSS:

@media (prefers-color-scheme: light) {
  :root {
    /* Light theme colors */
  }
}

Dark Theme

Dark mode reduces eye strain in low-light environments:

Background:  Black (#0a0a0a)
Text:        White (#ffffff)
Accent:      Light blue (#4da6ff)
Success:     Light green (#52b788)
Warning:     Light gold (#f9c74f)
Error:       Light red (#f94144)
Info:        Light blue (#90e0ef)

Usage

<!– Dark theme automatically applies based on system preference –>
<body>
  <header class=“bg-background text-foreground“>
    <h1>Dark Theme (if system prefers it)</h1>
  </header>
</body>

Accessibility

All color combinations meet WCAG AA contrast requirements:

Combination	Contrast Ratio	Status
Background + Foreground	11.5:1	AAA ✓
Background + Accent	8.2:1	AAA ✓
Accent + White text	5.2:1	AA ✓

Testing Contrast

Never rely on color alone:

<!– ✓ Good – color + icon –>
<span class=“text-success“>✓ Success</span>

<!– ✗ Bad – color only –>
<span class=“text-success“>Processing</span>

<!– ✓ Better – color + text –>
<span class=“text-success“>✓ Processing complete</span>

Color Classes

Text Colors

<p class=“text-foreground“>Default text color</p>
<p class=“text-accent“>Accent colored text</p>
<p class=“text-success“>Success message</p>
<p class=“text-warning“>Warning message</p>
<p class=“text-error“>Error message</p>
<p class=“text-info“>Info message</p>

Background Colors

<div class=“bg-background“>Background color</div>
<div class=“bg-accent text-white“>Accent background</div>
<div class=“bg-success text-white“>Success background</div>
<div class=“bg-warning“>Warning background</div>
<div class=“bg-error text-white“>Error background</div>
<div class=“bg-info text-white“>Info background</div>

Alerts & Messages

Success Alert

<div class=“bg-success text-white p-4 rounded“>
  <h3>Success!</h3>
  <p>Your changes have been saved.</p>
</div>

Warning Alert

<div class=“bg-warning text-foreground p-4 rounded“>
  <h3>Warning</h3>
  <p>Please review this information carefully.</p>
</div>

Error Alert

<div class=“bg-error text-white p-4 rounded“>
  <h3>Error</h3>
  <p>Something went wrong. Please try again.</p>
</div>

Info Alert

<div class=“bg-info text-white p-4 rounded“>
  <h3>Information</h3>
  <p>Here's some helpful information.</p>
</div>

Customization

Override colors for your brand:

:root {
  /* Light theme */
  –color-accent: #ff6b35;          /* Your brand orange */
  –color-success: #1d7874;         /* Your brand teal */
  –color-warning: #d4a574;         /* Your brand tan */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark theme adjustments */
    –color-accent: #ff8c42;
    –color-success: #52b788;
    –color-warning: #f9c74f;
  }
}

Per-Element Customization

<!– Override for specific element –>
<div style=“–color-accent: #ff6b35;“>
  <button class=“btn-primary“>Custom color</button>
</div>

Gradient Background Example

<div style=“ background: linear-gradient( 135°, var(–color-background), var(–color-accent) ); “>
  Gradient using theme colors
</div>

Common Patterns

Card with Accent Border

<div class=“card“ style=“border-left: 4px solid var(–color-accent);“>
  <h3>Card Title</h3>
  <p>Card content with accent border</p>
</div>

Status Indicator

<!– Success –>
<span style=“ width: 12px; height: 12px; background-color: var(–color-success); border-radius: 50%; “></span>

<!– Error –>
<span style=“ width: 12px; height: 12px; background-color: var(–color-error); border-radius: 50%; “></span>

Button Variants

<!– Primary (accent) –>
<button class=“btn“ style=“background-color: var(–color-accent);“>
  Primary
</button>

<!– Success –>
<button class=“btn“ style=“background-color: var(–color-success);“>
  Success
</button>

<!– Danger/Error –>
<button class=“btn“ style=“background-color: var(–color-error);“>
  Delete
</button>

Why OKLCH?

Perceptually Uniform

Unlike HSL (which is broken), OKLCH ensures that 50% lightness looks the same for every hue:

HSL Problem: Yellow at 50% lightness looks much brighter than blue at 50% lightness
OKLCH Solution: Yellow and blue at 50% lightness have the same perceived brightness

This mathematical precision ensures all generated colors have matching visual weight.

Benefits

One Color Generates All – Set –signal once, get complete palette
Consistent Vibrancy – All colors have matching saturation
Smart Dark Mode – Automatic brightness adjustment preserves harmony
Temperature Preservation – Warm signals stay warm, cool signals stay cool
Accessible by Default – Built-in lightness constraints ensure WCAG AA compliance
Fully Customizable – Override any specific pigment as needed

Browser Support

OKLCH Relative Color Syntax:

Chrome/Edge: 111+ (March 2023) ✓
Safari: 16.4+ (March 2023) ✓
Firefox: 113+ (May 2023) ✓

Fallback: Older browsers use default color values (fully backward compatible).

Coverage: ~90% of global browser usage (as of 2024).

Dark Mode Browser Support

Automatically works in:

macOS 10.14+ (Dark Mode)
iOS 13+ (Dark Mode)
Android 10+ (Dark Theme)
Windows 10+ (Dark Theme)
Most modern browsers

Manual Testing

Chrome/Edge DevTools:

Open DevTools (F12)
Cmd+Shift+P (or Ctrl+Shift+P)
Type “Rendering”
Select “Rendering”
Find “Emulate CSS media feature prefers-color-scheme”
Toggle between light/dark

Best Practices

✓ Do

Start with a signal color that represents your brand
Use semantic colors (success, warning, error) instead of raw pigments
Test both light and dark themes
Ensure sufficient contrast
Combine color with text/icons
Respect user system preferences
Override specific pigments when needed

✗ Don’t

Use color alone to convey information
Violate WCAG AA contrast requirements
Hardcode colors (use CSS variables instead)
Ignore dark mode compatibility
Pick signal colors that are too dark or too light (breaks generation)

Testing Your Signal

Try different signals in DevTools console:

// Experiment with different signals
document.documentElement.style.setProperty('–signal', '#ff00ff'); // Neon
document.documentElement.style.setProperty('–signal', '#3a4a3a'); // Forest
document.documentElement.style.setProperty('–signal', '#0099ff'); // Electric
document.documentElement.style.setProperty('–signal', '#7a5a2e'); // Clay

// Reset to default
document.documentElement.style.setProperty('–signal', '#d65d0e');

Or visit the Color Test Page for interactive demonstration.

Learn More

Color Test Page – Interactive demonstration with examples
API Reference – Complete SCSS documentation
Typography – Text colors and contrast
Grid System – Layout with color

Color is mathematics, not decoration. Master the grid system →

Color System

Quick Navigation

The Signal Concept

Simple Usage

How It Works

1. DNA Extraction

2. Harmony Generation

3. Safety Constraints

4. Intelligent Dark Mode

Examples

Neon Pink Signal

Forest Green Signal

Clay Brown Signal

Color Variables

Generated Pigments (Low-level)

Semantic Colors (High-level)

Advanced Customization

Override Specific Colors

Manual Color System

Using Colors

Background & Text

Semantic Colors

Accent Color

Light Theme

Usage

Dark Theme

Usage

Accessibility

Testing Contrast

Color Classes

Text Colors

Background Colors

Alerts & Messages

Success Alert

Warning Alert

Error Alert

Info Alert

Customization

Per-Element Customization

Gradient Background Example

Common Patterns

Card with Accent Border

Status Indicator

Button Variants

Why OKLCH?

Perceptually Uniform

Benefits

Browser Support

Dark Mode Browser Support

Manual Testing

Best Practices

✓ Do

✗ Don’t

Testing Your Signal

Learn More