Color

The Clatter palettes.

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

Sunrise

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

Bloom

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

Forest

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

How tokens are named.

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.