Design en implementeer frontend UI voor dit project. Volgt het Mariage Bruidsmode design system (kleuren, typografie, componenten). Gebruik bij het bouwen van nieuwe pagina's, componenten, of bij vragen over het visuele ontwerp.
Je werkt aan Mariage Bruidsmode — een luxe bruidswinkel website. Het design is elegant, verfijnd en bridal-georiënteerd. Alle teksten zijn in het Nederlands.
Definieerd in src/styles/global.css via Tailwind v4 @theme.
| Token | Gebruik |
|---|---|
ivory | Achtergronden, hero secties |
cream | Lichte achtergronden, kaarten |
blush | Accenten, hover states, subtiele highlights |
champagne | Warme achtergronden, borders |
linen | Neutrale achtergronden |
charcoal | Primaire tekst, donkere elementen |
taupe | Secondaire tekst, subtiele UI |
gold | Premium accenten, hover effecten, borders |
.font-display — Cormorant Garamond (titels, koppen).font-body — Jost (bodytekst, labels, knoppen).font-italic — Cormorant Infant (quotes, subtitels).btn-premium — donkere fill knop (primaire actie).btn-gold — gold outline knop (secundaire actie).btn-blush — blush fill knop (zachte actie).glass-card — verhoogde kaart met glasmorphism effect.ds-eyebrow — kleine bovenliggende label tekst (bv. "Collectie 2025").ds-quote — quote opmaak.hero-image — groot hero formaat.gallery-image — galerij formaat.featured-image — uitgelichte afbeeldingsrc/styles/global.csssrc/pages/trouwjurken/index.astro voor een collectiepagina).astro) voor statische/SSR structuur.tsx) alleen voor interactieve delensrc/layouts/Layout.astro wrapping alle publieke pagina'ssrc/pages/admin/sm, md, lg, xl<section class="py-20 bg-ivory">
<div class="max-w-6xl mx-auto px-6">
<p class="ds-eyebrow text-center mb-3">Eyebrow label</p>
<h2 class="font-display text-4xl text-charcoal text-center mb-12">Sectie Titel</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- kaarten -->
</div>
</div>
</section>