Brand Guide
Brand Guide
The visual identity system for Chris Mullins and The AI Read-In. Colors, typography, and usage guidelines for every context.
Core palette
Navy blues for signature. The palette is intentionally narrow — a dark canvas with a single, purposeful accent. Everything else is space.
Navy System
Text System
Gilt Accent
Typography
Two families, clear hierarchy. Newsreader for headings, Geist for body and interface. Readability is the primary constraint — words are the feature.
Display
Newsreader
Expressive serif with editorial authority. Handles large sizes with poise and maintains legibility at all display scales.
Weight: 500 (Medium) · Google Fonts
Body / UI
Geist
Clean sans-serif for maximum readability. Optimized for screen rendering with clear letterforms at small sizes.
Weight: 400–600 · Vercel CDN
Type Scale
Type scale is set relative to a 16px base. Primary headings and key statements are Newsreader; the same sizes in Geist serve for body, navigation, and interface.
Page Headline · Newsreader · 500
Lead with conviction.
Section Heading · Newsreader · 500
Strategic clarity.
Subsection · Newsreader · 500
Three ways in.
Publication Title · Geist · 500
The AI Read-In
Body Text · Geist · 400
Weekly strategic analysis. This is how to think. Not what to think. It's aimed at senior leaders who need to think clearly, speak to it.
Secondary Text · Geist · 400
Captions, metadata, and supporting information.
Label / UI · Geist · 400–600 · Uppercase
Navigation · Buttons · Metadata
HAIC level colors
Each level in the Human-AI Collaboration Index carries a distinct accent. These are used sparingly — accent bars, level indicators, and the landing page system.
Design principles
Every design decision should reinforce the same signal: this is a place to think clearly.
Words are the feature
Readability is the primary constraint. The design exists to serve the text, not compete with it. Typography, spacing, and contrast are all optimized for sustained reading.
Dark is default
A dark format is easier on most eyes and signals depth. The navy ground is never pure black — it carries enough blue to feel warm and intentional.
Calm over clever
No animation for the sake of animation. No gradients for the sake of gradients. The site should feel like a well-lit study, not a startup landing page.
Erudite, not academic
Signal credibility and depth without being inaccessible. The visual language borrows from editorial publishing — think The Economist, not a university journal.
Token reference
CSS custom properties defined in the design system. Token names reference these consistently across components.
| Token | Value | Usage |
|---|---|---|
| --color-navy-950 | #0A0E1A | Page background |
| --color-navy-900 | #0F1629 | Cards, surfaces |
| --color-navy-800 | #151E38 | Inputs, elevated |
| --color-navy-700 | #1C2844 | Borders, dividers |
| --color-navy-600 | #253356 | Subtle accents |
| --color-parchment-bright | #EAEAF0 | Headlines |
| --color-parchment | #D4D4DC | Body text |
| --color-parchment-dim | #9CA3AF | Secondary text |
| --color-gilt | #C4A265 | Primary accent |
| --color-gilt-light | #D9BC85 | Hover accent |
| --color-gilt-dim | #9A7E4E | Subtle accent |
| --font-display | Newsreader | Headings |
| --font-body | Geist | Body, paragraphs |
| --font-ui | Geist | Nav, labels, buttons |
| --font-mono | Geist Mono | Code, tokens |