Design system · Dark-first
Energie van lime,
diepte van parelmoer.
Eén visuele taal voor je website en je mobiele apps. Mapbox' technische precisie in de neutralen, Apple's liquid glass in de materialen, en twee kleuren die het geheel van jou maken.
01
Kleur
Lime draagt het merk, parelmoer rood geeft nadruk, ink houdt alles rustig. Klik een staal om de hex te kopiëren.
02
Parelmoer
Het handtekening-effect: een iriserend verloop van goud via koraal naar roos en violet. Decoratief, nooit dragend voor betekenis.
Verlopen
--gradient-nacre
--gradient-brand · max 1 per scherm
--gradient-lime
Parelmoeren rand
Een 1px iriserende ring rond transparant glas. Voor het hero-paneel of één uitgelichte kaart.
Lime rand
Voor actieve of geselecteerde staten.
Parelmoer tekst
Alleen op display-formaat — het verloop verlaagt het effectieve contrast.
03
Typografie
Comfortaa voor display, Inter voor alles wat je echt moet lezen. De ronde vormen van Comfortaa rijmen op de zachte hoeken van liquid glass — maar de letter is zwak op klein formaat en heeft geen cursief, dus onder 20px komt hij er niet in.
04
Liquid glass
Vijf diktes, naar Apple's materiaalschaal. Elk oppervlak is vulling + blur + saturatieboost + hairline + speculaire highlight. Zonder kleur eronder is glas alleen maar grijs — daarom staan ze hier op een gekleurde ondergrond.
ultrathin · 8px
Hover-lagen
thin · 16px
Knoppen, chips
regular · 28px
Kaarten, panelen
thick · 44px
Tab bars, popovers
chrome · 64px
Navigatie, sheets
Wel
- Glas alleen waar er iets achter beweegt of kleurt
- Hoe belangrijker de tekst, hoe dikker het materiaal
- Altijd een hairline én een speculaire highlight — anders leest het als vlak grijs
- Respecteer prefers-reduced-transparency
Niet
- Glas op glas op glas — maximaal twee lagen boven elkaar
- Lange leesteksten op ultrathin of thin
- Glas als achtergrond van een heel scherm
- Blur boven 64px: het kost prestaties en levert niets meer op
05
Componenten
Knoppen
Eén primaire knop per scherm. De glow hoort bij lime en bij niets anders.
Badges & chips
Formulier
Segmented control
Voortgang
Laden
06
In een app
Zwevende glazen tab bar, chrome-navigatie bovenaan, en veilige zones voor de notch. Alle raakvlakken minimaal 44×44.
Vandaag
Goedemorgen
Drie taken open, één deadline vandaag.
Deze week
Notitie
Kleur is niet de identiteit. Consistentie is de identiteit.
Profiel
Instellingen
Nacre Pro
Alle thema's, onbeperkte projecten.
07
Contrast
Live berekend tegen het actieve thema. Wissel bovenaan naar light en let op de rij met lime als tekstkleur — daar zit de enige echte valkuil van dit palet.
| Token | Voorbeeld | Ratio | Niveau |
|---|
Regels die je niet mag breken
- Lime is in light theme nooit tekst — gebruik --primary-text (lime-800)
- Parelmoer rood is decoratief; fouten krijgen altijd --danger plus een icoon
- Kleur alleen is nooit de enige drager van betekenis
- Focusring blijft altijd zichtbaar, ook op glas
Bekende grenzen
- --text-subtle in light haalt 4.0:1 — alleen ≥18px of bold
- Wit op pearl-600 haalt 4.2:1 — alleen grote tekst, anders pearl-700
- Tekst op parelmoerverloop nooit onder 24px
- Glas verlaagt effectief contrast: check op de drukste achtergrond die kan voorkomen