# WeMakeCode brand kit: how to use it

**The logo is `wemake/code`. The name is `WeMakeCode`.**
Brand page (light/dark switch, every image): https://claude.ai/artifact/JzW1yFpaYWd8MFB3wu4PdS

## The name

| Write | Never |
|---|---|
| `WeMakeCode`: one word, no spaces, no full stop after it | `We Make Code`, `We make code.`, `WeMakeCode.` as a headline |
| `WeMakeCode (OPC) Private Limited` (legal) | the slash in running text (`wemake/code` is the logo only) |
| `wemakecode.net`, `@wemakecode`, `wemakecode/<repo>` | |

The slash names services and campaigns, set in Rubik ExtraBold, lowercase, with an orange slash: `wemake/apps`, `wemake/data`, `wemake/cloud`, `wemake/ai`, `wemake/careers`.

## Logo files (`logo/` masters, `export/` everything else)

| Mark | Use it for |
|---|---|
| `wordmark` | Default everywhere it fits: site header, documents, signage |
| `stacked` | Square or tall spaces: social posts, posters, covers |
| `icon` (`w/`) | Anything under ~120 px wide: favicon, avatar, app icon, watermark |
| `app-icon` | The icon on a light, dark or orange tile; rounded, square and circle shapes |

Each comes in four versions: `full-color-light` (for light backgrounds), `full-color-dark` (for dark backgrounds), `mono-black`, `mono-white`.

| Format | Background | Use |
|---|---|---|
| `svg/` | transparent | Web, Figma, Illustrator: scales to any size |
| `pdf/` | transparent | Print, Word, PowerPoint, printers |
| `png/` (512, 1024, 2048, 4096 px wide) | transparent | Anywhere else |
| `webp/` (same sizes) | transparent | Websites, smaller files |
| `jpg/` (2048 px) | brand paper or ink | Places that can't handle transparency |

`export/web-icons/` contains `favicon.ico`, `favicon.svg`, `apple-touch-icon.png`, `icon-192/512.png`, `maskable-512.png` and `site.webmanifest`. Paste `head-snippet.html` into your site's `<head>`.
`export/social/` has profile pictures (400 and 800 px; dark, light and orange), link preview 1200×630, LinkedIn 1584×396, X 1500×500, YouTube 2560×1440, post 1080×1080, story 1080×1920 and an email-signature logo.
`export/wallpapers/` has six designs (minimal-dark, minimal-light, icon-orange, slash-pattern, statement, code) for iPhone, Android, 1080p, 1440p, MacBook and 4K.
`mockups/` has the 24 placement previews (files ending in `-4k` are 5504 px wide). They are AI previews; the logo files are the source of truth.

## Colour

| Name | Hex | Use |
|---|---|---|
| Ink deep | `#0c0a09` | Dark-mode background |
| Ink | `#1c1917` | Text and logo on light |
| Paper | `#fafaf9` | Light background |
| Paper soft | `#f5f5f4` | Logo and text on dark |
| Orange | `#ea580c` | The slash on light; primary buttons |
| Orange bright | `#f97316` | The slash on dark |
| Stone | `#78716c` | Secondary text |

Orange is the slash and small UI accents only. Don't add an orange full stop or a second orange element next to the logo.

## Type

- **Rubik ExtraBold 800**: logo (already outlined in every file) and headlines.
- **Rubik Regular 400 / Medium 500**: body text.
- **Geist Mono 400**: code, labels, invoice numbers, small print.

Both are free under the SIL Open Font License (Google Fonts).

## Rules

- **Clear space:** a quarter of the logo's height on every side. It's built into every file, so place files edge to edge.
- **Minimum size:** wordmark 120 px on screen and 30 mm in print; below that, use the `w/` icon (it works down to a 16 px favicon).
- **Backgrounds:** full colour on paper or ink; one-colour black or white (or the app-icon tile) on photos and on orange.
- **Don't** stretch, recolour, retype, outline, add shadows to, or rearrange the logo.

## Before launch

Run a trademark search (Indian Trade Marks Registry, WIPO Global Brand Database) and a reverse image search on the wordmark before printing at scale.