Skip to content
Axiomatic Color

Axiomatic Color

Stop picking colors. Start defining intent.
Try the Theme Builder Open in StackBlitz Read the Philosophy

Quick Start: Build a Profile Card

Section titled “Quick Start: Build a Profile Card”

In this 5-minute tutorial, you’ll build a fully accessible, dark-mode ready UI component without picking a single hex code.

Step 1: The Page Surface

Section titled “Step 1: The Page Surface”

Everything starts with a Surface. Surfaces provide context for the content inside them. The surface-page is your canvas.

Preview
Item 1
Item 2
Item 3
layout-stack.html
<div
  class="surface-page"
  style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem"
>
  <div class="surface-card bordered" style="padding: 1rem">Item 1</div>
  <div class="surface-card bordered" style="padding: 1rem">Item 2</div>
  <div class="surface-card bordered" style="padding: 1rem">Item 3</div>
</div>

Step 2: Adding a Card

Section titled “Step 2: Adding a Card”

Nest a surface-card inside the page. The system automatically adjusts the contrast and borders to ensure it stands out.

Preview

Profile Card

This is a card surface.

card.html
<div class="surface-card bordered" style="padding: 1.5rem; border-radius: 8px">
  <h3 style="margin-top: 0">Profile Card</h3>
  <p class="text-subtle">This is a card surface.</p>
</div>

Step 3: Adding Interactivity

Section titled “Step 3: Adding Interactivity”

Add a button using surface-action. Notice how we use hue-brand to apply your brand color, while the system handles the text contrast automatically.

Preview
button.html
<button
  class="surface-action hue-brand bordered"
  style="padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer"
>
  Click Me
</button>

Step 4: Inputs

Section titled “Step 4: Inputs”

Form elements are surfaces too.

Preview
input.html
<input
  type="text"
  class="surface-input bordered"
  placeholder="Type something..."
  style="padding: 0.5rem; border-radius: 4px; width: 100%"
/>

Why This Matters

Section titled “Why This Matters”

Automated Accessibility

The system uses APCA (the future WCAG 3.0 standard) to mathematically guarantee readability. If your background changes, your text automatically adjusts to maintain contrast.

True Dark Mode

Don’t maintain two separate palettes. The system understands Polarity. It automatically inverts your surfaces and recalculates contrast for dark mode, ensuring a perfect visual balance.

Context Aware

Components adapt to their environment. A “Secondary Text” class looks different on a white card than it does on a dark tooltip, but it always maintains the same semantic weight.

Modern CSS

Built on the cutting edge of the web platform: OKLCH, Relative Color Syntax, and CSS Custom Properties. No JavaScript runtime required for the final output.