Design Tokens

The foundation of AdorableCSS's design system. Consistent, scalable, and beautiful tokens for building cohesive interfaces.

Color System

OKLCH-based color palette designed for perfect perceptual uniformity. Every color works harmoniously in gradients and provides excellent accessibility.

Featured Gradients

Beautiful, smooth gradients powered by OKLCH

Brand Identity

Primary brand gradient

Brand Start

purple-500

Brand End

pink-500

Full Color Spectrum

Complete palette with all shades

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

gray

slate

zinc

neutral

stone

Semantic Colors

Meaningful colors for UI communication

Color Best Practices

🎨

Use Semantic Colors

primary, success, warning, error for consistent meaning

🌈

OKLCH Gradients

Smooth, perceptually uniform gradients between any colors

♿

Accessible Contrast

500+ shades on white, 400- shades on black backgrounds