# MakeMode — Brand Kit Everything you need to represent MakeMode consistently: logos, colour, type, and the rules for using them. This kit is the **applied** side of the program-wide design system (`site/design/DESIGN-SYSTEM.md`); if you're styling a product surface, read that too. If you're placing a logo in a deck, a partner page, or a press item, this file is enough. > **Live showcase:** open `site/brand/brand-kit.html` in a browser — every asset below is > shown at size with a download link. --- ## 1. The idea in one line MakeMode lets non-coders **turn a vision into real, working software** — built and hosted in the EU. The brand has to feel like that promise: **honest, structural, human, European.** Not AI-hype, not startup-slick. The visual language is **Bauhaus + De Stijl, made readable.** --- ## 2. The logo The logo has two parts that can travel together or apart: - **The mark** — the triad: a **yellow triangle · red square · blue circle** (the Kandinsky/Itten shape-to-colour mapping). It is the smallest expression of the brand. - **The wordmark** — **`makemode`**, always lowercase, one word, set in **Jost** (an open, OFL-licensed geometric grotesque in the Futura lineage). The **`mode`** is in brand blue; **`make`** is ink. Never capitalise it as "MakeMode" *in the wordmark* — sentence-case "MakeMode" is fine in running prose. ### Variants (in `logo/`) | File | Use | |---|---| | `lockup-horizontal-color.svg` | **Primary logo.** Mark + wordmark, side by side. | | `lockup-stacked-color.svg` | Square-ish spaces, avatars, covers. | | `mark-color.svg` | The triad alone — favicons, app tiles, watermarks, loading. | | `wordmark-color.svg` | Text-only lockup where the mark is redundant. | | `*-ink.svg` | Single-colour black, for one-colour print / stamps / when colour would clash. | | `*-paper.svg` | Reversed (paper-coloured) for **dark grounds** or a colour field. | | `app-icon.svg` + `png/app-icon-*.png` | Composed square icon on paper — app stores, PWA. | | `favicon.svg` / `favicon.ico` / `png/favicon-*.png` | Browser tab. | | `social-banner.png` | 1200×630 OG/share card. | **All logos are outlined** — the wordmark is real Jost Medium converted to vector paths, so they render identically with or without the font installed. Every SVG has a matching PNG in `logo/png/` for tools that can't take vectors. ### Clear space & minimum size - **Clear space:** keep a margin of **one full shape-height** (the height of the square in the mark) clear on all sides. Nothing — text, edges, other logos — inside that. - **Minimum size:** horizontal lockup **≥ 120 px / 32 mm** wide; mark alone **≥ 24 px / 8 mm**. Below that, use the mark, not the lockup. ### Don'ts - Don't recolour the shapes or the wordmark outside the palette below (the only recolours are the whole-logo **ink** and **paper** variants). - Don't reorder or re-space the shapes, rotate them, or swap which shape gets which colour. - Don't add shadows, gradients, glyphs, outlines, or 3-D. The system is **flat & honest.** - Don't set the wordmark in another typeface, capitalise it, or stretch/condense it. - Don't place the colour logo on a busy photo or a low-contrast field — use ink or paper. - Don't box the logo or put it on a coloured chip unless the whole surface is that colour. --- ## 3. Colour The primary triad **is** the palette — colour is function, never decoration. | Token | Hex | Role | |---|---|---| | `--mm-paper` | `#F3EFE6` | warm ground (default background) | | `--mm-ink` | `#1A1A1A` | structure, type, rules | | `--mm-white` | `#FFFFFF` | raised surface | | `--mm-red` | `#C8302A` | the **square** — also *danger* | | `--mm-yellow` | `#E8C018` | the **triangle** | | `--mm-blue` | `#1E3878` | the **circle** — brand anchor, links, focus, primary action | | `--mm-grey` | `#B7B1A4` | hairlines, muted fills | | `--mm-mut` | `#5C584F` | secondary text on paper (AA) | **Hard rules** - **Blue is the brand and the only interactive colour** — links, focus rings, primary actions, the circle motif. - **Red and yellow are fills only — never text on paper.** Ink + blue are the only text-on-paper colours. (Red is allowed as a *danger* fill.) - **Never encode meaning in colour alone** — always pair with a shape and a label. Expressive/marketing work may also use full-field colour grounds and the overprint secondaries (`--mm-orange / --mm-green / --mm-purple`); those are editorial-only — never in product UI. See `DESIGN-SYSTEM.md` §5 and `posters.css`. --- ## 4. Typography - **Display / wordmark / short UI labels:** **Jost** — an open (SIL OFL) geometric grotesque in the Futura lineage, so the brand carries no paid-font dependency. Lowercase as a signature. Stack: `'Jost','Futura','Century Gothic',Avenir,sans-serif`. The font is **self-hosted** (`fonts/jost-500.woff2`, `fonts/jost-600.woff2`) — never loaded from Google Fonts or any other third-party host, so nothing in the render path leaves our own EU infrastructure. The licence (`fonts/OFL.txt`) ships with the kit as the OFL requires. - **Body / reading text:** a **humanist system sans** (`--read-body`) — sentence case, AA contrast, ~66ch measure. Jost is *not* used for long reading text (legibility). - **Code / telemetry:** Berkeley Mono stack (`--mm-mono`). Lowercase is a signature reserved for the **brand mark and hero display only** — running text is sentence case. --- ## 5. Expressive register (marketing / posters only) The product brand is calm; **marketing and posters get a louder, expressive register** — full-field colour grounds, big lowercase display, and De Stijl block compositions. The full series is `site/design/posters-wall.html` (see `DESIGN-SYSTEM.md` §5 & §11). Two finished devices ship in the kit: - **EU sovereignty badge** — `logo/eu-badge.svg` (+ `logo/png/eu-badge-*.png`). The triad's blue circle read as the European flag: twelve yellow triangles for the stars, outlined lowercase **`eu`** at the centre. This is the **"made in Europe / nothing leaves the EU"** trust mark — use it in footers, trust pages, decks, and grant/partner material. Pair it with the tagline in text; don't recolour the disc or the stars. - **The polder pattern** — `pattern-polder.svg` (+ `logo/png/pattern-polder@960.png`). The sovereignty metaphor — *land you make & keep* — as a Mondrian field on the ink grid, using the triad + paper. For **covers, section breaks, and social backgrounds**; crop freely. Keep the ink grid lines and the triad placement; it's a composition, not a random palette. **Both are expressive-register only — never in product UI** (which stays on the calm Rams layer). Gradients remain banned everywhere; these devices use flat fills only. --- ## 6. Voice - **Start with the why:** a design student or researcher getting from an idea to a shared link, on EU rails. Speak to that person. - **Access, not AI-hype.** The story is non-coders building real software — not "AI does it for you." Keep copy human, student/user-first, plain, not salesy. No emoji. - **"polder" is intentional** — it's the sovereignty metaphor (land a nation makes and keeps for itself), not old branding. Don't rename it. --- ## 7. Files at a glance ``` site/brand/ BRAND-KIT.md ← this file brand-kit.html ← visual showcase + downloads social-banner.png ← 1200×630 share card pattern-polder.svg ← the polder, as De Stijl (expressive-register pattern) fonts/ jost-500.woff2 jost-600.woff2 ← self-hosted Jost (served) jost-500.ttf ← build source for outlining OFL.txt ← the SIL Open Font Licence (ships per its terms) logo/ mark-{color,ink,paper}.svg wordmark-{color,ink,paper}.svg lockup-horizontal-{color,ink,paper}.svg lockup-stacked-{color,ink}.svg app-icon.svg favicon.svg favicon.ico eu-badge.svg ← EU sovereignty badge (made in Europe) build-logos.py ← regenerates the outlined SVGs + eu-badge from fonts/jost-500.ttf png/ ← PNG exports of everything, multiple sizes ``` Regenerate the outlined logos with `logo/build-logos.py` (needs `fonttools`); then re-render the PNG set with `rsvg-convert`. The mark/app-icon/favicon SVGs are hand-authored geometry.