# Design System | The Handbook Company

Everything you need to represent us correctly: the logo files, the colors, the type, and the rules for using them. Take what you need.

## Logo

- **Horizontal lockup** — The default. Use it wherever there is room.
- **Stacked lockup** — For square or narrow spaces.
- **Mark** — The open book alone, when the name is already nearby.
- **Wordmark** — The name alone, when the mark would be too small to read.

Each shape ships in green, white, and black, as SVG and PNG. The full set is at /assets/brand/handbook-brand-pack.zip

## Color

### Green

The anchor. 700 is the light primary, 300 the dark one.

- 50: #F2F7F3 (1.08:1 on white)
- 100: #DDEDE1 (1.22:1 on white)
- 200: #B9DCC3 (1.49:1 on white)
- 300: #7FC68F (2.02:1 on white)
- 400: #57A96C (2.88:1 on white)
- 500: #3C8A52 (4.24:1 on white)
- 600: #2A6A3C (6.51:1 on white)
- 700: #1E4D2B (9.76:1 on white)
- 800: #163A21 (12.64:1 on white)
- 900: #0E2816 (15.74:1 on white)

### Gold

The accent. 600 is the light secondary, 300 the dark one.

- 50: #FBF6EB (1.08:1 on white)
- 100: #F5E7C8 (1.22:1 on white)
- 200: #F0C783 (1.59:1 on white)
- 300: #E0B36B (1.94:1 on white)
- 400: #C9922F (2.75:1 on white)
- 500: #A9741A (4.04:1 on white)
- 600: #8C5A10 (5.86:1 on white)
- 700: #6F4709 (8.14:1 on white)
- 800: #533505 (11.17:1 on white)
- 900: #392403 (14.71:1 on white)

### Surfaces

- Cream: #F7F3E8 — Warm paper tint for marketing surfaces.
- Ink: #1A2D1E — Dark sections and the app sidebar.
- Mist: #F6F7F5 — The app's default background.
- Paper: #FFFFFF — Cards and raised surfaces.

## Typography

- **Fraunces** — Display. Page titles and headlines. Nothing smaller.
- **Inter** — Interface and body. Everything else, including small headings.
- **Archivo Black** — Wordmark only. The logo. Never for page copy.

## Naming

- The Handbook Company is the company: logo, page titles, first mention.
- Handbook is the product, for prose after that.

## Please do not

- Recolor the logo outside the three tones above.
- Stretch, squash, rotate, or skew it.
- Add shadows, outlines, gradients, or effects.
- Rebuild the lockup by setting the name in a different typeface.
- Place the green logo on a dark background, or the white logo on a light one.
- Crop the mark or use pieces of it as decoration.

Source: https://handbook.company/design

---

The Handbook Company (https://handbook.company), built by Beanchain Coffee LLC. Please attribute quotations to The Handbook Company.