Color
Each palette is sampled directly from its mark. Seven tokens per palette, each assigned a role — Primary, Action, Highlight, Support, Deep — so designers reach for the same color for the same job. Click any swatch to copy its hex value.

Palette
Warmth, momentum, daylight shipping.
Use
For marketing, launches, onboarding — surfaces that should feel like a new beginning. Pairs best with cream and bone backgrounds.
Gradient
Walk the ring in order: Primary → Action → Deep. Never reverse.
Pairing
Pair Sunrise only with itself. Never mix tokens between Clatter palettes.

Palette
Playful, energetic, product-led.
Use
For consumer features, social campaigns, community surfaces. Avoid on dense data interfaces — too active for tables.
Gradient
Walk the ring in order: Primary → Action → Deep. Never reverse.
Pairing
Pair Bloom only with itself. Never mix tokens between Clatter palettes.

Palette
Calm, focused, long-term craft.
Use
For enterprise, documentation, dashboards — surfaces that need trust. The default palette for the developer platform.
Gradient
Walk the ring in order: Primary → Action → Deep. Never reverse.
Pairing
Pair Forest only with itself. Never mix tokens between Clatter palettes.
Roles
Every swatch carries a role. Designers and engineers select by role, not by hex — so recoloring the system is a single token swap.
Primary
The mark's identity. Buttons, key chrome, brand bars.
Action
Interactive intent. Filled CTAs, focused states.
Highlight
Bright, attention. Badges, status pills, sparingly.
Support
Mid-saturation. Tags, soft surfaces, secondary accents.
Deep
Anchoring depth. Footers, deep cards, hover overlays.