# Paperkraft brand kit

**Paperkraft · Docs, crafted.**

The identity has two parts:

- **The icon** is a docs site in miniature. On the left is a sidebar with the current page highlighted, and on the right are lines of content. It says "documentation" at a glance, which is the whole product.
- **The wordmark** is "paperkraft" in Outfit Medium, ending in a **folded full stop**. That's a small square with its corner turned in, like a sheet of paper. It's the full stop of "Docs, crafted."

All SVGs have the lettering converted to outlines, so they render the same everywhere without the font installed.

## Folders

| Folder | What's inside | Use it for |
|---|---|---|
| `logo/` | `lockup-*` (icon + wordmark) and `logo-*` (wordmark only), as SVG plus PNGs at 320–2560 px | Website header, docs, decks, email signature, invoices |
| `icon/` | `icon-*` app tiles (orange / ink / light, rounded or square) and `symbol-*` (no tile) | App icon, GitHub/Slack app, marketplace listings |
| `favicon/` | `.ico`, `.svg`, PNGs, Apple/Android icons, manifest, `<head>` snippet | Browser tab and home screen |
| `social/` | Avatar, Open Graph image, LinkedIn and X headers | Profiles and link previews |

## Which logo to use

| Situation | File |
|---|---|
| Website/app header, decks, partner pages | `lockup-primary` (default) |
| Dark backgrounds | `lockup-reversed` |
| Tight horizontal space, text already says what it is | `logo-primary` (wordmark only) |
| Square spaces (avatar, app, favicon) | `icon-orange-rounded` |
| One-colour print | `logo-mono-black` / `logo-mono-white` |

Wordmark-only versions: `logo-primary`, `logo-reversed`, `logo-on-orange`, `logo-mono-black`, `logo-mono-white`.

## Icon sizes

The icon has **two cuts**:

- **Full icon** (3 nav items + 3 lines): use it at **48 px and larger**.
- **Favicon cut** (1 active item + 2 thick lines): use it **below 48 px**. It's in `favicon/` and was drawn to stay readable at 16 px.

| Where | Size | File |
|---|---|---|
| Browser tab | 16 / 32 px | `favicon.ico`, `favicon.svg` |
| iPhone home screen | 180 px | `apple-touch-icon.png` |
| Android / PWA | 192 / 512 px | `android-chrome-*.png` |
| Slack / GitHub app, integrations | 512 px | `icon-orange-rounded-512.png` |
| Social avatar (circle crop safe) | 400 px | `social/avatar-400x400.png` |
| App store / large | 1024 px | `icon-orange-square-1024.png` (the store rounds the corners) |

## Logo sizes

| Where | Size |
|---|---|
| Website header | lockup 140–180 px wide (mobile 120 px) |
| Docs site / app sidebar | lockup 130–150 px wide |
| Email signature | lockup 160 px wide (use the 320w PNG) |
| Slides | 10–14% of slide width |
| Print | 35–45 mm wide |
| **Minimum** | lockup 100 px / 25 mm; wordmark alone 80 px / 20 mm. Smaller than that, use the icon |

## Clear space

Keep space equal to the **height of the folded stop** clear on every side of the wordmark. For the lockup and icon, use **one quarter of the icon's height**.

## Colours

| Name | Hex | Role |
|---|---|---|
| Paperkraft Orange | #C2410C | Icon tile, stop, buttons, links |
| Ember | #9A3412 | Icon sidebar, hover states |
| Ink | #1C1917 | Wordmark, text, dark backgrounds |
| Paper | #FAF8F5 | Page background |
| Bright Orange | #F97316 | Accents on dark backgrounds only |
| Peach | #FED7AA | Accents on orange only |

## Typeface

**Outfit** (free, [Google Fonts](https://fonts.google.com/specimen/Outfit)):

- **Wordmark:** Outfit 500, −3.5% letter-spacing, always lowercase.
- **Headings:** Outfit 600, −2% letter-spacing.
- **Body:** Outfit 400, 16–18 px, 1.5 line height.
- **Code and labels:** JetBrains Mono (optional).

## Don'ts

- Don't change the icon's layout, such as moving the sidebar to the right or adding lines.
- Don't use the full icon below 48 px. Use the favicon cut instead.
- Don't swap the folded stop for a normal period, or remove it.
- Don't capitalise the wordmark. In sentences, write "Paperkraft".
- Don't stretch, rotate, outline, or add shadows or gradients.
- Don't put the orange icon on an orange background. Use the ink icon there.

## Favicon setup

Copy everything in `favicon/` to your site's public root, then paste `favicon/head-snippet.html` into your `<head>`.