Kun je onderstaande gebruiken voor deze landingspagina:
Lettertypes (Google Fonts)
| Gebruik | Lettertype | Toepassing |
|---|---|---|
| Body / UI | Inter | Broodtekst, labels, knoppen, navigatie |
| Koppen / Display | Playfair Display | H1, H2, decoratieve titels |
Kleurpalet — Stone
| Token | Hex | Gebruik |
|---|---|---|
| 50 | #fafaf9 | Pagina-achtergrond |
| 100 | #f5f5f4 | Kaart-achtergronden, secondary |
| 200 | #e7e5e4 | Borders, dividers |
| 300 | #d6d3d1 | Subtiele borders |
| 400 | #a8a29e | Placeholder-tekst, iconen |
| 500 | #78716c | Accent / CTA-kleur (knoppen, links, highlights) |
| 600 | #57534e | Hover-staat knoppen |
| 700 | #44403c | Primary (dark buttons, headings) |
| 800 | #292524 | Donkere kaarten / hero-achtergrond |
| 900 | #1c1917 | Bijna-zwart tekst, dark sections |
| 950 | #0c0a09 | Diepste zwart |
Afgeronde hoeken
0.625rem (10px)0.375rem (6px)0.875rem (14px)Samenvatting voor gebruik:
#fafaf9 (licht) of #1c1917 (donker)#1c1917#78716c#e7e5e4#78716c (hover: #57534e)#292524 of #1c1917 als achtergrond met #fafaf9 tekstNu lees ik alle componenten parallel om te zien waar font-sans, font-serif of heading-stijlen worden gebruikt:
Ik heb nu een volledig beeld van alle bestanden. Ik doe twee dingen: (1) globals.css + layout.tsx updaten met Inter + Playfair Display en het Stone-palet, en (2) alle headings in de componenten voorzien van font-serif zodat Playfair Display correct wordt toegepast.
Nu update ik layout.tsx met Inter + Playfair Display:
Nu voeg ik font-serif toe aan alle H1/H2 koppen in de componenten:
Alle wijzigingen zijn doorgevoerd. In globals.css zijn Inter (--font-sans) en Playfair Display (--font-serif) geconfigureerd, het volledige Stone-kleurpalet is ingesteld als design tokens en de radius-waarden zijn aangepast naar 6/10/14px. In layout.tsx zijn de fontimports vervangen, en alle H1/H2-koppen in de componenten hebben nu font-serif zodat Playfair Display correct wordt toegepast op alle displaytitels.
Kun je onderstaande gebruiken voor deze landingspagina:
Lettertypes (Google Fonts)
| Gebruik | Lettertype | Toepassing |
|---|---|---|
| Body / UI | Inter | Broodtekst, labels, knoppen, navigatie |
| Koppen / Display | Playfair Display | H1, H2, decoratieve titels |
Kleurpalet — Stone
| Token | Hex | Gebruik |
|---|---|---|
| 50 | #fafaf9 | Pagina-achtergrond |
| 100 | #f5f5f4 | Kaart-achtergronden, secondary |
| 200 | #e7e5e4 | Borders, dividers |
| 300 | #d6d3d1 | Subtiele borders |
| 400 | #a8a29e | Placeholder-tekst, iconen |
| 500 | #78716c | Accent / CTA-kleur (knoppen, links, highlights) |
| 600 | #57534e | Hover-staat knoppen |
| 700 | #44403c | Primary (dark buttons, headings) |
| 800 | #292524 | Donkere kaarten / hero-achtergrond |
| 900 | #1c1917 | Bijna-zwart tekst, dark sections |
| 950 | #0c0a09 | Diepste zwart |
Afgeronde hoeken
0.625rem (10px)0.375rem (6px)0.875rem (14px)Samenvatting voor gebruik:
#fafaf9 (licht) of #1c1917 (donker)#1c1917#78716c#e7e5e4#78716c (hover: #57534e)#292524 of #1c1917 als achtergrond met #fafaf9 tekstGoed nieuws — de fonts en het Stone-kleurpalet zijn al gedefinieerd in globals.css en layout.tsx. Nu lees ik alle component-bestanden om te zien waar kleuren en typografie nog niet correct worden toegepast.
Alles is duidelijk. De fonts en het Stone-kleurpalet staan al correct in globals.css en layout.tsx. Ik zie echter dat in de componenten nog een aantal dingen verbeterd moeten worden om het design-systeem volledig toe te passen: font-serif moet op H1/H2 koppen, emojis moeten weg (vervangen door echte SVG-iconen), de dark-section Hero en CTA moeten de Stone 800/900 achtergronden gebruiken, en borders/radius-waarden moeten het Stone-palet volgen.
Alle 9 componenten zijn bijgewerkt met het volledige Stone-palet en de twee lettertypes. De belangrijkste wijzigingen:
font-serif (Playfair Display) consequent toegepast op alle H1/H2-koppen, font-sans (Inter) voor body en UI-elementen.--studio-scale-*) worden nu overal gebruikt — lichte secties op 50/100, donkere secties (Hero, CTA, Footer) op 900/950 met 50-tekst.--radius-sm, --radius-md en --radius-lg consequent toegepast; borders gebruiken scale-200 of scale-700 afhankelijk van de achtergrond.