Brand & Standards – Visual Identity & Brand Guidelines
Logo, fonts, colors and communication tone — all in one place
Logo
Primary logo (horizontal)
Used in header, footer, email signature and on light backgrounds.
Inverse logo
Used on dark backgrounds.
Logo mark (icon)
Used as favicon, PWA icon and wherever text is not needed.
Usage rules
- Maintain clear space around the logo at minimum marker width
- Do not change colors
- Do not place on busy backgrounds
- Use inverse version on dark backgrounds
Palette
| Token | Light | Dark | Purpose |
|---|---|---|---|
| surface | #f8f6f3 | #0a0a0a | Page background |
| surface-alt | #eae7e2 | #1c1a18 | Alternative background |
| text-heading | #1c1a18 | #f8f6f3 | Headings |
| text-body | #4a443f | #b0aba4 | Body text |
| accent | #0d9488 (teal) | #2dd4bf | CTA, links, accents |
| secondary | #d97706 (amber) | #fbbf24 | Secondary accent |
Typography
| Role | Font | Weight |
|---|---|---|
| Heading | Space Grotesk | 400–700 |
| Body | Inter | 300–700 |
| Code/Mono | JetBrains Mono | 400–500 |
Communication Tone
| Situation | Approach |
|---|---|
| Hero | “We preserve stories. We build systems.” |
| Services | What, how, how much — no secrets |
| Portfolio | Here’s what we built, here’s how |
| Contact | “Get in touch. Coffee and see what you need.” |
| Legal | Clean, clear, fair |
Stack
| Layer | Technology |
|---|---|
| CSS | Tailwind v4 |
| JS | Alpine.js 3 |
| Deploy | FTP / SSH |
Version: 1.0 | May 2026