Design Tokens

Design Tokens zijn de centrale instellingen die het uiterlijk van je hele website bepalen. Denk aan: • Kleuren – Primaire kleur, secundaire kleur, accent, achtergrond, tekst • Lettertypen – Heading-font en body-font • Spacing – Afstanden tussen secties • Hoekafronding – Hoe rond knoppen en kaarten zijn • Schaduwen – Standaard schaduw-stijl voor kaarten en elementen Als je een design token wijzigt, wordt de hele site automatisch bijgewerkt. Je hoeft niet elk blok apart aan te passen.

Ga naar Design → Kleuren. Je ziet de volgende kleurvelden: • Primair – De hoofdkleur van je merk (knoppen, links, accenten) • Secundair – Een tweede accentkleur • Accent – Extra opvallende kleur voor highlights • Achtergrond – De achtergrondkleur van de pagina • Oppervlak – Achtergrondkleur voor kaarten en secties • Tekst – Standaard tekstkleur • Tekst gedempt – Kleur voor subteksten en placeholders Klik op een kleurveld om de kleurkiezer te openen. Je kunt een HEX-code invoeren of een kleur selecteren.

Schakel Dark Mode in via de toggle onderaan het Kleuren-paneel. Je kunt aparte kleuren instellen voor de donkere modus: • Primair (dark) – Vaak een lichtere variant van je primaire kleur • Achtergrond (dark) – Donkere achtergrond (bijv. #1a1a2e) • Tekst (dark) – Lichte tekstkleur voor leesbaarheid Als dark mode is ingeschakeld, zien bezoekers een zon/maan-toggle op je website. Hun voorkeur wordt onthouden.

Ga naar Design → Lettertypen. Je kunt twee fonts instellen: • Heading font – Wordt gebruikt voor alle koppen (H1 t/m H6) • Body font – Wordt gebruikt voor alinea's en andere tekst Kies uit honderden Google Fonts. Typ de naam van een font om te zoeken. Het font wordt automatisch geladen op je website.

Ga naar Design → Spacing. Hier stel je de standaard afstanden in: • Sectie spacing – Verticale ruimte tussen secties (bijv. 64px, 80px, 96px) • Content padding – Binnenruimte binnen secties Deze waarden gelden als standaard voor alle secties. Je kunt per blok nog individueel overschrijven via de inspector.

Ga naar Design → Hoekafronding. Dit bepaalt hoe rond elementen zijn: • Geen (0px) – Scherpe hoeken, zakelijk • Klein (4-8px) – Subtiel afgerond • Medium (12-16px) – Modern en vriendelijk • Groot (24px+) – Sterk afgerond, speels De hoekafronding geldt voor knoppen, kaarten, invoervelden en afbeeldingen.

Ga naar Design → Schaduwen. Schaduwen geven diepte aan kaarten en elementen. Kies een preset: • Geen – Plat ontwerp, geen schaduw • Subtiel – Lichte schaduw, modern • Medium – Duidelijke schaduw, kaarten liften op • Sterk – Opvallende schaduw, veel diepte De schaduw-instelling geldt voor alle kaart-achtige elementen op je site.

Klik op 'Opslaan' om je design tokens op te slaan. De wijzigingen zijn direct zichtbaar op je live website na opslaan. • Alles herstellen – Zet alle tokens terug naar de standaardwaarden • Vergrendelen – Vergrendel individuele kleuren zodat ze niet overschreven worden bij AI-generatie of template-import Let op: Design tokens worden per site opgeslagen. Elke site heeft zijn eigen set tokens.