Dynamic Runtime Theming with APCACH + Tailwind

Change your entire color scheme instantly with guaranteed accessibility. No rebuilds, no massive CSS bundles. Just beautiful, accessible themes powered by APCACH.

<!-- All these classes automatically adapt to theme changes and dark mode -->
<button class="bg-primary-500 text-primary-50 hover:bg-primary-600">
  Primary Button
</button>

<div class="bg-success-50 border-success-200 text-success-800"></div>

<p class="text-text-600">Greetings</p>

Quick Theme Selection

Customize Colors with APCACH

Adjust hue (0-360°) and chroma (0-0.4) to create accessible color palettes. APCACH generates all shades with guaranteed APCA contrast ratios.

Hue
220°
Chroma
0.30
Hue
185°
Chroma
0.25
Hue
215°
Chroma
0.050
Hue
220°
Chroma
0.020

Component Examples

Buttons

APCACH-Powered

Dynamic color generation with guaranteed APCA contrast ratios for perfect accessibility.

Hue + Chroma System

Define colors using hue (0-360°) and chroma (0-0.4) instead of hex codes.

Guaranteed Accessible

Every generated color meets APCA contrast standards automatically.

Status Messages

Success!Your changes have been saved successfully.
WarningPlease review your settings before continuing.
ErrorSomething went wrong. Please try again.
InfoNew features are now available in your dashboard.

Typography

Heading 1 - Bold Title

Heading 2 - Section Title

Heading 3 - Subsection

This is regular body text using the text color token. It automatically adapts to your theme and provides consistent readability.

Smaller, secondary text for less important information or captions.

Fine print or metadata that should be subtle but still readable.

Bold textMedium textRegular textLight text

Status Badges

ActivePendingFailedNewFeaturedDefault
VerifiedReviewExpiredDraft