Brand guidelines
How Peperossa looks and sounds: the logo, the colours, the type and the voice, and the files to use them. Everything here is made from one file, tokens.json, so the website, the documentation and the product stay in step.
- PrecisePeperossa is a print tool. Say exact things: sizes, colours, what passes preflight. Show the real product.
- PlainSay what it does in words a buyer and a developer both understand. No buzzwords, no hype.
- WarmPaper, ink and spice: warm neutrals, one red, and room to breathe. Friendly, never cute.
Logo
The logo is a sweet red pepper and the name on two lines, pepe in ink over rossa in pepper red, in lower case, set in Montserrat SemiBold and drawn as outlines; the pepper’s body is as tall as the two lines. Use it as it comes from the logo pack: never retype the name.
Full colour on paper is the logo. Use full colour on dark on ink and dark photos, reversed on pepper red, one colour where only black prints, and the Peperossa Red version for one-ink print jobs. One-colour versions keep a gap between the calyx and the pod, so the background shows through.
The symbol
The pepper on its own is for small spaces: the browser tab, app icons, a social avatar. Next to other logos, use the full logo.
16 px
24 px
32 px
64 px
128 px
Clear space and size
Keep clear space as tall as the wordmark’s x-height (the height of the a) on every side. On screen the logo is at least 40 px tall and the symbol at least 16 px; in print the logo is at least 12 mm tall and the symbol 5 mm.
Don’t
Colour
Pepper red is the brand. It is the one colour for actions: buttons and the main link of a page. Deep red takes its place for red text on light backgrounds and light red on dark ones, where pepper red itself is too weak for small text. Stem green and saffron are supporting colours for accents, charts and illustrations; saffron is never text on white.
- HEX
- #D73A21
- RGB
- 215 58 33
- CMYK
- 0 86 90 9
- Lab
- 49.8 60.7 51.6
- Pantone
- PANTONE 485 C (nearest, ΔE 2.1)
- Spot
- Peperossa Red
- HEX
- #B3261E
- RGB
- 179 38 30
- CMYK
- 0 92 86 28
- Lab
- 40.4 55.7 42
- HEX
- #F47454
- RGB
- 244 116 84
- CMYK
- 0 66 68 0
- Lab
- 64.3 48.6 41.9
- HEX
- #3E6B48
- RGB
- 62 107 72
- CMYK
- 64 11 66 51
- Lab
- 41.2 -22.5 14.6
- HEX
- #E8A33D
- RGB
- 232 163 61
- CMYK
- 2 38 81 7
- Lab
- 72.6 19.9 60.8
Neutrals
Warm greys from paper to ink carry most of every page.
#FAF7F4
#F3EEE9
#E7E0D9
#D2C7BD
#ADA096
#8A7C72
#6B5E55
#514740
#362F2A
#1F1A17
CMYK values are calculated for FOGRA39 (coated offset), Peperossa’s own printing condition; Lab values under D50. PANTONE 485 C is the nearest Pantone colour to pepper red by calculation (ΔE 2000 2.1): check it against a printed Pantone guide before printing. In Peperossa templates and our print files pepper red is the spot colour Peperossa Red, printed as CMYK 0 86 90 9 where spots aren’t used.
Text and background
Each theme names what colours are for. These pairs meet WCAG AA (4.5 : 1) for normal text.
| Theme | Text | Background | Contrast | WCAG |
|---|---|---|---|---|
| light | text | background | 16.15 : 1 | AA |
| light | text | surface | 17.24 : 1 | AA |
| light | text-muted | background | 5.86 : 1 | AA |
| light | text-muted | surface | 6.25 : 1 | AA |
| light | link | background | 6.12 : 1 | AA |
| light | link | surface | 6.54 : 1 | AA |
| light | on-action | action | 4.65 : 1 | AA |
| dark | text | background | 16.15 : 1 | AA |
| dark | text | surface | 12.32 : 1 | AA |
| dark | text-muted | background | 10.38 : 1 | AA |
| dark | text-muted | surface | 7.92 : 1 | AA |
| dark | link | background | 6.13 : 1 | AA |
| dark | link | surface | 4.68 : 1 | AA |
| dark | on-action | action | 4.65 : 1 | AA |
Type
Montserrat SemiBold
Headings and the wordmark. Bold for the hero headline only.
Inter Regular and Medium
Body text and the interface. Medium for labels and buttons.
One scale for screen and print, each step 1.25 times the last: 16 px on screen and 10 pt in print are the body size. Body text has a line height of 1.5, headings 1.15. Both fonts come with Peperossa and are free to use (SIL Open Font License).
| Step | Screen | Sample | |
|---|---|---|---|
| xs | 13 px | 8 pt | Peperossa |
| base | 16 px | 10 pt | Peperossa |
| lg | 20 px | 12.5 pt | Peperossa |
| xl | 25 px | 15.6 pt | Peperossa |
| 2xl | 31 px | 19.5 pt | Peperossa |
| 3xl | 39 px | 24.4 pt | Peperossa |
| 4xl | 49 px | 30.5 pt | Peperossa |
Voice
Plain, precise, confident without hype. Say what Peperossa does and give real numbers. Talk to the reader as you. Write British English: colour, licence, organise, centre.
DoPrints with spot colours and passes PDF/X-4 preflight.
Don’tRevolutionary, AI-powered document magic.
DoThe text shrinks to fit its frame, down to 70 %.
Don’tSeamlessly optimise your content experience.
DoYou publish a template, then render it through the API.
Don’tUsers can leverage our API to unlock value.
DoRequest early access. We reply within two working days.
Don’tJoin the waitlist for the future of documents!
Imagery and screenshots
Show the real product. Screenshots are made by our checks from showcase templates, so they never go out of date; frame them on paper with a soft shadow and rounded corners. No stock photos and no made-up screens.
Examples in use
Brand-safe documents from your data.
Design a template once, then print-ready PDFs from it, as many as you need.
Print-ready PDFs from your templates and your data.
Downloads
- Logo pack (ZIP): 36 files, every version as SVG and PNG, favicons, app icons, and
peperossa-logo-print.pdf(PDF/X-4) with the logo and the symbol in the spot colour Peperossa Red, for printers. - Brand guidelines (PDF): these guidelines as a PDF, made as a Peperossa template from the brand kit and rendered through Peperossa’s API.
- Design tokens (JSON): Design Tokens Community Group format, and the same as CSS variables in
tokens.css.