Merkgids Ecolyzr
“Beheer je website, facturen en meer, allemaal op één plek.”
Gemaakt met Brandyzr. Een concept: de symbolen van de ·yzr-producten zijn nog een tussenversie.
Eén deur naar alles.
Alles wat Ecolyzr herkenbaar maakt, op één plek: logo, kleur, letter, de punt, iconen, beeld en toon. Elke kleur hier is dezelfde als in het theme van Ecolyzr.
Ecolyzr is het klantportaal van ·yzr
Ecolyzr is de plek waar een klant van ·yzr inlogt en ziet wat hij bij ons heeft: elk product staat als tegel op het dashboard, domeinen koppel je met een DNS-wizard en een controle, en inloggen kan met een inloglink, met Google of met een wachtwoord en tweestapsverificatie. Ecolyzr hoort bij de familie Beheren, naast Adminyzr. De verbinding met het moedermerk is de punt.
Beheer je website, facturen en meer, allemaal op één plek.
Overzichtelijk, rustig, toegankelijk. Ecolyzr legt uit in plaats van te imponeren; een klant hoeft geen techniek te kennen.
Tegels per klant uit de producttoegang; domein koppelen met DNS-wizard, controle en go-live; inloggen met inloglink, Google of wachtwoord, met 2FA.
Vier tegels rond één punt
Het symbool bestaat uit vier afgeronde tegels met de punt in het midden: elk product een tegel, het portaal is het midden waar ze samenkomen. Naast het symbool staat het woord ecolyzr in Host Grotesk 700, altijd in kleine letters. Het symbool staat in violet, het woord in inkt of wit.
Losse toepassing: app-icoon, avatar. #A847C4 op licht, #B868D1 op donker.
Inktvlak met het symbool in #B868D1 (5:1 op inkt). Getoond op 64, 32 en 16 px.
- Vrije ruimte rondom = de hoogte van het symbool
- Minimaal 24 px hoog op schermen, 8 mm in print
- Header: 32 px hoog
Op een rustige ondergrond, met genoeg contrast. De vier tegels houden hun schuine binnenhoek naar de punt.
Tegels toevoegen of weghalen, de punt vullen of verplaatsen, uitrekken, draaien, een schaduw toevoegen of het woord met een hoofdletter schrijven.
Tussenversie. Het symbool is schets v9 uit de drie voorgeselecteerde schetsen (gekozen boven v16 en v4): v16 lijkt te veel op het Sityzr-symbool (twee modules verbonden via de punt), v4 wordt op 24 px een vlek. v9 is op licht en donker gelijk en op 24 px nog vier tegels en een punt. Het nagetekende woordmerk en symbool volgen in Figma, zoals bij Sityzr.
Violet ontvangt, inkt houdt het rustig
Alle kleuren zijn in OKLCH opgebouwd (tint 318°) en halen WCAG AA. Op een pagina is ongeveer 70% neutraal, 20% inkt en 10% accent; de koraalrode punt is een speldenprik, nooit een vlak. Violet is de kleur van de voordeur: knoppen, links, het symbool en de iconen. Grote vlakken blijven neutraal of inkt, zodat de tegels van de andere producten hun eigen kleur kunnen houden.
Neutralen
#f9fafc
#f1f4f7
#e3e6eb
#d0d5da
#a0a5ac
#757b82
#595e65
#41454c
#282c31
#15191d
#0b0d11
Status
Host Grotesk voor alles, mono voor labels
Dezelfde familie als de rest van ·yzr: één variabele letter (300–800, OFL) voor koppen en tekst, JetBrains Mono voor labels, cijfers en code. Koppen zijn strak gespatieerd; op mobiel schalen ze vloeiend mee.
700 · −0,045emOp één plek.
700 · −0,035emAlles wat je bij ons hebt
De punt is het midden
In ·yzr verbindt de punt. In Ecolyzr is hij het midden van het portaal: de plek waar de tegels van de producten samenkomen. In diagrammen is de punt de klant, met de producten eromheen.
Koppel je domein
8 × 8 px in de productkleur, onder een sectiekop.
Een punt als scheidingsteken, niet een chevron.
Eén klant in het midden, de producten eromheen als tegels.
Acht iconen, acht plekken in het portaal
Gemaakt met dezelfde Recraft-iconstijl als Sityzr en Brandyzr, daarna genormaliseerd naar de tokens: #A847C4, inkt, wit en het zachte vlak. Altijd op wit of op het zachte vlak, ook in een donkere interface. Voor kleine interface-iconen (24 px, lijn) gebruikt de app Lucide.
Dashboard
Domein koppelen
Website
Bestellingen
Advertenties
Facturen en offertes
Support
Team- 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
Laat het overzicht zien
Ecolyzr verkoopt met rust: alles op één plek, zonder zoeken. Achtergronden zijn abstract en rustig, punten op een raster die door dunne lijnen verbonden zijn, met links ruimte voor tekst. Geen stockfoto’s van mensen achter laptops, geen sleutels of deuren als cliché.
Recraft-achtergrondstijl, daarna per verbonden cluster ingekleurd: elke groep punten krijgt één effen kleur (inkt, #A847C4 of #C261DF) op papier (#F9FAFC). De stijl leverde deels Sityzr-groenblauw en een oude producttint; die zijn zo volledig verdwenen.
Rustige vormen, één duidelijke actie
Hoek 10px, gewicht 600, geen sprong bij hover: alleen de kleur wordt dieper (#8824A3). Secundair: inkt met witte tekst. Per scherm één primaire knop.
Mono, kapitalen, ruim gespatieerd. Boven een sectiekop, nooit in lopende tekst. Tekst in #8824A3 op het zachte vlak (6,5:1); de lichte accenttint haalt daar geen AA voor kleine 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.
Met een inloglink in je mail, met Google of met een wachtwoord en tweestapsverificatie. Daarna staat elk product dat je gebruikt als tegel klaar.
ecolyzrPostsjabloon: één bewering met een getal, één zin uitleg, het portaal als beeld. Het getal komt uit de code (drie inlogroutes); gebruik geen cijfers uit de voorbeeldschermen. Geen stockfoto’s en geen hashtagwolken.
Helder, geduldig, zonder techniek
| Principe | Zo wel | Zo niet |
|---|---|---|
| Helder | “Je domein is gekoppeld. Het kan tot een uur duren voor iedereen hem ziet.” | “DNS-propagatie van de A-record is geïnitieerd.” |
| Geduldig | “Volg de drie stappen; we controleren het voor je.” | “Raadpleeg de documentatie van je registrar.” |
| Eerlijk | “Dit onderdeel komt later.” | Een scherm met verzonnen cijfers. |
| 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 v0.1, 151/151 theme-velden, 11 contrastcontroles gehaald |
| Symbool en lockup | Tussenversie (schets v9) |
| Feature-iconen (8) | Eerste set, ter beoordeling; gegenereerd met een oude producttint en daarna naar de tokens gezet |
| Achtergronden (3), LinkedIn-banner | Eerste set; banner nog als HTML, niet als PNG |
| Merkgids-record | Klaar om als merkversie vast te leggen; tone of voice nog niet ingevuld |
| Productbeeld (schermen) | Open: pas zinvol als de schermen echte data tonen |
| Nagetekend woordmerk en symbool | 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.