Finn Brand Guide

Last updated: 2026-04-21

Every page on https://finn.computer — the landing page, docs, legal, and future surfaces — reads its design tokens from a single file: /brand.css. This page documents the system.

Principles

One stylesheet. Every page links /brand.css. No copy-pasted tokens. Change a colour in one place, every page updates.
Content-first. Typography is serif-for-display (Instrument Serif), sans-for-reading (DM Sans), mono-for-code (JetBrains Mono). No decoration for its own sake.
Warm, not sterile. Page bg is cream (#F8F6F1), not white. Accent is muted teal (#0F766E), not neon. Feels like a publication, not a dashboard.
Dark mode is a first-class mode. Every token has a dark variant under [data-theme="dark"]. Pages that add a theme toggle just flip the attribute.

Tokens

Colour

Role	Light	Dark	Usage
Page bg	`#F8F6F1`	`#1C1917`	`body` background
Surface	`#FFFFFF`	`#292524`	Cards, panels
Elevated	`#F0EDE8`	`#44403C`	Inset code, subtle fills
Primary text	`#1C1917`	`#FAF9F6`	Body copy, headings
Muted text	`#78716C`	`#A8A29E`	Secondary labels
Border	`#E7E5E4`	`#44403C`	Card borders, dividers
Accent	`#0F766E`	`#2DD4BF`	Links, buttons, highlights
OK	`#16A34A`	`#4ADE80`	Success states
Warn	`#CA8A04`	`#FACC15`	Warnings
Bad	`#DC2626`	`#F87171`	Errors

Reference via CSS vars: var(--bg-page), var(--text-primary), var(--accent), etc. Never hardcode hex.

Typography

Stack	CSS var	When
`Instrument Serif`	`var(--serif)`	h1, h2, h3, h4, logo, marketing display text
`DM Sans`	`var(--sans)`	Body copy, navigation, buttons
`JetBrains Mono`	`var(--mono)`	Code, API endpoints, eyebrow labels

Scale: body 16px, h3 1.15em, h2 1.5em, h1 2.5em (doc pages) or 48–56px (marketing hero). Letter-spacing -0.02em on headings.

Shape

Token	Value	When
`--radius-sm`	6px	Inline code, small badges
`--radius-md`	10px	Buttons, code blocks
`--radius-lg`	14px	Cards, hero surfaces

Page patterns

Marketing hero (landing only)

Custom full-bleed layout with 48–56px serif h1, sans body, and a dark code sample card inset. See /. Don't replicate this on content pages — it exists for the one page where conversion matters.

Content shell (`.doc`)

Used on docs, legal, and this guide. One 760px-wide reading column, serif headings, sans body, mono code. Rendered automatically by the Go docs.go handler for any embedded markdown.

Admin panels

Use the same tokens but with a two-column sidebar + main layout. See docs/mocks/admin.html for the current mock.

Adding a new page

Markdown content page — drop the .md file into internal/agentready/static/legal/ (or docs/), add a route in cmd/api/main.go, done. The doc shell comes automatically.
Bespoke page (e.g. pricing, signup) — start from the landing page's HTML skeleton, keep the <link rel="stylesheet" href="/brand.css"> intact, override CSS classes sparingly. Any new token you need goes into brand.css under :root first, then you use var(--whatever).
Never inline a new colour or font. If you catch yourself writing color: #... or font-family: 'Some Font', stop and add it to brand.css as a variable.

Accessibility

Colour contrast: all text-on-bg pairs pass WCAG AA at body size. Don't put --text-muted on --bg-elevated; that combo fails AA at 14px.
Focus states: keep default browser focus outlines or use outline: 2px solid var(--accent); outline-offset: 2px;. Don't outline: none without a replacement.
Motion: no auto-playing animation. Pulse/fade only when it communicates state (e.g. .live-dot in pricing mock).

Dark mode

All shell pages support dark mode automatically. To add a theme toggle on a new page, set data-theme on <html> at load time based on localStorage.getItem('finn-theme'), and flip it on a toggle button click. The landing page shows the canonical pattern.

File locations

/brand.css — the stylesheet (source of truth)
internal/agentready/static/brand.css — repo source
internal/agentready/docs.go — Go renderer that emits the shell for markdown pages
internal/agentready/static/index.html — landing page (references brand.css)
prototypes/ — HTML mockups that originated these tokens