Colors

Brand colors and semantic color system.

Red Brand Palette

Custom red palette defined in design tokens. Red 600 is the brand primary.

#fef2f4

100

#fde6e9

200

#fbd0d8

300

#f7aab9

400

#f17995

500

#e54870

600 Primary

#c91432

700

#ab0f2b

800

#8f1029

900

#7b1228

950

#440511

Neutral / Slate Palette

Standard Tailwind Slate values used for text, borders, and backgrounds.

#f8fafc

100

#f1f5f9

200

#e2e8f0

300

#cbd5e8

400

#94a3b8

500

#64748b

600

#475569

700

#334155

800

#1e293b

900

#0f172a

950

#020617

Semantic Colors

Color assignments by purpose. Each role uses a specific palette for consistency.

Primary

CTAs, buttons, active states

#c91432

Neutral

Text, borders, backgrounds

#64748b

Success

Success messages, confirmations

#16a34a

Warning

Warnings, pending states

#eab308

Error

Error messages, validation

#ef4444

Info

Informational, tooltips

#3b82f6

Text Color Utilities

Nuxt UI semantic text classes that adapt to light and dark modes.

text-dimmed The quick brown fox jumps over the lazy dog.

text-muted The quick brown fox jumps over the lazy dog.

text-toned The quick brown fox jumps over the lazy dog.

text-default The quick brown fox jumps over the lazy dog.

text-highlighted The quick brown fox jumps over the lazy dog.

text-inverted The quick brown fox jumps over the lazy dog.

Background Utilities

Nuxt UI semantic background classes for layered surfaces.

Sample content

bg-default

Sample content

bg-muted

Sample content

bg-elevated

Sample content

bg-accented

Sample content

bg-inverted