---
title: "Hello Book Nerd style guide"
description: "The approved identity, colors, typography and application rules used by the Hello Book Nerd public site."
---

# Hello Book Nerd style guide

Canonical URL: https://www.hellobooknerd.com/styleguide/

Last modified: 2026-09-26

Original Hello Book Nerd editorial text is licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). Photographs, logos, trademarks, reviewer quotations and third-party material are excluded.

This is the operator-approved production standard for the public site. The identity is playful; the reading experience remains adult, literary and calm.

## Appearance

The header offers Light, Dark and Auto. Auto follows the device setting; a chosen mode is saved in this browser across pages. Light uses warm paper and ink; Dark uses charcoal and warm light text. Both palettes meet the same reading contrast standard. Without scripts, the device preference still applies. Printed pages use the light palette.

## Identity

The standalone name wordmark is the primary public signature. Its ink form appears on warm paper in Light mode; its reverse form appears on charcoal in Dark mode. It is outlined artwork, not live site typography. The approved visible Latin lettering is Avenir Next Medium: the Kohinoor Gujarati concept reference has no Latin alphabet in the installed face, so the approved study rendered its Avenir Next fallback.

The full face is a supporting cameo, reserved on the public site for one appearance on the About page. The favicon and Google review image use the same blue-on-paper profile treatment, with a tighter crop for the favicon. The approved Google profile uses the display name Hello Book Nerd and the 167-character bio: 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. Combined face-and-name lockups are for rare campaign or partner contexts, not routine page chrome. Minimum digital widths are 180px for the name, 190px for a combined lockup and 24px for the face. Keep clear space around the name equal to half its capital-H height.

## Color

Warm paper and dark ink do the reading work. Yellow, pink and bright blue carry recognition and graphic energy. Soft tints support readable panels; functional blue handles links and controls.

### 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.

## Three-color signature

The former six-color spectrum is retired. The yellow, pink and blue triad appears as the thin signature rule and as flat yellow buttons and photo edges. Light sections keep their soft tints; dark sections use neutral backgrounds.

- **Highlight yellow:** #FFFF00
- **Energy pink:** #FF00A9
- **Brand blue:** #00ACFF

## Typography

### Identity voice

The proper-name wordmark is supplied as outlined SVG artwork. Do not retype it, substitute it or use its sans-serif lettering elsewhere.

### Display voice

Arial Rounded MT Bold, ui-rounded, Trebuchet MS, sans-serif. Used for headings and place names. No handwriting outside the map: captions use system sans and useful notes use normal lead type. The Field Map keeps its approved handwritten notes. All fonts come from the reader’s device.

### Editorial voice

Georgia, with Iowan Old Style, Times New Roman and serif fallbacks. It is used for 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

The device's system sans, with -apple-system, Segoe UI, Roboto and sans-serif fallbacks. It is used for navigation, labels, metadata, facts and evidence furniture, normally at 15px and 750–800 weight.

### Current type scale

- 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 at 1.6 line height, Georgia
- Utility: 15px, System Sans

## Desktop application

The style guide shows the live home page at 1440px, scaled to fit, so the example is always the current design. The ink name-only wordmark signs one calm masthead with plain system-sans navigation. On a soft blue field, the promise carries the one yellow highlighter on “book spot.” 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; the method note comes after the places.

## Mobile application

The style guide shows the latest location page live at 390px. On a phone the name sits above one row of plain navigation (there is no menu button). 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 face mark does not return simply because the viewport is smaller.

Catalogue cards lead with full-width photographs above the name and city, then give a short synopsis and source-backed labels their own space. The grid becomes two columns on tablets and one on phones.

## Component examples

Primary actions are flat yellow pills with ink borders and no offset shadow. Pull quotations use Georgia on quiet paper. Place facts use compact system sans. Navigation uses plain text and a flat 3px pink underline just below the current page label, with a 1px underline on hover. The theme icon is borderless. Field guide is an anchor on home, never a current page. Keep 44px navigation targets and visible focus rings.

Place labels are small system-sans pills: soft blue, pink and yellow tints in light mode, one neutral grey (`--chip-1`) in dark mode. The scorecard has an ink border on a panel and no shadow; the number is evidence, not decoration.

## Field Map

The map sits in the home field guide between “Pick your next stop” and the filters, and the filters drive it. It is an engraved explorer’s chart for grown-up readers, not a GPS: cream paper, fine ink and italic serif names. It is the one place where handwritten notes and small jokes still belong.

- **Labels:** a 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 on its location page, with street names, a compass rose and a frame, linking to that shop on the home map.
- **Palette:** light is paper land #FFFCF5, sea #D7F3FF and ink #25221D. Dark is a candlelit chart, not the site’s charcoal: parchment #2B251D, ink-blue sea #16303A, cream ink #EFE4CC and gold highways #6E5B2A.
- **Credits:** OpenStreetMap geometry under ODbL 1.0; Natural Earth is public domain.

## Application rules

- One playful gesture per component, and about two per screen.
- No handwriting outside the map; no ribbons, tape, tilts, stars or dashed frames.
- Keep light section tints; use neutral backgrounds in dark mode. The Field Map keeps its approved palette.
- 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, its own candlelit dark palette. Handwriting and map jokes stay inside the map.
- Use dark ink for copy; semantic text pairs target WCAG AAA contrast.
- Bright pink and bright blue are graphic-only; neither holds normal text.
- Yellow may carry ink text. Soft tints may carry ink text.
- Use functional blue, not brand blue, for links and controls.
- Yellow fills mark actions and the home headline highlight. Keep pink photo shadows and colored card bottoms.
- Gentle hover movement runs only when reduced motion is off.
- Match the masthead to the chosen appearance: ink on paper in Light, the reverse wordmark on charcoal in Dark. Auto follows the device. Keep it static, flat and shadow-free.
- Reserve the full face on-site for one About-page cameo. Use the same blue-on-paper profile treatment for the favicon and Google reviews, with a tighter crop for the favicon.
- Load no web fonts. The wordmark is outlined artwork.

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://www.hellobooknerd.com/#organization",
      "name": "Hello Book Nerd",
      "url": "https://www.hellobooknerd.com/",
      "logo": "https://www.hellobooknerd.com/assets/wordmark.svg",
      "description": "Literary travel field notes about bookshops and libraries."
    },
    {
      "@type": "WebSite",
      "@id": "https://www.hellobooknerd.com/#website",
      "url": "https://www.hellobooknerd.com/",
      "name": "Hello Book Nerd",
      "publisher": {
        "@id": "https://www.hellobooknerd.com/#organization"
      },
      "inLanguage": "en-US",
      "license": "https://creativecommons.org/licenses/by/4.0/"
    },
    {
      "@type": "WebPage",
      "@id": "https://www.hellobooknerd.com/styleguide/#webpage",
      "url": "https://www.hellobooknerd.com/styleguide/",
      "name": "Hello Book Nerd style guide",
      "description": "The approved identity, colors, typography and application rules used by the Hello Book Nerd public site.",
      "isPartOf": {
        "@id": "https://www.hellobooknerd.com/#website"
      },
      "publisher": {
        "@id": "https://www.hellobooknerd.com/#organization"
      },
      "datePublished": "2026-09-02",
      "dateModified": "2026-09-26",
      "inLanguage": "en-US",
      "license": "https://creativecommons.org/licenses/by/4.0/"
    },
    {
      "@type": "BreadcrumbList",
      "@id": "https://www.hellobooknerd.com/styleguide/#breadcrumbs",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Hello Book Nerd",
          "item": "https://www.hellobooknerd.com/"
        }
      ]
    }
  ]
}
```