Theming & Colors

Master Axiom01's powerful theming system and color palette generation.

Color System Overview

Axiom01's color system is designed to automatically generate harmonious, accessible color palettes from a single primary color. This approach ensures consistency while giving you complete creative control.

Key Benefits

Automatic Generation: Define one primary color, get a complete palette
Accessibility First: All color combinations meet WCAG 2.1 AA contrast standards
CSS Variables: Easy theming with real-time updates
Dark Mode Ready: Intelligent adaptation for light and dark themes

Primary Color Palette

These are the foundation colors that drive your entire design system:

Primary

var(--a-color-primary)

Main brand color used for buttons, links, and accents

Secondary

var(--a-color-secondary)

Complementary color for secondary actions

Tertiary

var(--a-color-tertiary)

Additional accent color for variety

Semantic Colors

Colors with specific meanings for user interface feedback:

Success

var(--a-color-success)

Positive actions and confirmations

Warning

var(--a-color-warning)

Caution and important notices

Error

var(--a-color-error)

Errors and destructive actions

Info

var(--a-color-info)

Informational messages

Custom Theming

Create your own theme by overriding CSS variables. Here's a complete example:

Custom Theme Example

:root {
  /* Primary brand colors */
  --a-color-primary: #8b5cf6;
  --a-color-on-primary: #ffffff;

  /* Surface colors */
  --a-color-surface: #fafafa;
  --a-color-on-surface: #1a1a1a;

  /* Semantic colors */
  --a-color-success: #10b981;
  --a-color-warning: #f59e0b;
  --a-color-error: #ef4444;

  /* Typography */
  --a-font-family-sans: 'Inter', system-ui, sans-serif;

  /* Spacing adjustments */
  --a-space-unit: 1.2rem;
}

Dark Mode Implementation

Axiom01 includes intelligent dark mode support that automatically adjusts all colors for optimal readability:

Dark Mode Variables

[data-theme="dark"] {
  --a-color-surface: #1a1a1a;
  --a-color-surface-variant: #2a2a2a;
  --a-color-on-surface: #ffffff;
  --a-color-on-surface-variant: #cccccc;
  --a-color-outline: #404040;

  /* Semantic colors adjust for dark backgrounds */
  --a-color-success: #22c55e;
  --a-color-warning: #fbbf24;
  --a-color-error: #f87171;
}