01 — Brand Identity

Status: 🎨 Vision — Nog niet gebouwd.

Afhankelijkheden: Geen — dit document is zelfstandig. Guild taxonomy (06) wordt later als optionele laag toegevoegd.

Brand identity in Beam bestaat uit twee fasen:

Onboarding wizard — verzamelt merkdata in 7 stappen en levert een Brand JSON
Styling Builder — vertaalt Brand JSON naar een levend design system via presets en finetuning

Het resultaat: merkinfrastructuur als service. Eén bron van waarheid voor alle visuele uitingen, bewaakt door guardrails die professionele kwaliteit garanderen.

1. Onboarding Wizard

Een wizard die nieuwe gebruikers doorlopen bij het aanmaken van een site. Het resultaat is een Brand JSON die als fundament dient voor de Styling Builder en alle content.

Kenmerken

7 stappen — gestructureerd, voorspelbaar, laagdrempelig
Stap 5 en 7 zijn optioneel — gebruiker kan overslaan en later invullen
Progressie-indicator — gebruiker ziet altijd waar ze zijn
Tussentijds opslaan — wizard data persists in localStorage, hervat waar je gebleven bent
Validatie per stap — niet pas aan het einde

Hosting

Beslissing uitgesteld. De wizard kan een aparte app worden (start.beambuilder.com) of een flow binnen het bestaande dashboard. De UX en data-structuur zijn in beide gevallen identiek.

2. Wizard Stappen (1–7)

Stap 1: De Basis

Veld	Type	Verplicht	Validatie
Bedrijfsnaam	tekst	✅	Min 2, max 100 tekens
Slogan / tagline	tekst	❌	Max 150 tekens
Korte beschrijving	textarea	✅	Min 20, max 300 tekens
Branche	dropdown	✅	Keuze uit taxonomie (zie §3)
Sub-niche	dropdown	✅	Dynamisch op basis van branche
Website URL (bestaand)	url	❌	URL format validatie

UX: De branche-dropdown filtert dynamisch de sub-niche opties. Bij “Anders” verschijnt een vrij tekstveld.

Stap 2: Doelgroep

Veld	Type	Verplicht	Validatie
Wie is je ideale klant?	textarea	✅	Min 10, max 500 tekens
B2B of B2C of beide?	single select	✅	—
Leeftijdsrange doelgroep	range slider	❌	16–80, stappen van 5
Regio / markt	multi-select	✅	Lokaal, nationaal, internationaal

Stap 3: Tone of Voice

Visuele keuze met live voorbeeldtekst die meebeweegt met de sliders.

Dimensie	Type	Default
Formeel ↔ Informeel	slider (0.0–1.0)	0.5
Serieus ↔ Speels	slider	0.5
Technisch ↔ Toegankelijk	slider	0.5
Zakelijk ↔ Persoonlijk	slider	0.5

UX: De voorbeeldtekst toont dezelfde boodschap in de gekozen stijl. Bij “informeel + speels” ziet de gebruiker een andere formulering dan bij “formeel + serieus”. Drie voorbeeldzinnen die live reageren:

Slider: Formeel + Serieus
→ "Wij bieden professionele renovatiediensten voor woningeigenaren in de regio Utrecht."

Slider: Informeel + Speels
→ "Droomt je badkamer van een make-over? Wij maken het waar — en het wordt nog leuk ook."

Slider: Midden
→ "Een verbouwing hoeft niet stressvol te zijn. Wij begeleiden je van plan tot oplevering."

Stap 4: Visuele Identiteit

Veld	Type	Verplicht	Validatie
Logo upload	file upload	❌	SVG, PNG, max 2MB
Primaire kleur	color picker	❌	Hex of OKLCH
Secundaire kleur	color picker	❌	—
Accentkleur	color picker	❌	—
Font-combinatie	visuele keuze	❌	12 opties (zie §4)
Gewenste sfeer	visuele keuze	❌	6 presets (zie §7)

UX bij kleuren: Als de gebruiker geen kleuren kiest, worden ze afgeleid uit de sfeer-preset. Als er wel een primaire kleur is maar geen secundaire/accent, genereert het systeem complementaire kleuren via OKLCH.

