Klant
Garenwinkel en haak- en breiatelier in Waarland, met een webshop.
Belofte en karakter
Uit de merkgids van Bij Tante Roos, versie 0.1.
- Belofte
- Alles om iets moois te maken, met het advies van iemand die zelf haakt en breit.
- Karakter
- Warm en vakkundig, zonder franje. Het logo is een etiket: ovaal, kapitalen, een gouden lijn.
Kleuren
Merkkleuren
- Primair#25362a
- Primair licht#d0a565
- Primair donker#1b2720
- Zacht#feecd3
- Accent#c3934b
- Secundair#1b2720
Neutralen
- Achtergrond#f9f5f0
- Vlak#ffffff
- Lijn#e3d9c9
- Grijs licht#f2ebe0
- Grijs midden#8a8177
- Grijs donker#6a6459
- Tekst secundair#55605a
- Tekst#25362a
Neutrale schaal 50–950
- 50#F9F5F0
- 100#F2EBE0
- 200#E3D9C9
- 300#d8d3ce
- 400#a9a49d
- 500#7f7972
- 600#625d56
- 700#49443e
- 800#2f2b25
- 900#1b1813
- 950#100d09
Status
- Succes#2f6f4f
- Waarschuwing#9c6304
- Fout#b3261e
- Info#25362a
Contrast
| Combinatie | Voorbeeld | Ratio | WCAG |
|---|---|---|---|
| Wit op primair | Aa | 12,81:1 | AAA |
| Primair op achtergrond | Aa | 11,80:1 | AAA |
| Knoptekst op primair (zoals getoond) | Aa | 11,80:1 | AAA |
| Tekst op achtergrond | Aa | 11,80:1 | AAA |
AA = minstens 4,5:1 voor tekst; AA groot = 3:1, genoeg voor koppen vanaf 24 px en voor interface-onderdelen.
Letters
Bij Tante Roos: 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 Bij Tante Roos: kleuren, letters, afrondingen en schaduwen.
Nieuw
Welkom bij Bij Tante Roos
Zo zien een kop, lopende tekst en knoppen eruit in dit merk.
PrimairSecundairGhostKaart
Een 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": "Bij Tante Roos",
"schemaVersion": 1
}
},
"color": {
"accent": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.7647,
0.5765,
0.2941
],
"hex": "#c3934b"
}
},
"ink": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.1451,
0.2118,
0.1647
],
"hex": "#25362a"
}
},
"neutral": {
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.9765,
0.9608,
0.9412
],
"hex": "#f9f5f0"
}
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.949,
0.9216,
0.8784
],
"hex": "#f2ebe0"
}
},
"200": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.8902,
0.851,
0.7882
],
"hex": "#e3d9c9"
}
},
"300": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.8471,
0.8275,
0.8078
],
"hex": "#d8d3ce"
}
},
"400": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.6627,
0.6431,
0.6157
],
"hex": "#a9a49d"
}
},
"500": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.498,
0.4745,
0.4471
],
"hex": "#7f7972"
}
},
"600": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.3843,
0.3647,
0.3373
],
"hex": "#625d56"
}
},
"700": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.2863,
0.2667,
0.2431
],
"hex": "#49443e"
}
},
"800": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.1843,
0.1686,
0.1451
],
"hex": "#2f2b25"
}
},
"900": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.1059,
0.0941,
0.0745
],
"hex": "#1b1813"
}
},
"950": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0627,
0.051,
0.0353
],
"hex": "#100d09"
}
}
},
"primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.1451,
0.2118,
0.1647
],
"hex": "#25362a"
}
},
"secondary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.1059,
0.1529,
0.1255
],
"hex": "#1b2720"
}
},
"status": {
"error": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.702,
0.149,
0.1176
],
"hex": "#b3261e"
}
},
"info": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.1451,
0.2118,
0.1647
],
"hex": "#25362a"
}
},
"success": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.1843,
0.4353,
0.3098
],
"hex": "#2f6f4f"
}
},
"warning": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.6118,
0.3882,
0.0157
],
"hex": "#9c6304"
}
}
}
},
"font": {
"family": {
"body": {
"$type": "fontFamily",
"$value": [
"Work Sans",
"system-ui",
"sans-serif"
]
},
"heading": {
"$type": "fontFamily",
"$value": [
"Lora",
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"JetBrains Mono",
"Courier New",
"monospace"
]
}
},
"size": {
"base": {
"$type": "dimension",
"$value": {
"unit": "px",
"value": 14
}
}
},
"weight": {
"body": {
"400": {
"$type": "fontWeight",
"$value": 400
},
"500": {
"$type": "fontWeight",
"$value": 500
},
"600": {
"$type": "fontWeight",
"$value": 600
}
},
"heading": {
"400": {
"$type": "fontWeight",
"$value": 400
},
"600": {
"$type": "fontWeight",
"$value": 600
},
"700": {
"$type": "fontWeight",
"$value": 700
}
}
}
}
}
CSS
:root {
--brand-color-accent: #c3934b;
--brand-color-ink: #25362a;
--brand-color-neutral-50: #f9f5f0;
--brand-color-neutral-100: #f2ebe0;
--brand-color-neutral-200: #e3d9c9;
--brand-color-neutral-300: #d8d3ce;
--brand-color-neutral-400: #a9a49d;
--brand-color-neutral-500: #7f7972;
--brand-color-neutral-600: #625d56;
--brand-color-neutral-700: #49443e;
--brand-color-neutral-800: #2f2b25;
--brand-color-neutral-900: #1b1813;
--brand-color-neutral-950: #100d09;
--brand-color-primary: #25362a;
--brand-color-secondary: #1b2720;
--brand-color-status-error: #b3261e;
--brand-color-status-info: #25362a;
--brand-color-status-success: #2f6f4f;
--brand-color-status-warning: #9c6304;
--brand-font-family-body: Work Sans, system-ui, sans-serif;
--brand-font-family-heading: Lora, Georgia, serif;
--brand-font-family-mono: 'JetBrains Mono', 'Courier New', monospace;
--brand-font-size-base: 14px;
--brand-font-weight-body-400: 400;
--brand-font-weight-body-500: 500;
--brand-font-weight-body-600: 600;
--brand-font-weight-heading-400: 400;
--brand-font-weight-heading-600: 600;
--brand-font-weight-heading-700: 700;
}