Bierfamilie.nl
Ons eigen bier: het merk achter de webshop bierfamilie.nl.
Kleuren
Merkkleuren
- Primair#5d8f54
- Primair licht#85b37d
- Primair donker#3e5f38
- Zacht#e2f5df
- Accent#6b003e
- Secundair#1a1a1a
Neutralen
- Achtergrond#f5f7fa
- Vlak#ffffff
- Lijn#e8ecf1
- Grijs licht#f1f4f8
- Grijs midden#94a3b8
- Grijs donker#64748b
- Tekst secundair#64748b
- Tekst#0a1628
Status
- Succes#00c853
- Waarschuwing#f59e0b
- Fout#ef4444
- Info#5d8f54
Contrast
| Combinatie | Voorbeeld | Ratio | WCAG |
|---|---|---|---|
| Wit op primair | Aa | 3,80:1 | AA groot |
| Primair op achtergrond | Aa | 3,54:1 | AA groot |
| Knoptekst op primair (zoals getoond) | Aa | 4,77:1 | AA |
| Tekst op achtergrond | Aa | 16,89:1 | AAA |
AA = minstens 4,5:1 voor tekst; AA groot = 3:1, genoeg voor koppen vanaf 24 px en voor interface-onderdelen. Wit op de primaire kleur haalt AA niet; knoppen in dit theme krijgen daarom donkere tekst.
Letters
Bierfamilie.nl: een merk dat overal hetzelfde klinkt
Lopende tekst leest rustig op elke schermbreedte. Cijfers als 1.290,00 en 24 % blijven goed leesbaar.
--brand-color-primary · 0123456789
Het theme in actie
Gerenderd met de themewaarden van Bierfamilie.nl: kleuren, letters, afrondingen en schaduwen.
Welkom bij Bierfamilie.nl
Zo zien een kop, lopende tekst en knoppen eruit in dit merk.
PrimairSecundairGhostEen kaart met schaduw
Vlak, lijn en schaduw komen uit het theme; de hoek is de grote afronding.
De knoppen hierboven zijn een voorbeeld en doen niets.
Tokens
Het merk als W3C Design Tokens (DTCG) en als CSS custom properties, uit dezelfde bron als hierboven.
DTCG-JSON
{
"$extensions": {
"com.yzr.brand": {
"name": "Bierfamilie.nl",
"schemaVersion": 1
}
},
"color": {
"primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.3647,
0.5608,
0.3294
],
"hex": "#5d8f54"
}
},
"secondary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.102,
0.102,
0.102
],
"hex": "#1a1a1a"
}
},
"status": {
"error": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.9373,
0.2667,
0.2667
],
"hex": "#ef4444"
}
},
"info": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.3647,
0.5608,
0.3294
],
"hex": "#5d8f54"
}
},
"success": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0,
0.7843,
0.3255
],
"hex": "#00c853"
}
},
"warning": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.9608,
0.6196,
0.0431
],
"hex": "#f59e0b"
}
}
}
},
"font": {
"family": {
"body": {
"$type": "fontFamily",
"$value": [
"Open Sans",
"system-ui",
"sans-serif"
]
},
"heading": {
"$type": "fontFamily",
"$value": [
"Merriweather",
"Georgia",
"serif"
]
}
}
}
}
CSS
:root {
--brand-color-primary: #5d8f54;
--brand-color-secondary: #1a1a1a;
--brand-color-status-error: #ef4444;
--brand-color-status-info: #5d8f54;
--brand-color-status-success: #00c853;
--brand-color-status-warning: #f59e0b;
--brand-font-family-body: Open Sans, system-ui, sans-serif;
--brand-font-family-heading: Merriweather, Georgia, serif;
}