Full Palette Overview
Crème
#eee8e3
Caramel
#a17655
Chocolate
#4a2b16
Mauve
#a78697
Mauve Vivid ✦ CTA
#8c5f7a
Cream & Caramel Scale
Cream
50#faf7f5
100 ★#eee8e3
200#ddd3ca
300#ccbeb0
400#baaa99
500#a89682
600#96836e
Caramel → Chocolate
200#e0cbb8
300#c9a685
400#b58d6b
500 ★#a17655
600#84603f
700#654830
800 ★#4a2b16
900#3a200f
Mauve & Chocolate Scale
100#ede5ea
200#d8c5cf
300#c4aab9
500 ★#a78697
600#89697b
Vivid ✦#8c5f7a
700#6c4f60
CTA-700#4e3445
✦ Vivid variant — meer chroma, geschikt voor CTA-knoppen op crème achtergrond
Semantic Tokens
Backgrounds
bg-page
--background
bg-surface
white
bg-muted
--muted
bg-accent
--accent
Text
text-primary
--foreground
text-secondary
--secondary-foreground
text-muted
--muted-foreground
text-accent
--accent
Borders & Interactive
border-light
--cream-200
border-default
--border
primary
--primary
cta
--cta
Typography Specimen
De bevalling van jullie kindje
verbindt jullie nóg meer.
Geboortecursus
Voorbereiding op jullie bevalling
Daniëlle begeleidt aanstaande ouders met warmte en kennis, zodat jullie je bevalling bewust en zelfverzekerd tegemoet kunnen gaan.
Cursus · 6 weken · Online & locatie Friesland
✳ Bijzonderbegin · @bijzonderbegin
Type Scale
6xl / 60pxDisplay XL
5xl / 48pxDisplay
4xl / 36pxHeading 1
3xl / 30pxHeading 2
2xl / 24pxHeading 3
xl / 20pxHeading 4
base / 16pxBody — DM Sans regular, lijnhoogte 1.7
sm / 14pxBody small — secundaire tekst
xs / 12pxEYEBROW LABEL
Lettertypes
Libre Baskerville
--font-display · Display & headings
DM Sans
--font-body · Body & UI
Spacing Scale (4px base)
--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-8
--space-10
--space-12
--space-16
Border Radius
6px
sm
10px
md
16px
lg
9999px
full
Box Shadows
sm
0 1px 3px rgba(foreground,.08)
md
0 4px 12px rgba(foreground,.10)
lg
0 8px 24px rgba(foreground,.12)
Motion Tokens
Duration
--duration-instant100ms
--duration-fast150ms
--duration-default200ms
--duration-gentle300ms
--duration-slow400ms
--duration-deliberate600ms
Easing
--ease-outcubic-bezier(.4,0,.2,1)
--ease-incubic-bezier(.4,0,1,1)
--ease-gentlecubic-bezier(.25,.46,.45,.94)
--ease-springcubic-bezier(.34,1.56,.64,1)
--ease-softcubic-bezier(.16,1,.3,1)
Buttons
Varianten
Maten
Disabled
Form Inputs
Optioneel veld
Dit veld is verplicht
Navigation
Cards
✳
Cursus
Geboortecursus
Voorbereiding op jullie bevalling met warmte en kennis.
Aanbieding
Vroegboek
Schrijf je in vóór 1 mei en ontvang 10% korting.
Blog
Wat te verwachten
Een eerlijk verhaal over de eerste weken na de bevalling.
Badges & Tags
Standaard Mauve Vivid CTA Caramel Chocolate Outline
✳ Geboortecursus Online Friesland Nieuw
Hero Opties
✳ Geboortecursus
De bevalling van jullie kindje
verbindt jullie nóg meer.
Bewust en zelfverzekerd je bevalling tegemoet gaan, samen.
✳ Geboortecursus
De bevalling van jullie kindje
verbindt jullie nóg meer.
Asterisk Motief
✳
Mauve
48px
48px
✳
Chocolate
32px
32px
✳
Accent
20px
20px
✳
Vivid
14px
14px
✳
Op donker
✳
Op mauve
✳ = Unicode U+2733 — geen SVG nodig voor kleine groottes. Gebruik als ornament op kaarten, sectiekoppen, en logo.
Brand Voice
Toon & Stem
WEL
Warm & persoonlijk
Informeel (jij/je)
Validerend
Inclusief voor partners
Emotioneel resonant
Informeel (jij/je)
Validerend
Inclusief voor partners
Emotioneel resonant
NIET
Klinisch of formeel
Formeel "u"
ALL CAPS koppen
Koude tonen
Drukke patronen
Formeel "u"
ALL CAPS koppen
Koude tonen
Drukke patronen
Fotografie Stijl
Gouden-uur toon Zachte schaduwen Intieme momenten Koppels & moeders Lage verzadiging Warme highlights
Nooit koud, klinisch of hoog-contrast. Altijd warm, naturel licht.