UX bij sfeer: 6 visuele kaarten met naam, kleuren, fonts en een mini-preview. De gebruiker klikt één kaart om een sfeer te kiezen. Deze keuze laadt het startpunt van de Styling Builder.

Stap 5: Content & Media (optioneel)

Veld	Type	Verplicht	Validatie
Welke pagina’s wil je?	multi-select	✅	Min 1 selectie
Heb je al teksten?	ja/nee toggle	❌	—
Teksten uploaden	file upload	❌	docx, txt, pdf, max 10MB
Heb je al foto’s?	ja/nee toggle	❌	—
Foto’s uploaden	multi file upload	❌	jpg, png, webp, max 5MB/stuk, max 20

Pagina-opties: Home, Over ons, Diensten, Contact, Blog, Portfolio, Pricing, FAQ

UX: Duidelijke tekst: “Dit kun je ook later doen in het dashboard.” De stap is overspringbaar.

Wat er met uploads gebeurt:

Teksten (docx, txt, pdf) → opgeslagen in R2 + tekst geëxtraheerd als extracted_text
Afbeeldingen → opgeslagen in R2 + thumbnail gegenereerd
Logo → opgeslagen in R2, URL in de Brand JSON

Stap 6: Doelen & Conversie

Veld	Type	Verplicht	Validatie
Hoofddoel van de website	single select	✅	—
Belangrijkste call-to-action	tekst	❌	Max 60 tekens
Secundaire CTA	tekst	❌	Max 60 tekens
Contactgegevens	gestructureerde velden	❌	Email/telefoon/adres format
Social media links	herhalend veld	❌	Platform + URL, max 6

Hoofddoel opties: Leads genereren, Informeren, Producten/diensten verkopen, Portfolio tonen, Community opbouwen

Stap 7: Concurrentie & Differentiatie (optioneel)

Veld	Type	Verplicht	Validatie
Noem 1–3 concurrenten (of URLs)	herhalend tekstveld	❌	Max 3 entries
Wat maakt jou anders?	textarea	❌	Max 300 tekens
Wat moeten bezoekers onthouden?	tekst	❌	Max 100 tekens

UX: Hele stap is overspringbaar met duidelijke “Overslaan” knop.

3. Branche & Sub-niche Taxonomie

De branche-keuze in stap 1 werkt met een twee-niveau systeem: brede categorie → sub-niche. De sub-niche kan later mappen naar vertical packs en guild-archetypes.

Branche	Sub-niches
Wellness & Zorg	Yoga studio, Therapiepraktijk, Coaching, Fysiotherapie, Diëtist, Personal trainer, Massagepraktijk, Anders
Creatieve Industrie	Fotograaf, Grafisch ontwerper, Illustrator, Filmmaker, Muzikant, Schrijver, Animator, Anders
Horeca & Gastvrijheid	Restaurant, Café, Hotel / B&B, Eventlocatie, Catering, Feestzaal, Anders
Retail & E-commerce	Webshop, Lokale winkel, Ambachtsman, Food producer, Marktplaats, Anders
Zakelijke Dienstverlening	Aannemer, Architect, Makelaar, Advocaat, Accountant, IT-dienstverlener, Adviseur, Anders
Onderwijs & Training	Online cursussen, Trainer/coach, Spreker, Auteur, Onderzoeker, Anders
Tech & Software	SaaS, Freelance developer, Agency, Startup, Anders
Non-profit	Stichting, Vereniging, Vrijwilligersorganisatie, Anders
Overig	(vrij tekstveld)

Mapping naar toekomstige guilds:

Branche	Guild (toekomst)
Wellness & Zorg	⚕️ Healers
Creatieve Industrie	🎨 Creators
Retail & E-commerce	🏪 Merchants
Onderwijs & Training	📚 Scholars
Horeca & Gastvrijheid	🍽️ Hosts
Zakelijke Dienstverlening, Tech	🔧 Builders

Non-profit en Overig mappen niet direct naar een guild — daar wordt later een “Kies je stijl” flow voor gebouwd.

4. Font-combinaties

12 curated font-combinaties via Google Fonts, verdeeld over de 6 sfeer-presets (2 per preset):

