Brand guide

Build every page on brand.

This page is wired with the Better Human Tools tokens, fonts, and one live example of each core component. Copy the pieces you need.

⬇ Download prompt (.md) ⬇ Download page (.html)
Color tokens

The palette.

Warm cream paper, dense ink, rust accent. Green for confirm, gold for caution. Tokens map 1:1 to CSS variables in src/styles.css.

Accent
#d4460f · --accent
Accent Soft
#faeae4 · --accent-soft
Ink
#111010 · --ink
Paper
#f7f4ef · --paper
Card
#ffffff · --card
Light BG
#efece6 · --light-bg
Rule
#ddd9d2 · --rule
Green
#1a6b45 · --green
Typography

Three faces. One voice.

Fraunces for headlines and italic accents. IBM Plex Sans for body. JetBrains Mono for eyebrows, labels, and code.

Fraunces · 900 · 62px
Build the AI Mind.
Fraunces · 800 · 28px
Section heading goes here
Plex Sans · 400 · 18px
Body copy in Plex Sans. Comfortable for long reads, sits cleanly beside the serif.
Plex Sans · 600 · 15px
UI label or in-line emphasis.
Plex Mono · 600 · 11px
Eyebrow / monospace label
Component gallery

Everything you need, once.

A single working instance of each core component so you can see them on-brand and copy from them.

Buttons
Feature cards (hover to lift)
🎯

Feature One

A short description of what this does, in dim ink, one or two lines.

📊

Feature Two

Cards lift up-left on hover and grow a hard shadow. No blur, ever.

⭐

Feature Three

Icon tile, title, description. The marketing-grid workhorse.

KPI / stat cards
Tools Shipped
87%
up 6 pts WoW
Net Revenue
$94k
up 12% WoW
Active Builders
1,250
9 standout wins
Card with header + pills

📋 Card Title

meta label
Card surface, light-bg header strip, hairline divider. The workhorse container for content and data.

🏷 Tags

pills
LiveInfoWarningRejectCategory
Callout
🤖 AI says

Warm inset with a thick accent left border. Use for AI insights, tips, and highlighted notes.

Form fields + toggle
Tap the toggle, green when on
Banded section

By the numbers.

3x
faster
92%
adoption
1
source of truth
15m
to onboard

Final CTA band.

Accent background, white headline, white button. Closes the page.