Brand.
Logo, Typografie, Farben, Favicon. Zum Anschauen und Download.
01 Logo
Wortmarke «tg» in Geist 700 mit Lime-Block auf der Baseline. Die Rezeptur lebt als CSS in
src/components/Logo.astro; alle Dateien hier sind daraus generiert
(node scripts/brand-export.mjs), nichts ist von Hand nachgebaut.
- Schrift
- Geist 700
- Laufweite
- -.05em
- Block
- .3em × .3em · auf der Baseline · Abstand .06em
- Lime
- #CBF23B
- Ink
- #101210 · dunkel #ECEAE0
Wortmarke hell Transparent, eng beschnitten. Für helle Untergründe: Dokumente, Präsentationen, Profile.
Wortmarke dunkel Gleicher Schnitt, helle Schrift. Für dunkle Untergründe.
bexio-Briefkopf Mit eingebautem Weissraum (1500×600), damit bexio die Marke auf Rechnungen nicht zu gross rendert.
Favicons und App-Icon Browser-Tab (32), App-Icon (180), klassisches ICO. Alles aus derselben Rezeptur.
Link-Vorschau (og-Bild) Erscheint beim Teilen der Website in Chats und Social Media, 1200 mal 630.
02 Typografie
Geist für alles: Display, Body, Kicker und Labels. Eine Schrift, selbst gehostet, kein Google-CDN.
Display
Editorial Craft.
H1
Bauen, was bleibt.
H2
Drei Kernleistungen.
Body
Sauberer Code, ehrliche Kommunikation.
Label
DOHLENZELGSTRASSE 2B · WINDISCH
03 Farben
Fünf Kernfarben. Token-Namen entsprechen src/styles/tokens.css.
Lime · Signal
#CBF23B --tg-signal
Off-White · Mark Dunkel
#ECEAE0 --tg-ink · dark
Ink · Text
#101210 --tg-ink
Signal Deep
#86A500 --tg-signal-deep
Paper · Canvas
#F4F3ED --tg-paper
04 Favicon-Set
Aus derselben Wordmark-Rezeptur generiert (node scripts/favicon-export.mjs): «tg» zentriert auf weissem Quadrat, Marke ~84% der Breite. Sizes für Browser, iOS, Android, PWA.