🌿 Warm & Aards

Naam	Heading	Body	Karakter
Forest Calm	Playfair Display	Lato	Elegant serif + vriendelijke sans — tijdloos en warm
Botanical	Cormorant Garamond	Source Sans 3	Organische serif + neutrale body — licht en natuurlijk

🖤 Bold & Expressief

Naam	Heading	Body	Karakter
Statement	Bebas Neue	Inter	Display-caps voor impact + cleane body
Creative Edge	Syne	DM Sans	Geometrische kop met karakter + moderne body

💼 Zakelijk & Betrouwbaar

Naam	Heading	Body	Karakter
Corporate Clean	Plus Jakarta Sans	Open Sans	Moderne professionele sans — betrouwbaar en helder
Trusted Pro	Mulish	Nunito Sans	Strak en open — SaaS en tech-friendly

📚 Verfijnd & Diep

Naam	Heading	Body	Karakter
Editorial	Libre Baskerville	Merriweather	Dubbele serif — autoriteit voor longform content
Academic	EB Garamond	Lora	Klassiek humanistisch — intellectueel en diepgaand

🍽️ Gastvrij & Sfeervol

Naam	Heading	Body	Karakter
Bistro Charm	Playfair Display	Nunito	Elegante serif + ronde body — warm en uitnodigend
Cozy Table	DM Serif Display	Karla	Klassiek display + moderne body — restaurant-gevoel

🔧 Solide & Strak

Naam	Heading	Body	Karakter
System Solid	Roboto Slab	Roboto	Slab + matching sans — functioneel, no-nonsense
Industrial	Space Grotesk	IBM Plex Sans	Technisch en efficiënt — tools en engineering

Pairing-logica

Serif heading + sans body = tijdloos contrast, meest universeel
Display-only kop (Bebas, Syne, DM Serif Display) = visueel statement, body moet neutraal zijn
Dubbele serif (Editorial, Academic) = voor content-zware sites
Matched families (Roboto, IBM Plex) = maximale harmonie

5. Brand JSON Output

De output van de wizard. Dit JSON object wordt via de API opgeslagen en is de input voor de Styling Builder. Volledig contract: zie Brand JSON Spec.

Minimaal Voorbeeld

{
  "version": "1.0",
  "created_at": "2026-03-20T12:00:00Z",

  "company": {
    "name": "Bouwbedrijf De Vries",
    "tagline": "Vakmanschap sinds 1985",
    "description": "Renovatie en nieuwbouw voor particulieren in de regio Utrecht",
    "industry": "zakelijke-dienstverlening",
    "sub_niche": "aannemer",
    "website_url": null
  },

  "audience": {
    "type": "b2c",
    "description": "Huiseigenaren in regio Utrecht die willen verbouwen",
    "age_range": { "min": 30, "max": 65 },
    "market": ["regional"]
  },

  "tone_of_voice": {
    "formality": 0.6,
    "seriousness": 0.7,
    "technicality": 0.3,
    "personality": 0.5
  },

  "visual_identity": {
    "logo_url": null,
    "colors": {
      "primary": "#1B4D7A",
      "secondary": "#F5F0EB",
      "accent": "#D4883E"
    },
    "font_combination": "system-solid",
    "mood_preset": "solide-strak"
  },

  "content": {
    "requested_pages": ["home", "about", "services", "contact", "portfolio"],
    "existing_texts": [],
    "existing_media": []
  },

  "goals": {
    "primary_goal": "lead_generation",
    "primary_cta": "Vraag een gratis adviesgesprek aan",
    "secondary_cta": "Bekijk onze projecten",
    "contact": {
      "email": "info@devries-bouw.nl",
      "phone": "+31 30 123 4567",
      "address": "Industrieweg 12, Utrecht"
    },
    "social_media": [
      { "platform": "instagram", "url": "https://instagram.com/devries.bouw" }
    ]
  },

  "positioning": {
    "competitors": [],
    "differentiator": null,
    "key_message": null
  }
}

Velden per Wizard Stap

