// our_look_and_feel

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.

v3.2 · 2026 maintained by brand & comms questions → vlad@42berlin.de

5 tokens, no others // 01_colour

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.

primary

ink

#0A0A0A · rgb(10, 10, 10)

Type, and the one solid button. Also the dark field that opens and closes a deck.

primary

purple

#8E44AE · rgb(142, 68, 174)

Eyebrows, markers, hairlines. The connective tissue between elements, and the mid-point of the signature gradient.

primary

soft lilac

#C9B6E4 · rgb(201, 182, 228)

Gradient fields and quiet fills. The light end of almost every surface. Give it an edge on paper or it disappears.

accent

fuchsia

#ED3491 · rgb(237, 52, 145)

Links, and one live thing per layout. Never a background field, never two accents on the same slide.

accent

cyan

#00E5D4 · rgb(0, 229, 212)

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.

// 02_gradients

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.

01

signature field

Ink through core purple into soft lilac. Page heroes, campaign headers, and cover slides. If someone recognises one Berlin gradient, it is this one.

#0A0A0A · rgb(10, 10, 10)

#8E44AE · rgb(142, 68, 174)

#C9B6E4 · rgb(201, 182, 228)

02

deep field

Dark statement slides and closing frames. A luminous violet emerging from deep ink. It provides structure without flattening into pure black.

#0A0A0A · rgb(10, 10, 10)

#3B1B4E · rgb(59, 27, 78)

#8E44AE · rgb(142, 68, 174)

03

the piscine

High-energy, cyberpunk, and loud. Purple into Fuchsia into Cyan. Used for the Piscine page, intense highlights, and major campaign bursts.

#8E44AE · rgb(142, 68, 174)

#ED3491 · rgb(237, 52, 145)

#00E5D4 · rgb(0, 229, 212)

04

purple sweep

For small surfaces where a three-stop run has no room to breathe: chart bars, icon fills, highlight rules, and secondary UI cards.

#8E44AE · rgb(142, 68, 174)

#C9B6E4 · rgb(201, 182, 228)

05

lilac wash

Paper white into soft lilac. Used for light slides carrying a lot of ink text, and section transitions. Keep the lilac end in a corner.

#FFFFFF · rgb(255, 255, 255)

#E4DAF1 · rgb(228, 218, 241)

#C9B6E4 · rgb(201, 182, 228)

06

live accent RESTRICTED

Fuchsia clashing into Cyan. The single live element on a layout: primary CTAs, active hover states, and highlighted links. Never a background field.

#ED3491 · rgb(237, 52, 145)

#00E5D4 · rgb(0, 229, 212)

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.

// 03_surfaces

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.

gradient-background-01

Dark centre, lit edges. Good when type needs to sit in the middle.

gradient-background-02

Lightest and softest. Section dividers and quieter slides.

gradient-background-03

The signature sweep. Default choice for a cover if in doubt.

gradient-background-04

Almost entirely ink. The most text-friendly of the four.

// 04_typography

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.

01 / display

swiza black.

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.

02 / fallback + body

Space Grotesk

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.

03 / system

SPACE MONO_

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.

// lowercase · brand moments

become a software engineer.

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.

// title or sentence case · formal

Partnership Overview 2026

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.

// 05_type_scale

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.

display.

H1 / HERO
clamp(3rem, 7vw, 5.8rem)
weight 900 · tracking -0.045em
line-height 0.95 · slides 60-76pt

Section Heading

H2 / SECTION
clamp(2.2rem, 4.5vw, 3.8rem)
weight 900 · tracking -0.03em
line-height 1.05 · slides 36-44pt

Card Title

H3 / CARD
1.3rem to 1.6rem
weight 800-900 · tracking -0.02em
line-height 1.25 · slides 20-24pt

Body copy. The workhorse size, set for comfortable reading and capped around seventy characters a line.

BODY
1.05rem lede · 0.93rem dense
weight 400-500 · tracking 0
line-height 1.65 · slides 14-16pt

// eyebrow_label

EYEBROW
0.78rem to 0.85rem
Space Mono 700 · tracking +2px
uppercase · slides 10-12pt

META · 12 AUG · 04 / 15

META / CAPTION
0.66rem to 0.72rem
Space Mono 700 · tracking +1.2 to +1.4px
page numbers, dates, footers · slides 9-10pt

600+

STAT / FIGURE
3.5rem to 4.5rem
Swiza 900, never mono · tracking -0.04em
label underneath in mono at 0.7rem

// 06_layout

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.

px 1200 Container max-width. Never widen it.

px · desktop / mobile 40/24 Gutter either side of the container.

px 110 Section padding, dropping to 74 on mobile.

px 20 Grid gap between cards, at every breakpoint.

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.

// 07_icons

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

search

expand

forward

date

place

terminal glyphs

Set in Space Mono, not drawn. These are the marks that make an asset read as 42 within half a second.

//eyebrow

>list item

>_prompt

_cursor

→cta

↗external

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.

// sister_campuses

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.

the quickest test: purple is Berlin. blue is Wolfsburg. If a layout has both, it is wrong.

42 berlin.

// purple_system · this document

accent

Purple #8E44AE with Soft Lilac #C9B6E4

surface

Paper white over Ink #0A0A0A

gradient

Ink to Soft Lilac, purple mid-point, 135°

action

The one solid ink button. Fuchsia for links.

signal

Cyan #00E5D4, on dark grounds only

feel

Warmer and higher contrast. Glass, blur and ambient drift.

42 wolfsburg.

// blue_system · reference only

accent

Fresh Sky #64B2E2 with Royal Blue #5467DE

surface

Lavender Mist #F7F0F5 over Ink Black #001011

gradient

Ink to Fresh Sky, royal mid-point, 140°

action

Amber Flame #FFB30F, apply buttons only.

signal

Fresh Sky on dark grounds

feel

Cool and engineered. Flat cards, crisp hairlines.

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.