Bouwen
Brandyzr
Eén levende merkbron voor je site, advertenties, teksten en vertalingen.
Belofte en karakter
Uit de merkgids van Brandyzr, versie 0.2.
- Belofte
- Je merk staat één keer vast en klopt overal waar het verschijnt.
- Karakter
- Precies, kleurrijk, systematisch. Brandyzr is het doek in inkt; elk merk brengt zijn eigen kleur mee.
Kleuren
Merkkleuren
- Primair#15191d
- Primair licht#282c30
- Primair donker#030507
- Zacht#ffebe7
- Accent#d5361b
- Secundair#15191d
Neutralen
- Achtergrond#f9fafc
- Vlak#ffffff
- Lijn#e3e6eb
- Grijs licht#f1f4f7
- Grijs midden#757b82
- Grijs donker#595e65
- Tekst secundair#595e65
- Tekst#15191d
Neutrale schaal 50–950
- 50#f9fafc
- 100#f1f4f7
- 200#e3e6eb
- 300#d0d5da
- 400#a0a5ac
- 500#757b82
- 600#595e65
- 700#41454c
- 800#282c31
- 900#15191d
- 950#0b0d11
Status
- Succes#02873d
- Waarschuwing#9e6b06
- Fout#d53d38
- Info#0377cd
Contrast
| Combinatie | Voorbeeld | Ratio | WCAG |
|---|---|---|---|
| Wit op primair | Aa | 17,67:1 | AAA |
| Primair op achtergrond | Aa | 16,92:1 | AAA |
| Knoptekst op primair (zoals getoond) | Aa | 17,67:1 | AAA |
| Tekst op achtergrond | Aa | 16,92:1 | AAA |
AA = minstens 4,5:1 voor tekst; AA groot = 3:1, genoeg voor koppen vanaf 24 px en voor interface-onderdelen.
Letters
Brandyzr: 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 Brandyzr: kleuren, letters, afrondingen en schaduwen.
Nieuw
Welkom bij Brandyzr
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": "Brandyzr",
"schemaVersion": 1
}
},
"color": {
"accent": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.8353,
0.2118,
0.1059
],
"hex": "#d5361b"
}
},
"ink": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0824,
0.098,
0.1137
],
"hex": "#15191d"
}
},
"neutral": {
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.9765,
0.9804,
0.9882
],
"hex": "#f9fafc"
}
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.9451,
0.9569,
0.9686
],
"hex": "#f1f4f7"
}
},
"200": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.8902,
0.902,
0.9216
],
"hex": "#e3e6eb"
}
},
"300": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.8157,
0.8353,
0.8549
],
"hex": "#d0d5da"
}
},
"400": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.6275,
0.6471,
0.6745
],
"hex": "#a0a5ac"
}
},
"500": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.4588,
0.4824,
0.5098
],
"hex": "#757b82"
}
},
"600": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.349,
0.3686,
0.3961
],
"hex": "#595e65"
}
},
"700": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.2549,
0.2706,
0.298
],
"hex": "#41454c"
}
},
"800": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.1569,
0.1725,
0.1922
],
"hex": "#282c31"
}
},
"900": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0824,
0.098,
0.1137
],
"hex": "#15191d"
}
},
"950": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0431,
0.051,
0.0667
],
"hex": "#0b0d11"
}
}
},
"primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0824,
0.098,
0.1137
],
"hex": "#15191d"
}
},
"secondary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0824,
0.098,
0.1137
],
"hex": "#15191d"
}
},
"status": {
"error": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.8353,
0.2392,
0.2196
],
"hex": "#d53d38"
}
},
"info": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0118,
0.4667,
0.8039
],
"hex": "#0377cd"
}
},
"success": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0078,
0.5294,
0.2392
],
"hex": "#02873d"
}
},
"warning": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.6196,
0.4196,
0.0235
],
"hex": "#9e6b06"
}
}
}
},
"font": {
"family": {
"body": {
"$type": "fontFamily",
"$value": [
"Host Grotesk",
"system-ui",
"sans-serif"
]
},
"heading": {
"$type": "fontFamily",
"$value": [
"Host Grotesk",
"system-ui",
"sans-serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"JetBrains Mono",
"Courier New",
"monospace"
]
}
}
}
}
CSS
:root {
--brand-color-accent: #d5361b;
--brand-color-ink: #15191d;
--brand-color-neutral-50: #f9fafc;
--brand-color-neutral-100: #f1f4f7;
--brand-color-neutral-200: #e3e6eb;
--brand-color-neutral-300: #d0d5da;
--brand-color-neutral-400: #a0a5ac;
--brand-color-neutral-500: #757b82;
--brand-color-neutral-600: #595e65;
--brand-color-neutral-700: #41454c;
--brand-color-neutral-800: #282c31;
--brand-color-neutral-900: #15191d;
--brand-color-neutral-950: #0b0d11;
--brand-color-primary: #15191d;
--brand-color-secondary: #15191d;
--brand-color-status-error: #d53d38;
--brand-color-status-info: #0377cd;
--brand-color-status-success: #02873d;
--brand-color-status-warning: #9e6b06;
--brand-font-family-body: Host Grotesk, system-ui, sans-serif;
--brand-font-family-heading: Host Grotesk, system-ui, sans-serif;
--brand-font-family-mono: 'JetBrains Mono', 'Courier New', monospace;
}