The design notebook
Our style notebook
A reading journal full of real places. Rounded titles, colorful sections in light mode and photographic collages invite exploration. Dark mode uses neutral surfaces; the longer stories keep their comfortable reading type.
- Identity
- Outlined name artwork only
- Editorial
- Rounded titles · Georgia for reading
- Interface
- System sans for navigation and facts
- Color
- Light tints · neutral dark surfaces
Choose Light, Dark or Auto from the appearance menu in the header. Auto follows your device. Your choice stays in this browser; both palettes keep reading text and navigation at the same contrast standard.
01 / Identity
Lead with the name. Let the face make a cameo.
The outlined name is the everyday signature. The full face is the memorable supporting mark: present once on the About page and in the Google public-review profile—not repeated through the masthead or stories. The favicon is a tighter optical crop of the same blue-on-paper treatment.
Primary masthead · ink on paper
Use the ink wordmark on warm paper in the site masthead and on other cream or white fields. Give its rounded letterforms enough width to read with confidence.
Brand-blue name · large use only
Reverse option · dark fields
Full face cameo · About only
Favicon · tighter optical crop
Google profile · circular-crop safe
Approved Google public-review profile
Hello Book Nerd
Independent field notes on bookshops and libraries worth a stop, a detour, or the trip. We visit in person, score consistently, and tell readers who each place is for.
- Artwork
- 1024 × 1024 PNG
- Crop
- Keep the face entirely inside the circular safe area
- Background
- Warm paper, never transparent or brand blue
02 / Color
Color you can explore.
Cream and ink do the reading work. Yellow, pink and blue create recognition and moments of delight. Functional blue does the link and control work that bright blue cannot.
Identity triad
Highlight yellow
#FFFF00 · --brand-yellow
Flat action fills and the home headline highlight; may carry dark ink text.
Energy pink
#FF00A9 · --brand-pink
Photo shadows and current-page underlines; never normal-size text.
Brand blue
#00ACFF · --brand-blue
The face mark and large graphic accents; never normal-size text.
Functional blue
#00517A · --functional-blue
Accessible links, controls and focus treatment on cream.
Paper and ink
Ink
#25221D · --ink
Headings, body copy, controls and focus indicators.
Cream
#FFFCF5 · --cream
The light reading-page background.
Quiet ink
#514B42 · --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 tints
Soft blue
#D7F3FF · --blue-soft
Accessible cool panels behind dark ink.
Soft pink
#FFE0F4 · --pink-soft
Accessible warm panels behind dark ink.
Soft yellow
#FFFFD6 · --yellow-soft
Accessible highlight panels behind dark ink.
Deep pink
#8A005C · --pink-dark
Rare semantic pink when color must carry text.
Dark reading palette
Charcoal
#191B1C · --bg
The dark reading-page background.
Warm text
#F6F1E7 · --text
Headings, body copy and navigation.
Quiet text
#CAC5BA · --text-quiet
Supporting notes and metadata.
Reading blue
#8ED8FF · --accent
Accessible links on dark reading surfaces.
Raised charcoal
#242829 · --surface
Quiet panels, table heads and the footer.
Panel charcoal
#202425 · --panel
Cards, the collage frame and the method note.
Label grey
#33393B · --chip-1
Every place label in dark mode; one neutral instead of tints.
03 / Three-color signature
Three colors. Lots of personality.
The former six-color spectrum is retired. The approved triad appears in the signature rule, yellow buttons and photo edges. Light mode keeps blue, pink and yellow section tints; dark mode uses charcoal, surface and panel neutrals.
Color in context
Recognition comes from placement, not volume.
Yellow asks for action, pink brackets the photograph and blue signs the edge. The quieter functional blue remains reserved for links and controls.
04 / Typography
Identity, storytelling and interface each get one job.
Identity voice
Outlined wordmark
Avenir Next Medium outlines, derived from the approved visual. Reserved for the proper name; never used for headings or body copy.
Display voice · Rounded
Your next book spot.
Big, friendly titles
Arial Rounded MT Bold, ui-rounded, Trebuchet MS, sans-serif.
Headings and place names. No handwriting outside the map: captions and useful notes use system sans or ordinary lead type. The Field Map keeps its approved handwritten notes. All fonts come from the reader’s device.
Editorial voice · Georgia
A good bookshop is an afternoon with a front door.
Georgia first
Georgia, Iowan Old Style, Times New Roman, serif
Leads, body copy, quotations, scores and the search field. Body copy is 18px with a 1.6 line height and a 62-character reading measure.
Interface voice · System sans
FIELD GUIDE · VISITED 9 AUGUST 2026
System sans
system-ui, -apple-system, Segoe UI, Roboto, sans-serif
Navigation, labels, metadata, facts and evidence furniture, normally at 15px and 750–800 weight.
Current type scale
- Wordmark
- Artwork
- Outlined Avenir Next Medium
- Home title
- 44–76px
- Rounded bold
- Location title
- 36–56px
- Rounded bold
- Featured place
- 28–36px
- Rounded bold
- Page title
- 40–72px
- Rounded bold
- Section title
- 24–34px
- Rounded bold
- Subhead
- 21px
- Rounded bold
- Lead
- 19–23px
- Georgia
- Body
- 18px / 1.6
- Georgia
- Utility
- 15px
- System sans
05 / Desktop application
The publication still leads with the story.
The wordmark signs the page; it does not become the page's typography. On a soft blue field, the promise carries the one highlighter and a flat yellow browse action follows. Beside it, the latest visit arrives as a collage with captions, its name, city and BookScore, and the pink shadow. The field guide, its map and a three-column collection follow.
01 · Name first
A signature, not a headline font.
The wordmark owns one calm position in the masthead. Rounded titles give the journal its friendly voice.
02 · Energy at the edge
Frame the evidence.
One pink offset shadow frames the photograph. No tape, tilts or extra colored corners compete with it.
03 · Controls stay clear
Blue means interface.
Functional blue distinguishes secondary actions without asking bright brand blue to carry small text.
06 / Mobile application
Compact enough to travel.
On a phone the name sits above one row of plain navigation. A location page leads with a small-caps label, the rounded title, one line on why to go and its place labels, then the framed cover photograph and a bordered scorecard. The score is evidence, not decoration.
The approved name, supplied as artwork.
The plate name remains compact, preserving the site's editorial hierarchy.
Pink frames evidence.
It adds energy behind the photograph without coloring the prose.
Yellow signals action.
Use it for a flat action button or the home headline highlighter, with ink text.
07 / Component examples
The same hierarchy survives the small moments.
One playful gesture per component, and about two per screen. Buttons are flat yellow pills with ink borders and no offset shadow. Cards and buttons lift slightly on hover when reduced motion is off.
Primary action
Flat yellow pill · ink border · no shadowEditorial pull quote
“A good bookshop gives the afternoon a front door.”Georgia Bold · ink on quiet paper
Place metadata
- Visited
- 25 July 2026
- Place
- Raleigh, North Carolina
Navigation underline
Place labels
Children’s booksStaff picksCoffee
Soft blue, pink and yellow tints in light · one neutral grey in dark · ink or warm textScorecard
84.0BookScore, out of 100
Outstanding
4 reviewers · totals 74–95
08 / Field Map
An explorer’s chart, not a GPS.
The map sits in the field guide between “Pick your next stop” and the filters, and the filters drive it. It is drawn as an engraved chart for grown-up readers: cream paper, fine ink and italic serif names. This is the one place where handwritten notes and small jokes still belong.
- Labels
- Small-caps city line over an italic serif shop name and score, on a paper halo. No boxes or stickers.
- Chart details
- Compass rose, title cartouche, water-lining, hills, a ship and a sea serpent reading a book. The triad appears only as accents: pink pins and frame shadow, a yellow focus ring.
- Detail levels
- World atlas, then wide and regional roads, then an engraved OpenStreetMap street plan. OpenStreetMap takes over where the hill symbols disappear.
- Controls
- 32px visual controls with 44px hit areas: joined + and −, a crosshair for Show all, and a gestures pill on touch screens.
- Street insets
- About 1.6 km around each shop with street names, a compass rose and a frame. Each links to that shop on the home map.
- Credits
- OpenStreetMap geometry under ODbL 1.0; Natural Earth is public domain.
Chart palette · light, then candlelit dark
- Paper land #FFFCF5
- Sea #D7F3FF
- Ink #25221D
- Parchment #2B251D
- Ink-blue sea #16303A
- Cream ink #EFE4CC
- Gold highways #6E5B2A
Dark mode is a candlelit chart, not the site’s charcoal. The map, its frame and the street insets carry their own palette.
09 / Spacing and size
Give the signature room.
- Wordmark clear space
- ½ the capital-H height on every side
- Name wordmark
- 180px digital · 45mm print
- Combined lockup
- 190px digital · 50mm print
- Mark alone
- 24px digital · 8mm print
- Favicon crop
- 16px digital minimum
10 / Application rules
What to preserve.
- Use one playful gesture per component, and about two per screen. Let photographs, writing and the logo carry the personality.
- Keep light section tints; use neutral backgrounds in dark mode. The Field Map keeps its own approved chart palette.
- Use plain text navigation with a flat pink underline just below the current page label. Field guide is a same-page anchor on home, not a current page. Keep the appearance icon borderless and every navigation target at least 44px tall.
- Give place labels soft tints in light mode and one neutral grey in dark mode. Scorecards take an ink border and no shadow.
- Keep the Field Map an engraved chart: italic serif labels on halos, the triad only as accents, and its own candlelit dark palette. Handwriting and map jokes stay inside the map.
- Use flat yellow buttons with an ink border. Keep one home headline highlighter, pink photo shadows and the place cards’ colored bottom edges.
- No handwriting outside the map; no ribbons, tape, tilts, decorative stars or dashed frames.
- Use dark ink for copy; semantic text pairs target WCAG AAA contrast.
- Use functional blue for links and controls—not bright brand blue.
- Only yellow may carry normal-size ink text. Bright pink and blue remain graphic-only.
- Reserve yellow fills for actions and the headline highlight. Palette swatches document the colors; light section tints remain soft.
- Use the appearance menu for Light, Dark or Auto. Auto follows the device; a saved choice applies across pages. Keep the masthead static and flat, with the ink wordmark in light mode and its reverse in dark mode.
- Use the supplied outlined wordmark; never retype it or load a webfont for it.
- Keep the full face to one About-page cameo. The favicon and Google review image use the same blue-on-paper profile treatment, with a tighter favicon crop.
- Do not stretch, recolor individual letters, add effects or recombine the mark and name.