Working reference · for designer review
Hello Book Nerd style guide
The color and type system currently in use on the public site. This records the implementation as it exists; it is a starting point for critique, not a finished brand standard.
01 / Color
A book page with bright marginalia.
Warm paper and dark ink do the reading work. Cyan and pink carry the identity; pale tints and a thin spectrum add emphasis without turning the page into a poster.
Brand anchors
Hello Book Nerd cyan
#1BD3E1 · --brand-cyan
Primary brand emphasis, image edges and selected graphic details.
Hello Book Nerd pink
#EB1D53 · --brand-pink
Graphic accent and rules only; not body text on the paper background.
Link burgundy
#79102C · --accent
Accessible text links, underlines and editorial accents.
Paper and ink
Ink
#25221D · --ink
Headings, body copy, controls and focus indicators.
Cream
#FFFCF5 · --cream
The fixed reading-page background.
Quiet ink
#575148 · --text-quiet
Secondary notes and supporting metadata.
Paper surface
#F5F0E6 · --surface
Quiet panels, table heads and the footer.
Rule
#D9D1C3 · --line
Dividers, borders and low-emphasis structure.
Supporting accents
Soft cyan
#C9F5F9 · --cyan-soft
Tinted cards and cool shadow blocks.
Soft pink
#FFDCE4 · --pink-soft
Tinted cards and warm shadow blocks.
Deep green
#005B20 · --number-2
The second numbered principle on the home page.
Deep blue
#24408E · --number-3
The third numbered principle and spectrum blue.
02 / Spectrum
A rule, not a rainbow wash.
The six-color spectrum appears as a quarter-rem rule at the top and bottom of the site. It is decorative punctuation, not a background for text or a component palette.
03 / Typography
Two voices, both already on the reader’s device.
Editorial voice
A good bookshop is an afternoon with a front door.
Georgia first
Georgia, Iowan Old Style, Times New Roman, serif
Used for display headings, body copy, quotations, scores and the search field. Body copy is 18px with a 1.6 line height and a reading measure of 62 characters.
Interface voice
FIELD GUIDE · VISITED 9 AUGUST 2026
System sans
system-ui, -apple-system, Segoe UI, Roboto, sans-serif
Used for navigation, labels, metadata, facts and evidence furniture. The normal utility size is 15px, commonly set at 750–800 weight.
Current type scale
- Home display
- 48–92px
- Georgia Bold
- Page title
- 40–72px
- Georgia Bold
- Section title
- 24–34px
- Georgia Bold
- Subhead
- 21px
- Georgia Bold
- Lead
- 19–23px
- Georgia
- Body
- 18px / 1.6
- Georgia
- Utility
- 15px
- System Sans
04 / In one minute
What to preserve.
- Keep reading surfaces warm, quiet and predominantly cream.
- Use dark ink for copy; the site’s semantic text pairs target WCAG AAA contrast.
- Use cyan for branded emphasis and pink as a graphic accent, not as body text.
- Keep the spectrum thin and decorative.
- Load no web fonts. The wordmark is supplied artwork, not text to recreate in a substitute face.