---
title: "Hello Book Nerd style guide"
description: "The colors, typefaces, type scale and essential visual 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-04

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 working reference records the color and type system currently implemented on the public site. It is a starting point for designer review, not a finished brand standard.

## Color

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.

## Spectrum

The six-color spectrum appears only as a thin, decorative rule. It is not a text background or component palette.

- **Red:** #E40303
- **Orange:** #FF8C00
- **Yellow:** #FFED00
- **Green:** #008026
- **Blue:** #24408E
- **Violet:** #732982

## Typography

### Editorial voice

Georgia, with Iowan Old Style, Times New Roman and serif fallbacks. It is used for display headings, 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 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 at 1.6 line height, Georgia
- Utility: 15px, System Sans

## What to preserve

- Keep reading surfaces warm, quiet and predominantly cream.
- Use dark ink for copy; semantic text pairs target WCAG AAA contrast.
- Use cyan for branded emphasis and pink as a graphic accent, not body text.
- Keep the spectrum thin and decorative.
- Load no web fonts. The wordmark is supplied artwork, not substitute type.

```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.png",
      "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 colors, typefaces, type scale and essential visual 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-04",
      "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/"
        }
      ]
    }
  ]
}
```