Brand Guidelines
Logo
The logo is a monogram: the letters KG in white, set on a sharp-cornered golden rectangle (1.618:1) filled with the brand color #0018A8. Cap height equals 0.618 of the rectangle’s shorter side, so the mark breathes without floating. Kerning pulls the letters tight so they read as one shape, not two characters apart.
The wordmark “itsystems.consulting” is a separate element. Never place it inside the logo file. Use it next to the monogram in headers, signatures, and footers when context calls for it.
Construction rules
- Container ratio: 1.618:1 (golden rectangle, no rounding)
- Corners: sharp, 0 radius. Sharp signals authority and precision. Rounded would soften the consulting tone
- Cap height: 0.618 of the shorter side (golden ratio inverse)
- Kerning: tight, optically tuned. Letters almost touch but counters stay open
- Centering: optical, not mathematical. K carries more visual weight than G, so the pair sits with a slight left offset to feel balanced
- Single color, no gradients, no shadows, no effects
Logo typeface
The logo uses a geometric sans serif at weight 800. The chosen family is Manrope (SIL Open Font License, free for commercial use, self-hosted).
Why not Inter for the logo. Inter is a workhorse UI font, optimized for screen reading and small sizes. It is everywhere on the web, which kills distinctiveness. It carries no brand DNA. A consulting logo needs a typeface with quiet authority, distinct geometry, and confidence at display sizes. Manrope fits that brief. Inter stays in the brand for the website UI and body text, where it earns its keep.
Font hosting and GDPR
Self-host all fonts. Never load from Google Fonts CDN. German courts have ruled that loading Google Fonts without explicit consent violates GDPR (LG München, January 2022), with fines reaching €100 per visitor. Manrope is free to host yourself, so there is no reason to send visitor IPs to Google.
Download Manrope from Google Fonts, place the .woff2 files in static/fonts/, declare a @font-face rule in CSS, and serve them from your own domain. This keeps GDPR clean and removes a third-party dependency.
Clear space
Leave padding equal to the height of the “K” on all sides. Nothing crosses this margin, ever.
Minimum size
- Digital: 64 px tall
- Print: 16 mm tall
Versions
- Default: white KG on #0018A8 golden rectangle
- Inverted: #0018A8 KG on a white or light surface
- Knockout: white KG on any dark surface
- Mono: white KG on a single-color background (for print or embroidery)
Production note
The current SVG uses Inter for layout. For production, convert text to outlines and ship the outlined version as the master file. System-font rendering varies; outlined glyphs render identical everywhere.
Color palette
| Name | Hex | Use |
|---|---|---|
| Primary | #0018A8 | Logo, primary actions, links |
| Primary dark | #001270 | Hover and pressed states |
| Accent | #00C853 | Highlights, success states |
| Surface | #FFFFFF | Backgrounds |
| Surface alt | #FBFBFD | Section dividers |
| Text | #15171A | Body text |
| Text soft | #4A5060 | Secondary text |
| Text muted | #8A8F9A | Tertiary text, captions |
| Hairline | rgba(20, 23, 28, 0.07) | Borders, dividers |
Typography
| Role | Font | Use |
|---|---|---|
| Display | Manrope | Headings, hero, brand moments |
| Body | Inter | Paragraphs, UI, navigation |
| Mono | JetBrains Mono | Code, terminal output, technical |
Body type size: 17 px. Line height: 1.75. Display sizes scale with viewport.
Voice
Direct. Technical. No fluff.
You write for the reader, not for the algorithm. Sentences stay short. Adverbs earn their place. The reader’s time matters more than yours.
Avoid: hashtags, semicolons, em dashes, rule-of-three lists, metaphors, vague weasel attributions.
Don’t
- Stretch or distort the logo
- Recolor outside the palette
- Add drop shadows, glows, or gradients to the logo
- Place the logo on busy backgrounds
- Substitute fonts
- Use sentence case for headings
- Open with “I” in the body