Visual Identity — Directives
Visual identity guidelines for artifacts. Anthropic dark mode as default, light mode as alternative. Serious typography. Never AI slop.
Visual Identity — Directives
Main rule: Never produce artifacts that look "AI generated" — no neon gradients, no empty glamorous effects. Own identity, inspired by the labs but never copying.
Default Mode: Anthropic Dark
Dark mode as default. Approved on 2026-07-07 after the pricing-analysis-v2 artifact ("what a beautiful thing").
Anthropic Dark Palette
| Token | Value | Usage |
|---|---|---|
--bg | #171717 | Main background |
--bg2 | #1e1e1e | Secondary background |
--surface | #232329 | Cards, tables, blocks |
--border | #2e2e32 | Borders, separators |
--text | #e8e8ed | Main text |
--text2 | #a1a1aa | Secondary text |
--text3 | #71717a | Tertiary text, muted |
--warm | #d4a574 | Primary accent (Anthropic warm) |
--green | #66bfa2 | Best, success, positive |
--red | #e8706a | Worst, error, negative |
Dark mode rules
- Background
#171717, never pure black (#000) - Tables with uppercase headers,
letter-spacing: 0.4px, muted color (--text3) - Row hover:
rgba(212,165,116,.04)— barely perceptible - Callouts with
border-left: 3px solid var(--warm)and backgroundrgba(212,165,116,.06) - Notes with
border-left: 3px solid var(--text3)and backgroundrgba(255,255,255,.03) - Model family badges with rgba family color background, 10% opacity
- Premium/reference rows with background
rgba(212,165,116,.06)
Alternative Mode: Light
Light mode remains valid for print PDFs, official documents, and contexts where dark is not appropriate.
Light Palette
| Token | Value | Usage |
|---|---|---|
--bg | #ffffff | Background |
--surface | #f8f9fa | Cards, tables |
--border | #ddd | Borders |
--text | #1a1a2e | Main text |
--accent | #2563eb | Accent (blue) |
--green | #16a34a | Best |
--red | #dc2626 | Worst |
What NOT to do (both modes)
- Purple/neon green gradients (the classic "AI slop")
- Status bars with colored dots in gray blocks
- Animations or decorative elements without function
- Excessive formatting that pollutes content
- "Tech bro" or "startup pitch deck" tones
- Generic dark mode with bright borders or colored shadows
What TO do (both modes)
- Serious typography: Source Serif 4 for headings, Inter for body, JetBrains Mono for code
- Clean tables in the style of official documents
- Document headers with metadata table (Project, Author, Version, Date, Status)
- Simple borders — 1px solid, no exaggerated border-radius
- Generous whitespace — breathing room between sections
- Discreet footer with version + date
Inspiration
- Anthropic dark mode: Warm accent (#d4a574), muted surfaces, editorial clean
- Anthropic light mode: Generous whitespace, serious typography, editorial
- OpenAI Research: Blog post structure, blockquotes, clean tables
- System Cards (Mythos/Fable 5): Complete technical document, benchmark tables
- Pentest Template (Platform Builders): Official header, professional layout
Tone
- Technical but accessible
- No flattery, no coaching
- Data speaks for itself — minimalism in narrative
- Citations when relevant, without exaggeration
Apply to: every PDF, blog post, dashboard, or artifact produced for external distribution.