# Unless Design System

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

 1. Every visual asset is generated from a single source of truth.
1. 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.
       [Colour · Palette](/en/design/foundations/colour/)