The Clatter Design & Brand Kit.
The official brand system for Clatter Apps — three sibling marks on a quiet white canvas. Every color, type ramp, spacing step, and partnership rule, written down once and used everywhere.
Clatter/UI
Sunrise edition
Warmth, momentum, daylight shipping.
Clatter/UI
Bloom edition
Playful, energetic, product-led.
Clatter/UI
Forest edition
Calm, focused, long-term craft.
01 — The System
A quiet, opinionated kit.
The Shipping Design Plan is a small, restrained system. White canvas. Three marks. Type before color. Space before decoration. Every rule below exists to keep the brand legible across surfaces.
Principle
Geometry
Every mark is built from seven equal circles arranged in a perfect ring. The geometry never changes — only the palette shifts.
Principle
Three marks
Sunrise, Bloom, Forest. Three siblings, never variants. One mark per surface. Never two at once.
Principle
Glass over white
Elevated surfaces use a subtle 14px blur with 65% white fill on a near-white canvas. No drop shadows. No gradients on body surfaces.
Principle
Type-first
Inter for everything in product. Color is reserved for the mark, accents, and state — never for decoration.
02 — The Marks
Three logos. One geometry.
Each mark is a sibling, not a variant. They share construction but carry a different tone. Pick one per surface and let its palette do the rest.
Sunrise
MarkWarmth, momentum, daylight shipping.
For marketing, launches, onboarding — surfaces that should feel like a new beginning. Pairs best with cream and bone backgrounds.
Bloom
MarkPlayful, energetic, product-led.
For consumer features, social campaigns, community surfaces. Avoid on dense data interfaces — too active for tables.
Forest
MarkCalm, focused, long-term craft.
For enterprise, documentation, dashboards — surfaces that need trust. The default palette for the developer platform.
Construction
Seven circles, equal diameter, equal angular spacing on a single ring.
Clear space
Always leave 1× ring diameter of empty space around the mark.
Minimum size
32px on screen, 12mm in print. Below: switch to monogram.
Background
White, bone, or cool 50. Never on photography or busy gradients.
03 — Color
Extracted from every mark.
Each palette is sampled directly from its mark, then walked around the ring as a named gradient. Open the dedicated palette page for the full token list.
Palette
Sunrise
7 tokens · Primary / Action / Highlight / Support / Deep
Palette
Bloom
7 tokens · Primary / Action / Highlight / Support / Deep
Palette
Forest
7 tokens · Primary / Action / Highlight / Support / Deep
04 — Typography
Inter and JetBrains Mono.
Two families. Inter does all the heavy lifting — from hero to body to label. JetBrains Mono is reserved for code, tokens, and system surfaces. No decorative fonts anywhere in the product.
Display · Inter 600
Ship the plan.
Body · Inter 400 / 500
Clatter Apps designs calm, fast tools. Inter carries the weight of every paragraph, label, and button across the product surface.
Mono · JetBrains Mono
const ship = (plan) => plan.execute();
Reserved for code, design tokens, version chips, and any label that should feel like a system surface. Never used for body copy.
05 — Get the kit
Everything in one zip.
The downloadable Brand Kit contains all three marks as JPEG, every palette as JSON, and the written usage guide. One file, ready for partners, designers, and press.
Clatter Brand Kit v1.0
3 logos · 3 palettes · usage guide · ~0.3 MB