Stap	Brand JSON veld
1 — De Basis	`company.*`, `company.industry`, `company.sub_niche`
2 — Doelgroep	`audience.*`
3 — Tone of Voice	`tone_of_voice.*`
4 — Visuele Identiteit	`visual_identity.*`
5 — Content & Media	`content.*`
6 — Doelen & Conversie	`goals.*`
7 — Concurrentie	`positioning.*`

6. Styling Builder

De Styling Builder ontvangt de Brand JSON en vertaalt die naar een levend design system. Het is het bewerkoppervlak — het token schema is de opslag.

Kernfilosofie: “You cannot make it ugly.”

Elke keuze die de gebruiker maakt wordt begrensd door guardrails die professionele kwaliteit garanderen. Niet omdat de gebruiker dom is, maar omdat goed design moeilijk is en Beam dat probleem oplost.

Hoe het startpunt wordt bepaald

Wizard ingevuld?
  ↓
visual_identity.mood_preset aanwezig?
  → JA: laad die sfeer-preset als startpunt
  → NEE: branche/sub_niche → suggereer passende preset
  ↓
visual_identity.colors aanwezig?
  → JA: overschrijf preset kleuren met gebruikerskeuze
  → NEE: gebruik preset kleuren
  ↓
visual_identity.font_combination aanwezig?
  → JA: overschrijf preset fonts
  → NEE: gebruik preset fonts
  ↓
Builder opent met dit samengestelde startpunt

Principe: de Styling Builder vraagt niets wat de wizard al heeft gevraagd. Alle wizard-data wordt direct als startpunt geladen.

Layout

┌─────────────────────────────────────────────────────┐
│  KLEUREN      TYPOGRAFIE      ELEMENTEN      EXPORT  │  ← tabs
├──────────────┬──────────────────────────────────────┤
│              │                          [L][D][M]   │
│  Controls    │         Live Preview Canvas          │
│  (sidebar)   │                                      │
│              │   Bedrijfsnaam                       │
│  ● Preset    │   H1 heading tekst                   │
│  ● Colors    │   H2 subheading                      │
│  ● Fonts     │   Body paragraph tekst...            │
│  ● Radius    │   [Primary CTA]  [Secondary]         │
│  ● Spacing   │                                      │
│  ● Shadows   │   ┌────────────────────────────┐     │
│              │   │  Block Preview              │     │
│  ──────────  │   │  (hoe blocks eruitzien      │     │
│  Guardrails  │   │   met jouw tokens)          │     │
│  ✅ Contrast  │   └────────────────────────────┘     │
│  ✅ Harmonie  │                                      │
│  ✅ Typografie│                                      │
│              │                                      │
│  [Sfeer-     │                                      │
│   preset:    │                                      │
│   Solide &   │                                      │
│   Strak]     │                                      │
│  [Wissel →]  │                                      │
└──────────────┴──────────────────────────────────────┘

Canvas toggle rechtsboven: [L] Light · [D] Dark · [M] Mobile
Inline selectie: klik op een element in de canvas → sidebar navigeert automatisch naar de juiste sectie
Guardrail dashboard: live status van alle guardrail checks onderaan de sidebar

Tab: Kleuren

Startpunt: preset palette of wizard-kleuren.

Controls:

Control	Type	Finetuning
Primaire kleur	color picker	Vrij kiezen, met guardrails
Secundaire kleur	color picker	Vrij kiezen
Accentkleur	color picker	Vrij kiezen
Shade schaal	automatisch	OKLCH 50-900 gegenereerd, niet handmatig
Dark mode	auto-toggle	Automatisch berekend, per kleur override mogelijk

Max 3 brand colors — guardrail. Bij poging tot 4e kleur: “Drie kleuren zijn genoeg voor een sterk merk.”

Contrast check (altijd zichtbaar):

primary op background:  14.2:1  ✅ AAA
primary op surface:     11.8:1  ✅ AAA
text op background:     16.1:1  ✅ AAA
text-muted op surface:   4.8:1  ✅ AA
accent op background:    3.1:1  ⚠️ Alleen grote tekst

Bij ⚠️ of ❌: kleur wordt niet geblokkeerd, maar een suggestie voor een betere tint verschijnt.

Semantic mapping:

