01 · the idea
Bauhaus + De Stijl, made readable.
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. Form follows function · flat & honest · the grid is law · colour is function. This page is the applied brand kit; the program-wide system lives in DESIGN-SYSTEM.md.
02 · the logo
The mark & the wordmark
The mark is the triad — a yellow triangle · red square · blue circle (Kandinsky/Itten), bottom-aligned, with air between them. The wordmark is makemode: lowercase, one word, geometric sans, bold, and entirely in ink. One colour — the word is never split into two. All logos are outlined vectors, so they render the same with no font installed. Take the SVG for print, slides, and anything that scales; take the PNG (transparent background, size on the button) for social posts and any tool that won't accept a vector.
These files are cut from the masthead on makemode.eu, which is the logo as everyone actually meets it: shapes 18 px against a 22 px word, 10 px apart, sitting on the baseline. Until July 2026 the files disagreed with it — they set mode in blue and the word in Medium — so the kit was handing out a logo the site had never shown. If the masthead and these files ever diverge again, the masthead is right and logo/build-logos.py is where you correct them.
03 · clear space & minimum size
Give it room
Keep a margin of one shape-height (the square's height) clear on all sides. Minimum: horizontal lockup ≥ 120 px / 32 mm wide; mark alone ≥ 24 px / 8 mm. Below that, use the mark, not the lockup.
04 · colour
The triad is the palette
Colour is function, never decoration. Blue is the brand and the only interactive colour. Red and yellow are fills only — never text on paper. Ink and blue are the only text-on-paper colours. Click any hex to copy.
05 · typography
Jost for display, humanist sans for reading
makemode
Jost Bold (OFL) · geometric · lowercase as a signature
Display & short labels: Jost — an open geometric grotesque in the Futura lineage (lowercase signature). Reading text: humanist system sans, sentence case, AA contrast, ~66ch. Code/telemetry: Berkeley Mono.
Why Jost and not Futura. The site asks for Futura first, and on a Mac that's what you see — but Futura is licensed, so we can't ship it, and a visitor without it lands on Century Gothic or Trebuchet. Jost is the OFL face in that lineage: free to redistribute, and close enough that the wordmark reads the same. It runs a little narrower and smaller on the body than Futura Bold, which is why the logo files size the shapes against the ascenders rather than the type size — the triad stands exactly as tall as the k and the d, in either face.
06 · expressive register
The expressive register
The product brand above is calm on purpose. Marketing and posters get a louder, expressive register — full-field colour grounds, big lowercase display, and De Stijl block compositions. Two finished devices live here; the full series is the poster wall (see also DESIGN-SYSTEM §5 & §11).
The EU badge is the triad's blue circle read as the European flag — twelve triangles for the stars, eu at the centre. Use it for "made in Europe / nothing leaves the EU" trust marks. The polder pattern is the sovereignty metaphor (land you make & keep) as a Mondrian field — for covers, section breaks, and social backgrounds. Expressive-register only; never in product UI.
07 · the image layer
Real things, in black and white
The flat colour is the system. The photograph is the person. Geometry on its own gets a Bauhaus tribute — correct, admired, cold. The reference work always puts a photograph of something real and made under the flat shapes: the Seagram Building under the blue circle, the Dessau facade under the red square, the chairs, the people. MakeMode is for someone making a real thing, so show the real thing. This is a rule, not a mood — the full version is §6 of the guidelines.
Do
- Photograph things people made or use: buildings, objects, tools, hands at work.
- Run every photo through halftone.py at its locked standard — cell-6, 45°, round dots, black on transparent.
- Treat the halftone as the ink layer; overlap it with one oversized shape from the triad.
- Keep paper as the ground, unless the whole surface is a colour field.
Don't
- Use 3-D renders, AI-generated imagery, circuits and glowing orbs, or stock people pointing at screens.
- Tint the halftone, or render it in red, yellow, or blue.
- Put a photograph behind reading text — display type only.
- Bring any of this into product UI. A halftone in the app chrome is a bug.
UI screenshots are not the image layer. A screenshot of the product is a screenshot — leave it in colour.
09 · usage
Do & don't
Do
- Use the colour lockup on paper or white; ink or paper variants elsewhere.
- Keep one shape-height of clear space around it.
- Reverse to the paper variant on dark or coloured grounds.
- Use the mark alone when small or square.
- Pair colour with shape + label — never colour alone for meaning.
Don't
- Recolour the shapes, reorder them, or rotate the mark.
- Colour part of the word. It's one word, one colour, all ink.
- Set the wordmark in another font, lighten it, capitalise, or stretch it.
- Add shadows, gradients, outlines, or 3-D — stay flat & honest.
- Use red or yellow as text on paper.
- Place the colour logo on a busy photo or low-contrast field.
10 · voice
Access, not AI-hype
Start with the why: a design student or researcher getting from an idea to a shared link, on EU rails. The story is access — non-coders building real software — not "AI does it for you." Human, user-first, plain, no emoji. And "polder" is the sovereignty metaphor on purpose — don't rename it.
08 · for social
Profile, banner, background
Ready-made PNGs for the places that won't take an SVG. Transparent background except the banner; sizes are on the buttons. Every logo above has a PNG twin too.
Posting a photo? It goes through the image layer first (§7). The share banner is what a link to makemode.eu unfurls as, so keep it in step with the wordmark if the wordmark ever changes.