# Designsysteem van Unless

Aan de slag

## Welkom

Het designsysteem van Unless is de canonieke referentie voor elke visuele beslissing die onder het merk Unless naar buiten gaat. Kleur, type, witruimte, beweging, merktekens, vlakken, componenten en product chrome staan hier allemaal beschreven.

## Hoe dit systeem is opgebouwd

De navigatie links loopt van atomen naar composities:

 - **Fundamenten** kleur, typografie, witruimte, beweging, iconografie. De atomaire waarden waarop al het andere voortbouwt.
- **Identiteit** het beeldmerk van Unless, het woordmerk, de logocombinaties en de favicons. De geometrie achter het logo.
- **Vlakken** monotile-achtergronden, blueprintpatronen, de Houdini-spot en themavlakken.
- **Componenten** knoppen, kaarten, formulieren, navigatie. UI-bouwstenen in hun canonieke vorm.
- **Product** samengestelde productvlakken: agents, dashboard, Help Center.
- **Experimenten** visualisaties en marketingbestanden die nog onderhanden zijn.
- **Mediakit** perskit, social templates, regels voor merkgebruik en contact.

## Kernprincipes

 - **Consistentie boven expressie.** Op elk vlak moet je eerst Unless herkennen, en pas daarna iets anders.
- **Tokens boven waarden.** Geen ruwe hex, geen magische getallen. Wat geen token is, is niet toegestaan.
- **Contrast boven decoratie.** Leesbaarheid staat niet ter discussie. Versiering die de leesbaarheid schaadt, gaat eruit.

## Bestandsregister

Waar elk uitgeleverd bestand vandaan komt. Elke regel hier komt uit één bron van waarheid, waardoor "altijd de nieuwste" een structureel gegeven is en geen goede bedoeling.

| Bestand | Bron | Gebruikt op |
| --- | --- | --- |
| Beeldmerk van Unless (icoon) | Recept op de gulden snede → statische SVG | Agentvisualisaties, dashboard, Help Center, navigatie |
| Logocombinatie van Unless | Recept op de gulden snede → statische SVG | Header van de site, 404-pagina, perskit |
| Monotile-achtergrond | einstein-hats-patroon plus verlooplagen | Herosecties, CTA-secties, achtergronden voor social media |
| Faviconfamilie | Variant van het beeldmerk met marge | Favicon in de browser, Apple touch-icon, PWA-manifest |
| Blueprintpatroon | Geometrie op de φ-verhouding → statische SVG | Hero op de homepage, agentvisualisaties, achtergronden voor social media |
| Agentschets | Samengesteld component | Agentlus, marketingvlakken, designsysteem |
| Agentlus | Samengesteld component | Homepage, oplossingsoverzicht, designsysteem |

## Bijdragen

Het systeem draait op recepten. Wil je een bestand veranderen, verander dan het recept; lap nooit de uitvoer op.

### Principes

 1. Elk visueel bestand wordt gegenereerd uit één bron van waarheid.
1. Verander een constante in het recept en elk vlak gaat bij de volgende build mee.

### Waarom recepten en geen statische bestanden

Elk visueel bestand komt uit een recept, zodat wijzigingen bij de volgende build overal doorwerken. Ziet iets er verkeerd uit, dan klopt het recept niet; herstel dat in plaats van de uitvoer op te lappen.

## Hulp nodig

Vragen over hoe je deze regels toepast? Begin bij het tabblad Gebruik op een van de pagina's onder Fundamenten.
       [Kleur · Palet](/nl/design/foundations/colour/)