Role          Gekoppeld aan        Voorbeeld
──────────────────────────────────────────────────────
primary       ● brand.primary      [Button] [Link]
background    ○ white (#FFFFFF)    [Card bg]
surface       ○ gray-50            [Section bg]
text          ○ gray-900           [Paragraph]
text-muted    ○ gray-500           [Caption]
border        ○ gray-200           [Table border]
danger        ○ #C92A2A            [Foutmelding]
success       ○ #2F9E44            [Bevestiging]
warning       ○ #E67700            [Waarschuwing]

Tab: Typografie

Startpunt: preset font-combinatie of wizard-keuze.

Controls:

Control	Type	Finetuning
Font-combinatie	visuele keuze (12 opties)	Kies preset, of heading/body apart wisselen
Heading font	dropdown	Curated Google Fonts subset (30+ opties)
Body font	dropdown	Curated subset, gefilterd op compatibiliteit met heading
Mono font	dropdown	Optioneel, voor code/labels

Typografische schaal (vaste presets):

Element	Font	Desktop	Mobiel	Weight	Line-height
H1	heading	3rem	2.25rem	700	1.2
H2	heading	2.25rem	1.875rem	600	1.3
H3	heading	1.875rem	1.5rem	600	1.3
H4	heading	1.5rem	1.25rem	500	1.4
H5	heading	1.25rem	1.125rem	500	1.4
H6	heading	1rem	1rem	500	1.4
Body	body	1rem	1rem	400	1.6
Label	body	0.875rem	0.875rem	500	1.4
Caption	body	0.75rem	0.75rem	400	1.4

Guardrail: font-combinatie check. Bij het wisselen van heading font filtert de builder body fonts op compatibiliteit. Incompatibele combinaties zijn niet selecteerbaar.

Tab: Elementen

Alle elementen erven hun styling uit kleuren + fonts + vorm. Per element kan de gebruiker een variant-preset kiezen.

Radius:

Preset	Waarde	Karakter
None	0px	Strak, grafisch
Small	4px	Functioneel
Medium	8px	Balanced
Large	16px	Zacht, vriendelijk
Pill	9999px	Speels, rond

Spacing:

Preset	Base unit	Karakter
Compact	4px	Efficiënt, veel content
Comfortable	6px	Balanced
Spacious	8px	Adem, rust

Shadows:

Preset	Karakter
None	Plat design
Subtle	Lichte diepte
Medium	Duidelijke diepte
Prominent	Statement, lagen

Per-element finetuning: Buttons, headings, body tekst, links, tabellen, formuliervelden, badges — elk met een preset die de standaardwaarden uit bovenstaande controls overneemt. Alleen beschikbaar via de “Elementen” tab, niet zichtbaar in de snelle flow.

Tab: Export

CSS Variables — kant-en-klaar
Tailwind v4 @theme — voor Tailwind projecten
W3C Design Tokens JSON — standaard formaat, compatibel met Figma Tokens en Style Dictionary

7. Sfeer-presets

6 visuele presets die als startpunt dienen voor de Styling Builder. Elke preset definieert een complete set kleuren, fonts, radius, spacing en shadows.

Mapping: Deze presets zijn bewust ontworpen als proto-guilds. Ze mappen later 1:1 naar guild Style Packs wanneer het guild-systeem wordt geïntroduceerd.

🌿 Warm & Aards

Eigenschap	Waarde
Kleuren	Primary: sage green (#87A96B), Secondary: warm crème (#F5F0EB), Accent: aarde (#C4956A)
Fonts	Forest Calm (Playfair Display + Lato)
Radius	Large (16px)
Spacing	Spacious
Shadows	Subtle
Karakter	Rustig, aards, ademruimte
Toekomstige guild	⚕️ Healers

🖤 Bold & Expressief

Eigenschap	Waarde
Kleuren	Primary: charcoal (#2D3436), Secondary: off-white (#FAFAFA), Accent: electric (#FF6B6B)
Fonts	Statement (Bebas Neue + Inter)
Radius	Medium (8px)
Spacing	Comfortable
Shadows	Medium
Karakter	Opvallend, creatief, contrast
Toekomstige guild	🎨 Creators

💼 Zakelijk & Betrouwbaar

Eigenschap	Waarde
Kleuren	Primary: navy (#1B4D7A), Secondary: licht grijs (#F8F9FA), Accent: oranje (#D4883E)
Fonts	Corporate Clean (Plus Jakarta Sans + Open Sans)
Radius	Small (4px)
Spacing	Comfortable
Shadows	Subtle
Karakter	Professioneel, betrouwbaar, helder
Toekomstige guild	🏪 Merchants

📚 Verfijnd & Diep

Eigenschap	Waarde
Kleuren	Primary: diep blauw (#1A365D), Secondary: perkament (#FDF8F0), Accent: goud (#B7791F)
Fonts	Editorial (Libre Baskerville + Merriweather)
Radius	Small (4px)
Spacing	Spacious
Shadows	None
Karakter	Intellectueel, autoriteit, diepgang
Toekomstige guild	📚 Scholars

🍽️ Gastvrij & Sfeervol

Eigenschap	Waarde
Kleuren	Primary: warm bordeaux (#722F37), Secondary: ivoor (#FFFFF0), Accent: goud (#DAA520)
Fonts	Bistro Charm (Playfair Display + Nunito)
Radius	Medium (8px)
Spacing	Comfortable
Shadows	Medium
Karakter	Warm, uitnodigend, sfeervol
Toekomstige guild	🍽️ Hosts

🔧 Solide & Strak

Eigenschap	Waarde
Kleuren	Primary: antraciet (#374151), Secondary: licht grijs (#F3F4F6), Accent: blauw (#3B82F6)
Fonts	System Solid (Roboto Slab + Roboto)
Radius	None (0px)
Spacing	Compact
Shadows	Subtle
Karakter	Functioneel, efficiënt, no-nonsense
Toekomstige guild	🔧 Builders

Preset selectie UI

┌─────────────────────────────────────────────────────────────┐
│  Kies je stijl                                              │
│                                                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │ 🌿          │  │ 🖤          │  │ 💼          │         │
│  │ ████████    │  │ ████████    │  │ ████████    │         │
│  │ ████████    │  │ ████████    │  │ ████████    │         │
│  │             │  │             │  │             │         │
│  │ Warm &      │  │ Bold &      │  │ Zakelijk &  │         │
│  │ Aards       │  │ Expressief  │  │ Betrouwbaar │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│                                                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │ 📚          │  │ 🍽️          │  │ 🔧          │         │
│  │ ████████    │  │ ████████    │  │ ████████    │         │
│  │ ████████    │  │ ████████    │  │ ████████    │         │
│  │             │  │             │  │             │         │
│  │ Verfijnd &  │  │ Gastvrij &  │  │ Solide &    │         │
│  │ Diep        │  │ Sfeervol    │  │ Strak       │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│                                                             │
│  of: [Begin zonder preset — alles handmatig instellen]      │
└─────────────────────────────────────────────────────────────┘

8. Guardrail Systeem

“You cannot make it ugly” is geen aspiratie — het is een technische implementatie. Guardrails zijn altijd actief, niet optioneel.

Kleur Guardrails

Regel	Implementatie	Feedback bij falen
Max 3 brand colors	UI blokkeert 4e kleur	”Drie kleuren zijn genoeg voor een sterk merk.”
WCAG AA contrast	Real-time check bij elke kleurwijziging	Contrast ratio badge: ✅ AA / ⚠️ Bijna / ❌ Onvoldoende + suggestie
Harmonie check	Kleuren buiten OKLCH-bereik van het palette	”Deze kleur botst met je palette. Probeer deze suggestie.”
Dark mode contrast	Automatisch gevalideerd bij generatie	Idem als WCAG check

Typografie Guardrails

Regel	Implementatie	Feedback bij falen
Curated font-paren	Incompatibele combinaties niet selecteerbaar	Font picker toont alleen compatibele matches
Vaste typografische schaal	Sizes niet handmatig instelbaar	— (geen control beschikbaar)
Line-height	Automatisch berekend per font size	—
Mobile sizes	Automatisch afgeleid (ratio)	Preview toont mobiel mee

Vorm Guardrails

Regel	Implementatie	Feedback bij falen
Consistente radius	Eén preset voor alles	Geen losse radius per element
Spacing systeem	Base unit × vermenigvuldigers	Stappen, geen vrije waarden
Shadow coherentie	3 niveaus, niet vrij instelbaar	Preset selector

Feedback UX

Guardrails voelen niet als restrictie maar als hulp:

Goed: subtiel groen vinkje, bevestigend
Waarschuwing: element schudt licht + suggestie slide-in
Blokkade: control is simpelweg niet beschikbaar (bijv. 4e kleur, vrije font-size)

9. Data Flow

Van wizard naar builder

Onboarding Wizard
  Stap 1-7 (data lokaal opgeslagen in localStorage)
        │
        ▼
  Wizard voltooid → POST /api/onboarding/complete
  Body: Brand JSON + upload references
        │
        ▼
  API:
  1. brand_profiles aanmaken (Brand JSON opslaan)
  2. Uploads verifiëren (R2 URLs)
  3. Site aanmaken met basis-instellingen
  4. Redirect naar dashboard
        │
        ▼
  Dashboard:
  1. Styling Builder opent automatisch bij eerste bezoek
  2. Brand JSON → sfeer-preset + wizard-overrides laden
  3. Gebruiker past aan → slaat op als design tokens
        │
        ▼
  Design Tokens (levende laag)
        │
        ├── Pagebuilder leest tokens live
        ├── Blocks erven styling automatisch
        ├── Publieke site rendert met tokens als CSS variables
        └── Export beschikbaar (CSS, Tailwind, W3C JSON)

Wizard overslaan

Als een gebruiker de wizard skipt of een site aanmaakt zonder wizard:

Dashboard opent met lege Styling Builder
Gebruiker kiest een sfeer-preset of begint leeg
Alle controls zijn beschikbaar, maar zonder brand context
Brand JSON wordt later aangevuld wanneer de gebruiker data invult

Bewerken na eerste setup

De Styling Builder is altijd bereikbaar via het dashboard. Wijzigingen worden direct doorgevoerd in de design tokens. Er is geen “publish” stap voor tokens — ze zijn altijd live op de draft site. Pas bij site-publicatie worden tokens definitief.

10. Bouwvolgorde

Fase 1: Wizard

Wizard UI (stappen 1–7, progressie-indicator, validatie)
Branche/sub-niche taxonomie
Tone of voice sliders met live voorbeeldtekst
Sfeer-preset selectie UI
Client-side opslag (localStorage)
File uploads naar R2 (logo, teksten, media)

Fase 2: Brand JSON & API

Brand JSON schema (Zod validatie)
API endpoint: POST /api/onboarding/complete
brand_profiles tabel + migratie
Upload verificatie en media library sync

Fase 3: Styling Builder — Basis

Split layout: sidebar + live canvas
Sfeer-preset selectie + laden
Kleuren tab (color picker, shade preview, semantic mapping)
OKLCH shade generator via culori
Contrast check (WCAG AA real-time)

Fase 4: Styling Builder — Typografie & Elementen

Font-combinatie picker (12 presets, visueel)
Individuele font selectie (heading, body, mono)
Radius, spacing, shadow preset selectors
Canvas light/dark/mobile toggle
Per-element preset overrides

Fase 5: Guardrails & Export

Guardrail engine (contrast, harmonie, font-paar)
Guardrail feedback UI (checkmarks, suggesties)
Token opslag (brand_profiles.design_tokens)
CSS, Tailwind v4 en W3C JSON export
Publieke token API endpoint

11. Toekomstige Uitbreidingen

De volgende features zijn bewust uitgesteld:

Feature	Reden	Wanneer
AI verfijning (chat na wizard)	Focus eerst op goede wizard	v2
Site import (URL → kleuren/fonts extraheren)	Complex (scraping, AI)	v2
Guild taxonomy	Sfeer-presets zijn proto-guilds	Wanneer guilds gelanceerd worden
Seasonal overrides	Afhankelijk van volwassen token systeem	Na v1 Styling Builder
Token versioning (named snapshots)	Nice to have, niet essentieel	v2
Brand health score	Afhankelijk van token-gebruik tracking	v2
Per-element states (hover, focus, disabled)	Automatisch afgeleid in v1	Later als “Geavanceerd”