Guidelines · 01
Six principles
The posture behind every screen we ship. Calm defaults, decisive moments, warm restraint.
— PRINCIPLE 01
Warmth over drama
Our palette is cool blueprint paper and deep ink. Accent is a treat, not a uniform. If everything is loud, nothing is.
— PRINCIPLE 02
One decisive accent
Save the accent for the one action that matters on a screen. A second accent is almost always a missing hierarchy.
— PRINCIPLE 03
Type does the work
Contrast and spacing carry the page before color does. If a screen reads fine in grayscale, it will read great in color.
— PRINCIPLE 04
Motion, not animation
Transitions explain a change. They never entertain. Under 320ms unless there is a reason.
— PRINCIPLE 05
Respect the platform
iOS feels like iOS, Android feels like Android. Our kit is the thin layer of brand on top of native.
— PRINCIPLE 06
Ship, then polish
Shipping is a feature. Polish comes from shipped screens, not Figma rehearsals.
Guidelines · 02
Do & don’t
Concrete pairs, side by side. The point isn’t what’s technically allowed — it’s what reads as Binary Dreams at a glance.
Color
One accent, never as running text Do Accent on one CTA, ink everywhere else
Checkout
Confirm your order
Your card will be charged $42.00.
Don’t Accent as body text or decoration
Checkout
Confirm your order
Your card will be charged $42.00.
Typography
Two sizes max per hierarchy level Do One display, one body, hierarchy through size
Thoughtful software.
We design and ship mobile apps that feel obvious on the first tap.
Don’t Multiple typefaces, randomly sized
Thoughtful software.
We design and ship mobile apps that feel obvious on the first tap.
Spacing
Multiples of 4, generous margins Do Let the page breathe
Breathing room
Every gap lands on a 4-step grid.
Don’t Cram everything to the edge
Cramped layout
Arbitrary pixels — 7, 13, 23.
Buttons
One primary action per surface Do One primary + outline
Don’t Three primaries fighting
Guidelines · 03
Accessibility
Not a checklist tacked onto the end. These choices live inside the tokens and components — they’re the default, not a compliance step.
Contrast
Body text meets WCAG AA on every surface (≥ 4.5:1). Accent on white is the only color that requires care — use Cobalt Deep for text on light surfaces, never Cobalt Soft.
Focus states
Every interactive element has a visible focus ring — 2px in accent, offset by 2px. Never hidden behind a :focus-visible compromise.
Touch targets
Minimum 44×44px on mobile. Compact density relaxes this only for desktop pointer input; tap targets stay 44px regardless of density.
Motion
All motion respects prefers-reduced-motion. The spring curve becomes a linear base automatically.
Labels over icons
Icon-only controls need aria-label. Tab bars, top-bar actions and form icons ship with both an icon and a label whenever vertical space allows.
Guidelines · 04
Voice & copy
Words are a component too. These rules keep every screen sounding like one team wrote them.
Voice
Conversational, precise, never cute. We say "Save customer" not "Let’s keep them!". Short sentences. Real verbs.
Titles
Sentence case everywhere except eyebrows. No trailing punctuation. One idea per title.
Buttons
Start with a verb. Mirror the outcome, not the mechanism. "Save changes" beats "Submit form".
Errors
Say what happened, why it matters, what to do next. Three sentences max. Never blame the user.
Empty states
A single sentence and one next action. No illustrations of people in startup hoodies.
Numbers
Prefer tabular numerals in tables and dashboards. Round on the landing page, be exact in the admin.
Guidelines · 05
Refactoring UI in practice
The book’s rules, kept honest by tokens. Each pair below maps to a numbered rule in DESIGN.md §15 — break one and the kit breaks with you.
Hierarchy via weight + color
Same size, two weights, three text colors Do One scale, weight and color carry the rest
Sarah Mitchell
Senior product designer
Don’t Stair-stepped sizes, everything bold
Sarah Mitchell
Senior product designer
Soft fills, not solid
Solid colour is reserved for the one action that matters Do Tinted bg + colored text, one solid for priority
Active Beta Draft New
Don’t Every label shouts at full saturation
Active Beta Draft New
One separator at a time
Border, shadow, fill, whitespace — never four at once Do Surface fill + soft shadow, no border
Weekly digest
12 issues closed, 4 shipped, 1 rolled back.
Don’t Border, shadow, alt-bg and accent strip together
Weekly digest
12 issues closed, 4 shipped, 1 rolled back.
Light from above
Inputs are inset, actions are raised Do Input pressed in, button lifted out
you@studio.com
Don’t Both raised — the input looks tappable
you@studio.com
Empty states are designed
Icon, title, body, CTA. Hide chrome until there is content. Do Designed onboarding moment
No projects yet
Start the first one — the rest of the workspace fills itself in.
Don’t “No data” in a grey div
No data