🔷 Logo varianten
Staand en horizontaal op donkerblauw, wit en lichtgrijs. Asset: /assets/images/logo-itlive-kubus-hart.svg
🎨 Kleurensysteem
Navy (950–600), Gold (400–700), status en neutrals.
🚦 Status — wanneer wat?
Groen = succes/actief. Oranje = waarschuwing/actie. Rood = fout/kritiek. Blauw = info.
- Formulier verzonden
- Betaling geslaagd
- Actief / Online
- Actie vereist
- Vervalt binnenkort
- In behandeling
- Betaling mislukt
- Geblokkeerd
- Verwijderen
- Tip / uitleg
- In verwerking
- Badge Nieuw
🔤 Typografie
Montserrat (display), DM Sans (body). Max 2 fonts.
🔘 Knoppen
Gold filled (CTA), gold outline, navy ghost, status-knoppen.
🗂️ Iconen per categorie
Emoji-mapping: AI 🤖, Web 🌐, Marketing 📈, Design 🎨, IT ⚙️, Hosting 🖥️, Support 🎧, Sales 🚀, Overig ◎.
⚙️ Design tokens
Zie design/itlive-design-tokens.json en docs/ITLIVE_STYLE_BLUEPRINT.md.
:root {
--navy-950: #020917; --navy-800: #0C1B38;
--gold-500: #F2C14F; --gold-600: #C8922A;
--cyan-500: #00C8FF;
--success: #10B981; --warning: #F59E0B; --error: #EF4444; --info: #3B82F6;
--font-display: 'Montserrat', sans-serif;
--font-body: 'DM Sans', sans-serif;
--radius-md: 8px; --radius-pill: 999px;
}
✅ Do's & Don'ts
- Montserrat 900 voor H1/H2
- CTA = goud gradient
- Logo altijd kubus + tekst
- Navy nav/footer
- Goud max 10%
- Backdrop-blur op cards
- Nooit rood voor CTA
- Nooit alleen hart zonder kubus
- Max 2 fonts
- Nooit goud als volledige achtergrond
- Logo niet vervormen
🏗️ BouwPro Nederland Brand
Professioneel bouwbedrijf met moderne, betrouwbare uitstraling.
Primary Blue
#2563eb
Hoofdkleur voor knoppen en accenten
Success Green
#16a34a
Positieve acties en garanties
Accent Purple
#7c3aed
Speciale diensten en features
Typografie
Headings: Inter, system-ui
Body: -apple-system, BlinkMacSystemFont
Weights: 400, 500, 600, 700, 800
Tonen
Professioneel: Zelfverzekerd, betrouwbaar
Modern: Innovatief, vooruitstrevend
Duurzaam: Milieubewust, verantwoordelijk
NEDERLAND
- Blauw als primaire kleur
- Groen voor successtatus
- Purple voor accenten
- Professionele foto's gebruiken
- Duidelijke call-to-actions
- Responsief design
- Geen felle kleuren
- Niet te veel animaties
- Geen stock foto's
- Niet te veel tekst
- Geen onleesbare lettertypes
- Niet mobiel onvriendelijk
🧩 Widgets & componenten
Voor het IT Live platform ontwikkelen we 90+ widgets (SBI Intelligence, Website Maker, Concurrentiekaart, etc.) en 200 componenten voor het design system – knoppen, cards, formulieren, badges, navigatie, alle in lijn met deze Brand Guide.
Analyzer, Concurrentiekaart, Website Maker, Offerte, Voorbeeld-websites, GMB Index, Marktprofiel, Mockup Generator, SiteChat, SBI Encyclopedie, API-overzichten, en alle SBI-tools op SBI Intelligence Platform.
Herbruikbare UI-componenten: knoppen, cards, badges, formulieren, tabellen, navigatie, modals, tooltips, loaders, en alle varianten volgens kleuren, typografie en tokens van deze guide.
🤖 AI system prompt
Plak in ChatGPT/Claude voor consistente ITLive-stijl.
ITLive huisstijl: Kleuren: #F2C14F (goud) accent, #020917–#0C1B38 (navy) bg. Tekst op donker: #FFF primair, #6B92B8 muted. Status: groen #10B981, oranje #F59E0B, rood #EF4444. Typo: Montserrat 700–900 koppen, DM Sans body. Max 2 fonts. Stijl: dark space, glassmorphism, radius 8–16px, gouden glow hover. Logo: altijd kubus icoon + "IT LIVE"; op donker wit+goud, op licht navy+donkergoud.
🏗️ BouwPro AI Prompt
Plak in ChatGPT/Claude voor consistente BouwPro-stijl.
BouwPro Nederland huisstijl: Kleuren: #2563eb (blauw) primary, #16a34a (groen) success, #7c3aed (paars) accent. Tekst op donker: #FFFFFF primair, #6B7280 muted. Status: groen #16a34a, blauw #2563eb, paars #7c3aed. Typo: Inter 700–900 koppen, system-ui body. Weights: 400, 500, 600, 700, 800. Stijl: professioneel, betrouwbaar, modern. Gradient overlays, radius 8-16px. Logo: gebouw icoon + "BOUWPRO NEDERLAND". Professionele foto's, geen stock. UI: TailwindCSS, glassmorphism, smooth animations. Mobiel-first design.