Concepts
Principles for composing consistent interfaces from the component library.
System principles
Use semantic tokens and one clear spacing owner.
Accessibility
Keep native semantics, visible focus, and complete keyboard paths.
Responsive behavior
Compose layouts at the canonical breakpoints.
Voice and content
Write calm, direct interface copy with concrete verbs.
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 · 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.
Interface layout
Responsive behavior
Start with content flow, then add columns at the canonical breakpoints.
Small screens
At 639px and below, use one content column and keep every action reachable without horizontal scrolling.
Intermediate widths
At 767px and 1023px, collapse supporting navigation before reducing the space around primary content.
Wide screens
At 1279px and above, add columns only when they preserve reading order and clear keyboard traversal.
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.