Brand.
Logo, typography, colours, favicon. To view and download.
01 Logo
The “tg” wordmark in Geist 700 with a lime block on the baseline. The recipe lives as CSS in
src/components/Logo.astro; every file here is generated from it
(node scripts/brand-export.mjs), nothing is rebuilt by hand.
- Typeface
- Geist 700
- Tracking
- -.05em
- Block
- .3em × .3em · on the baseline · gap .06em
- Lime
- #CBF23B
- Ink
- #101210 · dark #ECEAE0
Wordmark light Transparent, tightly cropped. For light backgrounds: documents, slides, profiles.
Wordmark dark Same crop, light type. For dark backgrounds.
bexio letterhead With built-in white space (1500×600) so bexio does not render the mark too large on invoices.
Favicons and app icon Browser tab (32), app icon (180), classic ICO. All generated from the same recipe.
Link preview (og image) Shown when the site is shared in chats and social media, 1200 by 630.
02 Typography
Geist for everything: display, body, kickers and labels. One typeface, self-hosted, no Google CDN.
Display
Editorial Craft.
H1
Built to last.
H2
Three core services.
Body
Clean code, honest communication.
Label
DOHLENZELGSTRASSE 2B · WINDISCH
03 Colours
Five core colours. Token names match src/styles/tokens.css.
Lime · Signal
#CBF23B --tg-signal
Off-white · Dark mark
#ECEAE0 --tg-ink · dark
Ink · Text
#101210 --tg-ink
Signal Deep
#86A500 --tg-signal-deep
Paper · Canvas
#F4F3ED --tg-paper
04 Favicon set
Generated from the same wordmark recipe (node scripts/favicon-export.mjs): “tg” centred on a white square, the mark at roughly 84% of the width. Sizes for browsers, iOS, Android and PWA.
