Design system
How to represent 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.
Logos in SVG and PNG, three tones each, plus usage notes.
Logo
One mark, four shapes
Pick the shape that fits the space. Every shape ships in three tones.
Clear space and size
Give it room
- Keep clear space around the logo equal to the height of the book mark, on every side.
- Minimum sizes: 24px tall for the mark, 120px wide for the horizontal lockup, 90px wide for the stacked lockup. Below that, use the mark alone.
- The mark on its green disc is the app icon. Use it for avatars and favicons, not as a general-purpose logo.
Color
Green anchors, gold accents
Contrast ratios are measured against white, so you can tell at a glance what is safe for text.
Green
The anchor. 700 is the light primary, 300 the dark one.
Gold
The accent. 600 is the light secondary, 300 the dark one.
Surfaces
Meaning
Typography
Three faces, one job each
Run the whole business
Fraunces — Display. Page titles and headlines. Nothing smaller.
Training, standards, and inventory
Inter — Interface and body. Everything else, including small headings.
THE HANDBOOK COMPANY
Archivo Black — Wordmark only. The logo. Never for page copy.
Fraunces and Inter are open source and available from Google Fonts, as is Archivo Black.
Naming
Two names, used deliberately
- The Handbook Company is the company. Use it for the logo, page titles, and the first mention of us anywhere.
- Handbook is the product, for running prose after that first mention. “Handbook keeps training and standards in one place” reads right.
- Do not use “Beanchain Handbook” or “Handbook Company App”. Both are retired.
Please do not
The short list
- 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.
Need something that is not here?
Ask and we will send it over, or make it.