logo's
Elke dagelijkse vorm
PNG blijft scherp tot ~print-formaat; SVG schaalt oneindig. Voor de factuur: gebruik $ invoker — factuur (licht).
app-iconen & favicons
Vierkant, rond, klein
Voor Slack, GitHub, socials, betaal-apps en browsertabs.
kleur-tokens
Licht, donker, print, signaal
Klik op een staal om de hex te kopiëren.
typografie
Geist + Geist Mono
Sans voor koppen en lopende tekst, mono voor interface, prompts en code. Klik op de stack om te kopiëren.
gebruik
Clearspace & do's / don'ts
Wel
- Houd minstens de hoogte van het $-teken vrij rond het logo.
- Groen (
#00ff9c) op donker, ink (#06110d) op licht. - Gebruik het wordmark/lockup waar ruimte is; de losse mark alleen klein of als icoon.
- Op de factuur: de licht-lockup of het ink-wordmark op wit.
Niet
- Niet verdraaien, uitrekken of de verhouding wijzigen.
- Geen groen logo op een lichte achtergrond (te weinig contrast).
- Geen schaduwen, gloed of gradients toevoegen.
- De kleuren niet vervangen door een andere groentint.
signature
Website door invoker
De ondertekening onderaan een site die wij bouwen. Bedoeld als signature, niet als tweede merk: in rust neemt hij de kleur van de site over, pas bij hover of focus springt hij naar het groen met een knipperende cursor. Beweeg eroverheen.
Schaal op de x-hoogte
Het $-teken reikt veel hoger dan de letters. Geef je het merk dezelfde totále hoogte als de tekst ernaast, dan worden de kleine letters van "invoker" optisch veel groter en oogt de signature te zwaar.
Vuistregel: hoogte merk ≈ kapitaalhoogte label / 0,6. Bij een label van
0.64rem komt dat uit op ongeveer 0.82rem.
Lijn uit op de basislijn
Om diezelfde reden ligt het optische midden van het merk láger dan dat van kapitalen
ernaast. align-items: center zet het merk dus zichtbaar scheef; gebruik
baseline.
Addertje: een browser neemt de onderrand van een SVG als basislijn, en dat is de
staart van de $. Corrigeer met translate, niet met
een negatieve marge: die telt niet mee voor de basislijn van een flex-item.
| Maat | Waarvoor |
|---|---|
| viewBox 20 20 531 89.2 | De gemeten inkt-bounding-box van het pad; het originele kader had lucht boven en onder. |
| 9 / 89,2 | Deel dat ónder de basislijn zit: de staart van het $. Hiermee corrigeer je de uitlijning. |
| 53,4 / 89,2 | De x-hoogte, de kleine letters van "invoker". Hiermee bepaal je de grootte. |