Getting started
Welcome
The Unless Design System is the canonical reference for every visual decision that ships under the Unless brand. Colour, type, spacing, motion, marks, surfaces, components, and product chrome are all documented here.
How this system is organized
The navigation on the left walks the atoms-to-compositions arc:
- Foundations colour, typography, spacing, motion, iconography. The atomic values everything else builds on.
- Identity the Unless mark, wordmark, lockups, and favicons. The geometry behind the logo.
- Surfaces monotile backgrounds, blueprint patterns, the Houdini spot, and theme surfaces.
- Components buttons, cards, forms, navigation. UI primitives in their canonical forms.
- Product composite product surfaces: agents, dashboard, help center.
- Experiments work-in-progress visualisations and marketing assets.
- Media kit press kit, social templates, brand usage rules, and contact.
Core principles
- Consistency over expression. Every surface must read as Unless before it reads as anything else.
- Tokens over values. No raw hex, no magic numbers. If it is not a token, it is not sanctioned.
- Contrast over decoration. Legibility is non-negotiable. Decoration that hurts readability gets cut.
Asset registry
Where each shipped asset comes from. Every entry here is derived from a single source of truth, so "always the latest" is structural, not aspirational.
| Asset | Source | Used on |
|---|---|---|
| Unless mark (icon) | Golden-ratio recipe → static SVG | Agent visualisations, dashboard, help center, navigation |
| Unless lockup | Golden-ratio recipe → static SVG | Site header, 404 page, press kit |
| Monotile background | Einstein-hats pattern + gradient overlays | Hero sections, CTA sections, social backgrounds |
| Favicon family | Padded mark variant | Browser favicon, Apple touch icon, PWA manifest |
| Blueprint pattern | φ-ratio geometry → static SVG | Homepage hero, agent visualisations, social backgrounds |
| Agent sketch | Composite component | Agent loop, marketing surfaces, design system |
| Agent loop | Composite component | Homepage, solution overview, design system |
Contributing
The system is recipe-first. To change an asset, change its recipe; never patch the output.
Principles
- Every visual asset is generated from a single source of truth.
- Change a constant in the recipe; every surface updates on the next build.
Why recipes, not static files
Every visual asset is derived from a recipe so changes propagate everywhere on the next build. If something looks wrong, the recipe is wrong; fix that instead of patching the output.
Getting help
Questions about how to apply these rules? Start with the usage tab on any foundations page.