Intern — niet klantzichtbaar
Style guide
Elke token uit design_handoff_tinemode/README.md, vertaald naar
src/css/app.css. Referentie tijdens fase 4 (componenten) —
niet gekoppeld aan het menu.
Kleuren
--ink
--ink-soft
--body
--muted
--muted-2
--meta
--meta-2
--accent
--accent-soft
--paper
--paper-2
--paper-3
--line
--line-2
--line-3
--line-4
--line-5
--desk
--on-dark
--on-dark-soft
--on-dark-muted
Typografie
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Tine Mode — Vorden
Knoppen
Component-classes in app.css (@layer components) — hover eroverheen om het overgangseffect te zien.
.btn-primary-dark
Bekijk de collectie.btn-secondary-solid
Route naar de winkel.btn-secondary-photo (op een foto/hero-overlay)
Plan je bezoek.btn-primary-photo
Nu in de winkelFormulier-elementen
Sectiekop
template-parts/components/section-heading.php — drie varianten uit de homepage.
Een selectie uit de collectie
Onze merken
Bijzondere, kwalitatieve labels — voor verschillende leeftijden en elk moment van de dag.
Volg Tine Mode op Instagram
@tinemodePaginakop
template-parts/components/page-header.php — 'stack' (winkel/contact) en 'split' (merken).
Nu in de winkel
Een greep uit wat er op dit moment hangt. Online alleen ter inspiratie — passen en kopen doe je in de winkel, of via de webshop.
Merken met karakter
We zijn voortdurend op zoek naar de nieuwste trends op het gebied van fashion en accessoires.
Productkaart
template-parts/components/product-card.php — context 'home' (selectie) vs 'archief' (winkelpagina). Toont het eerste gevonden product.
Spacing — sectieritmiek
Verticale sectiepadding uit de README, als schaal (--spacing-section-*).
Losse eenmalige maten (rastergaps, hero-hoogte e.d.) staan bewust niet
hier — zie de toelichting in app.css.