Clean, zakelijk, neutraal
Index / 001Project dashboard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
HeadingInter
BodyInter
Studio CMS stijlgids
Lettertypes en iconen
Een praktisch overzicht van de typografie-combinaties en de beschikbare iconen die nu in Studio CMS zitten.
Font-combinaties
Elke combinatie toont de CMS-key, heading-font, body-font en een korte tekstsample.
Premium, redactioneel, rustig
Index / 001Project dashboard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
HeadingPlayfair Display
BodyInter
Expressief, eigentijds, energiek
Index / 001Project dashboard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
HeadingSyne
BodyDM Sans
LabelsSyne
Warm, persoonlijk, toegankelijk
Index / 001Project dashboard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
HeadingDM Serif Display
BodyDM Sans
Sterk, compact, horeca/editorial
Index / 001Project dashboard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
HeadingOswald
BodyInter
LabelsOswald
Zacht, rond, ingetogen
Index / 001Project dashboard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
HeadingMulish
BodyInter
LabelsMulish
Karaktervol, energiek, broadcast/technisch
Index / 001Project dashboard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
HeadingBricolage Grotesque
BodyGeist
LabelsSpace Mono
Standaard teksthiërarchie
Deze schaal gebruikt de actieve Studio CMS CSS-variabelen: `--font-heading`, `--font-body` en `--font-label` (voor eyebrows, tags en meta; standaard gelijk aan de body, bij het editorial-thema → Space Mono).
H1
Een heldere eerste indruk
H2
Sectietitel met duidelijke richting
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum.
Small
Kleine tekst voor metadata, labels, toelichting en ondersteunende details.
Label
Eyebrow · Tag · Meta
Motion, radius en schaduw
Deze waarden komen uit de huidige core tokens en de profielmapping in `BaseLayout.astro`.
Motion tokens
- Snel
--duration-fast0.15s - Basis
--duration-base0.25s - Traag
--duration-slow0.5s - Ease out
--ease-outcubic-bezier(0.22, 1, 0.36, 1) - Ease in-out
--ease-in-outcubic-bezier(0.65, 0, 0.35, 1) - Spring
--ease-springcubic-bezier(0.34, 1.56, 0.64, 1)
Radius-profielen
Scherp
2px · 4px · 6px · 8px sharp Standaard
4px · 8px · 12px · 16px default Rond
8px · 16px · 24px · 32px rounded Pill
100px · 100px · 100px · 100px pill Shadow-profielen
Geen
none · none · none none Zacht
0 1px 3px rgba(0,0,0,.08) · 0 4px 12px rgba(0,0,0,.08) · 0 8px 24px rgba(0,0,0,.08) soft Medium
0 1px 3px rgba(0,0,0,.12) · 0 4px 16px rgba(0,0,0,.12) · 0 8px 32px rgba(0,0,0,.14) medium Sterk
0 2px 6px rgba(0,0,0,.16) · 0 6px 20px rgba(0,0,0,.18) · 0 12px 40px rgba(0,0,0,.20) strong Alle beschikbare iconen
Dit zijn alle vaste SVG-iconen die nu in `Icon.astro` beschikbaar zijn. De bronset is Lucide Icons; nieuwe iconen voeg je toe door de Lucide-path in `Icon.astro` op te nemen.
Contact en locatie
Beschikbaar voor contactgegevens, topbars, footers, kaarten en locatieblokken.
-
mail -
phone -
map-pin -
clock -
home -
globe
Acties en navigatie
Beschikbaar voor knoppen, links, dropdowns, statuspunten en navigatiepatronen.
-
arrow-right -
external-link -
check -
chevron-right -
chevron-down -
star
Content en diensten
Beschikbaar voor servicekaarten, feature cards, navigation demos en contentoverzichten.
-
layout -
code -
trending-up -
pen-tool -
users -
user -
briefcase -
file-text
Techniek en vertrouwen
Beschikbaar voor technische features, performance, beveiliging en productvoordelen.
-
zap -
shield -
monitor
Social
Beschikbaar voor teamprofielen, footers en social link lists.
-
linkedin -
instagram -
facebook -
twitter -
youtube
Iconen voor contentsecties
Dit is de actuele contentcatalogus uit `studio/icons/catalog.ts`. Editors kiezen deze iconen via de icon-picker in Services, Columns, Stats, Process en About highlights.
Algemeen
- Vinkje
check - Vinkje in cirkel
circle-check - Keurmerk
badge-check - Ster
star - Hart
heart - Sterretjes
sparkles - Onderscheiding
award - Trofee
trophy - Duim omhoog
thumbs-up - Doel
target - Gloeilamp
lightbulb - Informatie
info - Min in cirkel
circle-minus
Snelheid & groei
- Bliksem
zap - Raket
rocket - Stijgende lijn
trending-up - Staafdiagram
chart-bar - Lijndiagram
chart-line - Activiteit
activity
Vertrouwen & beveiliging
- Schild
shield - Schild met vinkje
shield-check - Slot
lock - Sleutel
key
Communicatie
- Chatbericht
message-circle - E-mail
mail - Telefoon
phone - Koptelefoon
headphones - Bel
bell - Megafoon
megaphone
Mensen
- Meerdere personen
users - Persoon
user - Handdruk
handshake - Diploma
graduation-cap
Web & techniek
- Wereldbol
globe - Wifi
wifi - Instellingen
settings - Moersleutel
wrench - Hamer
hammer - Vernieuwen
refresh-cw - Zoeken
search - Puzzelstuk
puzzle - Stekker
plug - Wisselen
shuffle
Tijd & locatie
- Klok
clock - Kalender
calendar - Locatiespeld
map-pin - Kaart
map - Navigatie
navigation
Geld & verkoop
- Bankbiljet
banknote - Portemonnee
wallet - Betaalkaart
credit-card - Procent
percent - Prijskaartje
tag - Cadeau
gift - Winkelwagen
shopping-cart - Boodschappentas
shopping-bag - Winkel
store - Pakket
package - Vrachtwagen
truck
Design & media
- Kleurenpalet
palette - Potlood
pencil - Camera
camera - Afbeelding
image - Video
video - Muziek
music
Documenten
- Document
file-text - Map
folder - Boek
book - Open boek
book-open
Zakelijk
- Koffer
briefcase - Gebouw
building - Bedrijfspand
building-2 - Huis
house
Branche
- Bestek
utensils - Koksmuts
chef-hat - Koffie
coffee - Blad
leaf - Recyclen
recycle - Zon
sun - Plantje
sprout - Schaar
scissors - Halter
dumbbell - Stethoscoop
stethoscope
Klaar om te starten met Studio?
Kies je secties, stel je stijl in en ontvang aanvragen in je eigen CMS. We denken graag mee over de juiste opzet.