Brand Kit
zeisWorks. Visual Identity
A reference for colors, typography, logo usage, and UI patterns used across zeisWorks.
Logo
On light / cream
On dark
Mark only
Orange mark (#C85A20) with cream "Z" on rounded rectangle. Use as favicon and icon-only contexts.
Colors
Primary palette used throughout the site and Tailwind config.
Cream
#FAF8F3
Page background
Cream Dark
#F0EAD9
Borders, dividers
Ink
#1E1C18
Primary text
Ink Mid
#5A5650
Secondary text
Ink Light
#9A9590
Muted text, captions
Navy
#2D4A6B
Links, CTAs
Forest
#2C4A3E
Code blocks
Orange
#C85A20
Accent, logo mark, logo period
Extended palette
Tints and shades used on the homepage and in detailed UI work.
Terra Light
#D6E0EC
Terra Dark
#1E3350
Orange Light
#F2E0D5
Forest Mid
#3D6B5A
Forest Light
#D8EAE4
Forest Dark
#1C3029
Typography
Serif — Headlines
Lora
Your best work should be finding you new clients.
Small business growth, handled.
"Clear systems, real results."
Weights
400 · 600 · 700
Styles
Regular · Italic
Fallback
Georgia, serif
Sans-serif — Body & UI
DM Sans
I help independent service businesses grow using the same tools and strategies big companies pay agencies a fortune for, without the agency. One person, direct line, no handoffs.
Marketing that runs, operations that don't leak, and tools that actually fit the way you work.
Weights
300 · 400 · 500
Body size
1.0625rem / 17px
Fallback
system-ui, sans-serif
Type scale
UI Components
Buttons
Cards
Guide
Article title example
Short description of the guide content goes here, two lines maximum.
5 min read · Apr 2026
Featured
Highlighted card variant
Used for featured content or callout sections.
CTA Box — Soft
Free growth analysis
Tell me what's wrong. I'll figure out the rest. No pitch, no obligation.
Code
Inline code appears in forest green on a tinted background.
// Code blocks: forest bg, cream text
SELECT Id, Name FROM Account
WHERE Industry = 'Technology'Dividers
Standard border-cream-dark divider above. Border radius tokens: rounded-lg (8px), rounded-xl (12px).
Voice & Tone
Do
- ✓ Direct and specific — name the problem
- ✓ Confident without being salesy
- ✓ Practical, outcome-focused language
- ✓ Short sentences. Plain words.
Don't
- ✗ Buzzwords: "synergy", "leverage", "scalable solutions"
- ✗ Passive voice or hedging
- ✗ Overlong paragraphs
- ✗ All-caps except eyebrow labels
Token Reference
Tailwind color tokens map directly to CSS custom properties in tailwind.config.mjs.
| Tailwind Token | Hex |
|---|---|
| bg-cream / text-cream | #FAF8F3 |
| bg-cream-dark / text-cream-dark | #F0EAD9 |
| bg-ink / text-ink | #1E1C18 |
| bg-ink-mid / text-ink-mid | #5A5650 |
| bg-ink-light / text-ink-light | #9A9590 |
| bg-navy / text-navy | #2D4A6B |
| bg-forest / text-forest | #2C4A3E |
| bg-orange / text-orange | #C85A20 |