42 berlin
brand guidelines.
The visual system: colour, gradient, surface, type, layout, icon and slide anatomy. Everything here is measured from work already in the wild, so copying it will land you in the right place.
the palette.
Ink and paper carry the page. Purple connects. Accents punctuate, one per slide at most. There is no sixth colour, and there is no raw hex outside these five.
Type, and the one solid button. Also the dark field that opens and closes a deck.
Eyebrows, markers, hairlines. The connective tissue between elements, and the mid-point of the signature gradient.
Gradient fields and quiet fills. The light end of almost every surface. Give it an edge on paper or it disappears.
Links, and one live thing per layout. Never a background field, never two accents on the same slide.
Signal on dark grounds only. On paper it goes chalky and loses all its charge, so keep it on ink.
the four rules
- One accent per slide, never two.
- Accents are never a background field.
- No raw hex outside these five.
- Dark slides open and close.
do
- Let ink and paper do the structural work.
- Use purple for the // eyebrow and any hairline.
- Put soft lilac in gradient fields and quiet fills.
- Save cyan for dark grounds, where it actually signals.
- Give any pale surface a hairline edge so it holds its shape.
don't
- Put fuchsia and cyan on the same slide.
- Fill a background with an accent.
- Set cyan type on paper. It goes chalky.
- Introduce a sixth colour, however small the use.
- Use Wolfsburg's Fresh Sky or Royal Blue on a Berlin asset.
the gradient set.
Six highly vibrant, purposeful gradients that drive the 42 Berlin aesthetic. They all run on the same diagonal, 135° to 140°, which is what makes them read as a family rather than unrelated fills. Every stop is written out so a gradient can be rebuilt perfectly in Slides, Figma, or CSS.
building one
- Run the angle at 135° to 140°. Every gradient in the set does.
- Dark stop top-left, light stop bottom-right. Type goes on the dark end.
- In Google Slides: Background → Gradient → Custom, then enter the stops above.
- Reach for a ready-made background image before building a new field.
never
- Introduce a stop that is not one of the brand tokens.
- Run a gradient vertically or horizontally. It flattens immediately.
- Put white body copy over the light end of the lilac wash.
- Use the "Piscine" or "Live Accent" gradients behind heavy reading text.
ready-made backgrounds.
Four approved gradient fields at 1920 by 1080. Drop one behind a slide, a social post or a screen rather than building a new gradient each time. They are the same family, so a deck built from any of them still holds together.
two faces, one system.
Swiza carries the brand. Space Mono is the machine underneath it. Space Grotesk stands in for Swiza wherever Swiza cannot be installed, which in practice means Google Slides, Docs and the website.
The defining face of 42berlin.de. Every headline, on every surface. Confident at display sizes, quiet and legible at body sizes.
- Heaviest weight only: 900.
- Tracking tightened to -0.03em or -0.04em.
- Casing depends on context. See the rules below.
The open-source stand-in. Google Slides cannot embed custom fonts, so every deck runs on this. It holds the same geometric character as Swiza.
- Free on Google Fonts, so it survives sharing.
- 400 body, 500 emphasis, 700 fallback headings.
- Body copy is always sentence case.
The terminal layer. Labels, eyebrows, timestamps, code, data and numerals. It is what makes the brand read as engineered rather than styled.
- Prefix eyebrows with // and use snake_case.
- Weight 700, tracking 1.5px to 2px.
- Never for standalone figures. Those are Swiza.
casing: read the room.
Lowercase is a brand device, not a universal rule. It carries artistic weight in the right place and undermines credibility in the wrong one.
Website heroes, campaign headers, section titles, social graphics, event screens. Anywhere the type is doing expressive work rather than informational work. Tracking tight, weight 900, ending on a full stop.
Presentations, reports, proposals, partner and board material, document headers, agendas, certificates. Standard Title Case or Sentence Case is correct and expected here. Readability outranks style.
setting rules
- Body copy caps at 65 to 70 characters a line.
- Line height 1.6 for body, 0.95 to 1.1 for display.
- The bigger the type, the tighter the tracking.
- Adjust the weight for legibility. Readability always wins.
- Pick one casing convention per document and hold it.
avoid
- Lowercase on a partner proposal or a board deck.
- Mixing Swiza and Space Grotesk in one document.
- Space Mono for paragraphs. It is a label face, not a reading face.
- Centred body copy. Headings can centre, paragraphs do not.
- ALL CAPS for anything longer than a short label.
sizes and weights.
The working scale, measured from the live site. Web sizes use clamp so they flex between mobile and desktop. The pt equivalents assume a 13.33 by 7.5 inch slide.
clamp(3rem, 7vw, 5.8rem)
weight 900 · tracking -0.045em
line-height 0.95 · slides 60-76pt
clamp(2.2rem, 4.5vw, 3.8rem)
weight 900 · tracking -0.03em
line-height 1.05 · slides 36-44pt
1.3rem to 1.6rem
weight 800-900 · tracking -0.02em
line-height 1.25 · slides 20-24pt
1.05rem lede · 0.93rem dense
weight 400-500 · tracking 0
line-height 1.65 · slides 14-16pt
0.78rem to 0.85rem
Space Mono 700 · tracking +2px
uppercase · slides 10-12pt
0.66rem to 0.72rem
Space Mono 700 · tracking +1.2 to +1.4px
page numbers, dates, footers · slides 9-10pt
3.5rem to 4.5rem
Swiza 900, never mono · tracking -0.04em
label underneath in mono at 0.7rem
grid & spacing.
One container, one gutter, one rhythm. Almost every layout problem comes from someone inventing a new width rather than using the one that already exists.
column counts
- Four for stats and short feature cards.
- Three for cards with a paragraph in them.
- Two for anything with an image or a long list.
- Collapse to two at 991px and one at 700px.
alignment
- Left align by default. It is the house position.
- Eyebrow, heading and body share one left edge.
- Centre only on closing frames and short statements.
- Never centre a paragraph longer than two lines.
breathing room
- Eyebrow to heading: 18 to 20px.
- Heading to body: 16 to 22px.
- Body to the grid below: 44 to 56px.
- Card padding: 34px, dropping to 26px on mobile.
icons & glyphs.
Two families. Line icons carry meaning, terminal glyphs carry personality. Neither is decorative: if an icon is not doing a job, take it out.
line icons
Stroke only, never filled. 24 by 24 viewBox, 2px stroke, round caps and joins. Colour comes from the surrounding text, so an icon inherits Purple on light backgrounds and Cyan on dark.
terminal glyphs
Set in Space Mono, not drawn. These are the marks that make an asset read as 42 within half a second.
do
- Keep one icon family per asset.
- Match stroke weight to the text weight beside it.
- Use → for internal links, ↗ for external.
- Let a trailing _ imply a live terminal on headlines.
don't
- Use filled or duotone icon sets.
- Add emoji to slides, posts or the site.
- Colour an icon amber.
- Put an icon next to every heading. They lose meaning.
berlin and wolfsburg.
Two campuses, one association, one method. The systems are deliberately built the same way and deliberately coloured differently, so an asset reads as 42 first and as its campus second.
42 berlin.
42 wolfsburg.
what the two share, and must keep sharing
- Swiza and Space Mono. Same faces, same weights, same tight tracking.
- Space Grotesk as the fallback wherever Swiza cannot load.
- The terminal layer. // eyebrows, snake_case labels, cursors, brackets.
- Lowercase headings for brand moments, title case for formal documents.
- One accent per layout, never two.
- Accents are never a background field.
- Figures in Swiza, labels in mono, on both sides.
- Left alignment as the default position for everything.
when campuses meet
- Joint asset, joint audience: neutral ink and paper, and let both logos carry the colour.
- Berlin audience: the purple system, every time.
- Keep the shared structure and swap only the palette.
- Name the association in full for legal or funding copy.
never
- Mix purple and blue accents in a single layout.
- Recolour the Wolfsburg logo into purple, or the Berlin logo into blue.
- Reuse a Wolfsburg deck by swapping the logo and leaving the palette.
- Put amber on a Berlin asset. It is Wolfsburg's action colour, not ours.
- Describe the campuses as competitors. They are one association.