Merkgids ·yzr
“Eén partij voor bouwen, groeien en beheren, met producten die op elkaar aansluiten.”
Gemaakt met Brandyzr. Een concept: de symbolen van de ·yzr-producten zijn nog een tussenversie.
Eén familie. Eén punt.
Het moedermerk van alle ·yzr-producten: de punt, het woordmerk, de familie en haar kleuren, de letter en de toon. Elke productgids bouwt hierop voort.
·yzr is de familie achter de producten
·yzr is een familie van gespecialiseerde producten, gebouwd in één monorepo met gedeelde onderdelen: één login (@yzr/auth, met SSO vanuit Ecolyzr), één designsysteem (@yzr/ui) en Host Grotesk als merkletter. De producten draaien op eigen servers in de EU. Elk product heeft een naam op -yzr, een eigen accentkleur en een eigen symbool; de punt is wat ze bindt.
Eén partij voor bouwen, groeien en beheren, met producten die op elkaar aansluiten.
Engineered, rustig, eerlijk. Zegt wat een product doet en belooft niets wat het niet kan aantonen.
Negen apps in één codebase, 23 gedeelde packages, één login met SSO tussen de producten, eigen servers in de EU.
De familie
Drie families, elk product met een eigen accentkleur en een eigen gids. Brandyzr heeft geen eigen tint: het is inkt, zoals het moedermerk.
BouwenDe punt plus yzr, altijd klein
Het moedermerk heeft geen apart symbool: het woordmerk is de punt plus yzr, in Host Grotesk 700, altijd in kleine letters. De punt is een cirkel in koraal (#D5361B), geen leesteken; het woord staat in inkt of wit. In lopende tekst schrijf je ·yzr met het middenpunt (U+00B7); waar dat technisch niet kan, yzr.
De punt alleen: avatar, stempel, knooppunt.
Inktvlak met de punt in de donkere koraalvariant (#E35E47). Op 16 px blijft alleen de punt over, en dat is genoeg.
- Vrije ruimte rondom = de hoogte van het symbool
- Minimaal 24 px hoog op schermen, 8 mm in print
- Header: 32 px hoog
·yzr altijd klein, ook aan het begin van een zin. Productnamen in een zin met hoofdletter (Sityzr, Contyzr), in een logo klein (sityzr). De punt koraal, het woord inkt of wit.
YZR, Yzr of ·YZR schrijven, de punt als gewoon leesteken typen in een logo, de punt in een andere kleur zetten, of het woordmerk naast een productlogo herhalen.
- Moedermerk: ·yzr, met middenpunt, kleine letters
- Product in een zin: Contyzr; in logo en code: contyzr
- Familie in een zin: “de ·yzr-familie”, “het ·yzr-ecosysteem”
Het productlogo staat voorop; ·yzr volgt klein, als afzender (“een product van ·yzr”).
Tussenversie. Het woordmerk is hier HTML in Host Grotesk met een CSS-cirkel als punt. Het nagetekende woordmerk volgt in Figma, samen met de productsymbolen.
Inkt en papier, de punt als enige accent
Het moedermerk is inkt en papier; de punt is het enige accent. Elk product brengt een eigen kleur mee. Alle tien accenten zijn in OKLCH op dezelfde lichtheid opgebouwd, zodat geen kleur de andere overstemt, en ze halen alle tien 4,8:1 op wit.
De familie op de kleurcirkel
Tien accenten, op tint geordend. De kleinste afstand tussen buren is 0,084 OKLab (Contyzr en Sityzr), de grootste 0,137 (Domainyzr en ·yzr). Brandyzr heeft geen eigen tint: het is inkt, net als het moedermerk.
#D5361B
#AF5C00
#7D7400
#00843B
#008173
#007AAC
#2C6BE8
#7F58E2
#A847C4
#CB3486
Neutralen
#f9fafc
#f1f4f7
#e3e6eb
#d0d5da
#a0a5ac
#757b82
#595e65
#41454c
#282c31
#15191d
#0b0d11
Status
Contrast uit het theme: tekst 16,92:1, secundaire tekst 6,26:1, gedimde tekst 4,72:1, primaire knop 17,67:1 (hover 20,42:1), secundaire knop 17,67:1. Alles haalt WCAG AA.
Host Grotesk voor de hele familie
Host Grotesk is de letter van de hele familie: één variabele familie (300–800, OFL) voor koppen en tekst, in elk product. JetBrains Mono voor labels, cijfers en code. Productnamen in koppen volgen de naamregel.
700 · −0,045emEén punt.
700 · −0,035emBouwen, groeien, beheren
De punt is het merk
De punt is het merk. In het woordmerk staat hij vóór yzr; in elk productsymbool komt hij terug, in de productkleur. Verder is hij een verbinder: tussen modules, als knooppunt in diagrammen, als sectiestreep en als scheidingsteken. Koraal blijft klein: een speldenprik, nooit een vlak.
Familie
8 × 8 px in de sectiekleur, onder een sectiekop.
Een punt als scheidingsteken, niet een chevron.
De punt in het midden, de families eromheen: bouwen, groeien, beheren.
Vier familie-iconen
Vier familie-iconen, afgeleid van de categorie-iconen van Sityzr en teruggebracht naar inkt, met de punt in koraal. Ze staan voor de drie families en voor wat ze verbindt. Producticonen staan in de productgidsen, in de productkleur.
Bouwen
Groeien
Beheren
Koppelen- Eén icoon per functie, altijd op dezelfde plek en in dezelfde maat (48–64 px)
- Geen tekst of letters in een icoon, geen schaduw, geen verloop
- Kleuren zijn genormaliseerd naar de tokens; een afwijkende tint is een fout
Punten en lijnen, geen stockfoto’s
Abstract en rustig: punten op een raster, verbonden door dunne lijnen, met links ruimte voor tekst. In het moedermerk zijn de punten inkt met hier en daar koraal; in een familiebeeld krijgt elke lijn een productkleur. Geen stockfoto’s, geen mensen, robots of gloeiende breinen.
Recraft-achtergrondstijl (dezelfde bronbeelden als de Sityzr-gids), per verbonden cluster ingekleurd op papier (#F9FAFC): varianten 1 en 2 inkt met koraal, variant 3 inkt met de tien productaccenten.
Rustige vormen, één duidelijke actie
Hoek 10 px, gewicht 600, geen sprong bij hover: alleen de kleur wordt dieper (#030507). Secundair: wit met inktrand. Per scherm één primaire knop.
Mono, kapitalen, ruim gespatieerd. Boven een sectiekop, nooit in lopende tekst.
Hoeken 6 / 10 / 14 / 20 px. Schaduwen altijd getint met inkt, nooit met een lichte kleur. Container 1.240 px.
LinkedIn eerst
Profielbanner, 1584 × 396 px. Links blijft ruimte vrij voor de profielfoto; de punten vullen rechts het beeld.
Alle apps in de monorepo gebruiken hetzelfde auth-pakket (@yzr/auth); vanuit Ecolyzr klik je met SSO door naar de andere producten.
yzrPostsjabloon: één bewering die de code waarmaakt, één zin uitleg, het resultaat als beeld. Geen stockfoto's en geen hashtagwolken.
Eén stem, elk product een accent
Eén stem voor de hele familie. Elk product legt er een eigen accent in: Sityzr direct, Brandyzr precies, Contyzr grondig, Tagyzr technisch.
| Principe | Zo wel | Zo niet |
|---|---|---|
| Direct | “Wij schrijven de code, wij beheren de servers.” | “Wij bieden end-to-end oplossingen op maat.” |
| Aantoonbaar | Een bewering die de code waarmaakt, met de functie erbij. | Klantaantallen, percentages of “het beste platform” zonder bron. |
| Eerlijk | “Eigen servers in de EU.” | “Eigen servers in Nederland”, zolang ze in Duitsland staan. |
| Klein | ·yzr en sityzr in een logo; Sityzr in een zin. | YZR, Yzr, ·YZR. |
| Rustig | Korte zinnen, je-vorm, Nederlands zonder jargon. | Uitroeptekens, emoji, hypewoorden als revolutionair of next-level. |
Wat vaststaat en wat nog komt
| Onderdeel | Status |
|---|---|
| Kleur, typografie, punt, interface | Concept, 151/151 theme-velden, contrast getoetst |
| Woordmerk en favicon | Tussenversie: HTML met een CSS-punt |
| Familie-iconen (4) | Eerste set, afgeleid van de Sityzr-categorie-iconen |
| Achtergronden (3), LinkedIn-banner | Eerste set; banner nog als HTML, niet als PNG |
| Merkgids-record | Aanwezig; tone of voice nog niet ingevuld |
| Productgidsen | Sityzr, Tagyzr, Domainyzr, Brandyzr, Contyzr, Translyzr, Adlyzr, Scoutyzr, Ecolyzr, Adminyzr klaar; de rest volgt |
| Nagetekend woordmerk | Open: handwerk in Figma |
Zo’n merkgids voor jouw merk?
Logo, kleur, typografie, iconen, beeld, interface en tone of voice in één gids, met tokens die je website direct kan gebruiken.