Brand & Style Guide

Hyva Webshop

Vendic B.V. Mei 2026 Magento 2 / Hyva Theme Tailwind CSS v4

Sectie 01

Kleuren

Kleurenpalet gebaseerd op de Foreco huisstijl, vertaald naar Hyva CSS custom properties en Tailwind v4 design tokens.

Primaire kleuren

Primary

#008249

CTA's, links, accenten

--color-primary

Primary Darker

#00323f

Koppen, logo, standaard buttons

--color-primary-darker

Secondary

#008238

Secundaire accenten

--color-secondary

Secondary Lighter

#00c55b

Highlights, badges

--color-secondary-lighter

Secondary Darker

#01542a

Donkere varianten

--color-secondary-darker

On Primary

#FFFFFF

Tekst op primary kleuren

--color-on-primary

Tekst & achtergrond

Foreground

#00323f (75%)

Lopende tekst

--color-fg

FG Secondary

#4a5565

Labels, onderschriften

--color-fg-secondary

Background

#FFFFFF

Pagina-achtergrond

--color-bg

Surface

#FFFFFF

Cards, panels

--color-surface

Container

#f9fafb

Lichtgrijze secties

--color-container

Container Darker

#f3f4f6

Diepere containers

--color-container-darker

Borders & dividers

Gray 200

#e5e7eb

Lichte borders

--color-gray-200

Gray 300

#d1d5dc

Standaard borders, card randen

--color-gray-300

Gray 400

#99a1af

Placeholder tekst

--color-gray-400

Gray 500

#6a7282

Disabled tekst

--color-gray-500

Statuskleuren

Success

#00a63e

Succes, bevestigingen, USP vinkjes

--color-green-600

Error

#fb2c36

Foutmeldingen, validatie

--color-red-500

Warning

#f0b100

Waarschuwingen, aandachtspunten

--color-yellow-500

Info

#2b7fff

Informatieve meldingen

--color-blue-500

Sectie 02

Typografie

Foreco gebruikt Skolar Sans als primair lettertype, met system font fallbacks voor optimale laadtijden.

Primair lettertype

Skolar Sans

Skolar Sans Bold

font-family: "Skolar Sans", "Ubuntu", "Arial", "Helvetica", ui-sans-serif, system-ui, sans-serif
Formaten: WOFF2 (Regular, Bold)

Gewichten

Aa

Light

300

Aa

Normal

400

Aa

Medium

500

Aa

Semibold

600

Aa

Bold

700

Typeschaal

H1 Hero text-5xl · 3rem (48px) · Bold 700

Foreco Houtproducten

H2 Sectie text-3xl · 1.875rem (30px) · Bold 700

Duurzaam hout voor elk project

H3 Subsectie text-2xl · 1.5rem (24px) · Semibold 600

Tuinhout, hekwerken & meer

H4 Card titel text-lg · 1.125rem (18px) · Semibold 600

Geimpregneerd grenenhout

Body text-base · 1rem (16px) · Normal 400

Foreco Houtproducten levert duurzaam hout voor tuin, bouw en landschap. Van tuinschermen tot boomstammen, van speeltoestellen tot bruggen. Met meer dan 60 jaar ervaring zijn wij uw specialist in houtproducten.

Small text-sm · 0.875rem (14px) · Normal 400

Gratis verzending vanaf €150 · Binnen 1 werkdag verzonden · 14 dagen retourrecht

Label / Overline text-xs · 0.75rem (12px) · Semibold 600 · Uppercase

Categorie · Nieuw · Uitverkoop

Kopkleur

Alle koppen gebruiken --color-primary-darker

#00323f — donker blauw-groen, gelijk aan de logokleur

Sectie 03

Buttons

Button-systeem op basis van Hyva's .btn klassen, met Foreco-specifieke kleurtokens en een custom pijl-icoon voor primary buttons.

Varianten

Achtergrond: #00323f

Border: #00323f

Tekst: #FFFFFF

Hover BG: #008249

Achtergrond: transparent

Border: #008249 50%

Tekst: #008249

Hover BG: radial grad.

Icoon: pijl rechts

Achtergrond: #008249

Border: #008249

Tekst: #FFFFFF

Hover BG: #00323f

Achtergrond: #FFFFFF

Border: #e5e7eb

Tekst: #00323f

Hover Border: #d1d5dc

Button specificaties

Eigenschap	Waarde	CSS
Border radius	4px	`var(--radius-sm)` = `0.25rem`
Border breedte	2px solid	`border-width: 2px`
Font weight	Bold	`font-weight: 700`
Text transform	HOOFDLETTERS	`text-transform: uppercase`
Padding	8px 18px	`0.5rem 1.125rem`
Display	Inline flex	`inline-flex; align-items: center; gap: 0.625rem`
Icoon (primary)	Pijl rechts	`::after` met SVG mask-image
Hover effect	Schaduw	`box-shadow: 0 10px 25px rgba(0,0,1,0.25)`
Transitie	Kleur, achtergrond, border	`transition: color, background-color, border-color`

Button maten

.btn-size-sm
8px 8px · text-sm

.btn
8px 18px · text-base

.btn-size-lg
16px 40px · text-lg

Sectie 04

Spacing & Radius

Tailwind v4 spacing schaal (basis: 0.25rem = 4px) en border-radius tokens.

Spacing schaal

1 (4px)

2 (8px)

3 (12px)

4 (16px)

6 (24px)

8 (32px)

10 (40px)

12 (48px)

16 (64px)

Border radius

--radius-xs

0.125rem (2px)

--radius-sm

0.25rem (4px)

--radius-md

0.375rem (6px)

--radius-lg

0.5rem (8px)

--radius-2xl

1rem (16px)

--radius-3xl

1.5rem (24px)

Formuliervelden

Eigenschap	Waarde	Token
Achtergrond	#FFFFFF	`--color-white`
Border kleur	#90a1b9	`--color-slate-400`
Actieve kleur	#008249	`--color-primary`
Padding verticaal	8px	`spacing * 2`
Padding horizontaal	12px	`spacing * 3`