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
- Elk visueel bestand wordt gegenereerd uit één bron van waarheid.
- 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.