// our_look_and_feel

42 wolfsburg
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 field behind this headline is the signature gradient in section 02 — the page is built out of its own rules.

v4.0 · 2026 maintained by brand & comms questions → vlad@42wolfsburg.de
// 01_colour

the palette.

Six values. Ink, Lavender Mist, and Soft Sky do the structural work, Fresh Sky and Royal Blue carry the brand, and Amber is reserved for one job only. If a flat colour is not on this list, it is not ours. The gradient set in section 02 adds intermediate blues that exist only inside a gradient, never as a fill.

core
Ink Black
#001011 · rgb(0, 16, 17)

All body text and headings. Dark section backgrounds. A very slightly blue-green black, not pure #000, and that difference shows at scale.

primary
Fresh Sky
#64B2E2 · rgb(100, 178, 226)

The signature colour. Heading accents, the highlighted half of a two-tone headline, eyebrows on dark, gradient end points.

primary
Royal Blue
#5467DE · rgb(84, 103, 222)

Eyebrows on light, hover states, links, numbered markers, hairlines. The connective tissue between elements.

surface
Lavender Mist
#F7F0F5 · rgb(247, 240, 245)

The warm light background. Warmer than white, which stops long pages feeling clinical. White is reserved for cards sitting on top of it.

surface
Soft Sky
#EAF5FA · rgb(234, 245, 250)

The cool light background. Used for UI cards, informative callout boxes, and alternative section backgrounds when a crisper tone is needed.

restricted
Amber Flame
linear-gradient(135deg)
#FF7A00 · 0% #FFB30F · 55% #FFD24A · 100%

Apply and register buttons only, one per screen. The warmest element in the system, and it works because nothing else competes with it.

do

  • Put Fresh Sky on the second half of a headline: inside 42 wolfsburg.
  • Use Royal Blue for the // eyebrow above a heading on light backgrounds.
  • Keep Amber for apply and register actions, one per screen.
  • Alternate between Lavender Mist and Soft Sky for section backgrounds to separate content naturally.
  • Give any pale surface a hairline edge so it does not dissolve.

don't

  • Use pure black. Ink Black is #001011 and always has been.
  • Introduce teal, mint or any green. They are not in this system.
  • Put Amber on a heading, a border, an icon or a background.
  • Flatten Amber to one colour on screen. It is a gradient everywhere a gradient will render.
  • Use Berlin's purple or fuchsia on a Wolfsburg asset.
  • Tint a photograph to force it on-palette.
// 02_gradients

the gradient set.

Six gradients, all already in use across the website, the master deck and the introduction slides. Every stop is written out so a gradient can be rebuilt in Slides, Figma or CSS without sampling a screenshot. They all run on the same diagonal, 135° to 140°, which is what makes them read as a family rather than six unrelated fills. The mid stops are interpolations between the palette values, and they belong to the gradients only. None of them is a flat colour you can use on its own.

01
signature field
Homepage hero, campaign hero, the anniversary timeline screen. The one people recognise.
#0010110% · rgb(0, 16, 17)
#101F6B30% · rgb(16, 31, 107)
#2F4BDC62% · rgb(47, 75, 220)
#64B2E2100% · rgb(100, 178, 226)
02
brand sweep
Small surfaces: glass buttons, icon fills, chart bars, highlight rules. The two primaries, nothing else.
#5467DE0% · rgb(84, 103, 222)
#64B2E2100% · rgb(100, 178, 226)
03
deep field
Dark statement slides and closing frames. Balanced with just enough mid-tone blue to pop off the screen while remaining a deep background.
#0010110% · rgb(0, 16, 17)
#0D1E4C50% · rgb(13, 30, 76)
#1F3883100% · rgb(31, 56, 131)
04
royal dusk
Section dividers and mid-deck breaks. Sits between the deep field and the signature field, so it steps down from either.
#10225F0% · rgb(16, 34, 95)
#4E86D8100% · rgb(78, 134, 216)
05
sky wash
Light slides carrying a lot of ink text. Keep the Fresh Sky end in a corner and the copy on the pale end.
#F7F0F50% · rgb(247, 240, 245)
#B9DCF255% · rgb(185, 220, 242)
#64B2E2100% · rgb(100, 178, 226)
06
apply flame RESTRICTED
Apply and register buttons only. One per screen. If amber appears anywhere else, that layout is wrong. This is the same gradient documented as Amber Flame in section 01.
#FF7A000% · rgb(255, 122, 0)
#FFB30F55% · rgb(255, 179, 15)
#FFD24A100% · rgb(255, 210, 74)

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.
  • Copy every stop, including the mid ones. Dropping a stop changes the gradient.
  • Add soft radial blooms over the top for depth, never extra hues.
  • Blur any bloom heavily. A visible edge reads as a mistake.

never

  • Introduce a hue from outside this set. The mid stops above are steps between Ink, Royal Blue and Fresh Sky; green, teal and warm tones are not.
  • Lift a mid stop out and use it as a flat colour. They exist only inside a gradient.
  • Run a gradient vertically or horizontally. It flattens immediately.
  • Put white body copy over the light end of the sky wash.
  • Blend amber into any other gradient.
  • Stack two different gradients in one frame.
// 03_surfaces

surfaces & depth.

How the layers stack. The surface is the page, white is the card, ink is the statement. Depth comes from soft shadow and generous radius, never from borders doing the heavy lifting.

the three layers

  • Page. Lavender Mist #F7F0F5, Soft Sky #EAF5FA, or a gradient field.
  • Card. White, 20 to 24px radius, 1px hairline at 8% ink.
  • Statement. Ink or the deep field, used sparingly for contrast.

shadow recipe

  • Resting: 0 10px 30px rgba(0,16,17,0.03).
  • Hover: lift 4px, deepen to 0 20px 45px at 12%.
  • Shadows are blue-black, never neutral grey.

radius scale

  • 100px pills: buttons, chips, tags.
  • 20 to 24px cards and image frames.
  • 14 to 16px small tiles and swatches.
  • Never square corners on a content block.

ready-made backgrounds

Flattened images for slides and social. Use these rather than rebuilding a gradient each time.

Soft pastel gradient background, light
light diffusion 01
High-key and soft. Best for slides carrying a lot of ink text.
Cooler pastel gradient background with sky tones
light diffusion 02
Cooler, with more Fresh Sky in it. Good for title slides.
Dark structural grid background
dark structure
For section breaks and architecture slides. White type only.
// 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

Every headline, on every surface. The licensed brand face.

  • Headlines and display type: 900. Card titles and sub-heads may sit at 800. Nothing lighter carries a heading.
  • Tracking tightened to -0.03em or -0.04em.
  • Casing depends on context. See the panel below.
02 / fallback + body
Space Grotesk

All body copy, and the mandatory stand-in for Swiza in Google Workspace and on the web.

  • Free on Google Fonts, so it survives sharing a deck.
  • 400 for body, 500 for emphasis, 700 for fallback headings.
  • Body copy is always sentence case.
03 / system
Space Mono_

Labels, eyebrows, dates, buttons. The terminal layer that makes the brand feel engineered.

  • Prefix eyebrows with // and use snake_case: // media_stream.
  • Weight 700. Uppercase labels track 1.2px to 2px, tighter as the label gets smaller. Lowercase mono — hex codes, readouts, figures — stays untracked.
  • 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
let's code the future.

Website heroes, campaign headers, section titles, social graphics, event screens. Anywhere the type is doing expressive work rather than informational work. Ends on a full stop, tracking tight, weight 900.

// 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 to 1.7 for body, 1.05 to 1.1 for display.
  • The bigger the type, the tighter the tracking. The smaller the mono label, the tighter the tracking too.
  • Pick one casing convention per document and hold it throughout.

avoid

  • Lowercase on a partner proposal or a board deck.
  • Mixing lowercase and Title Case headings in one document.
  • Space Mono for paragraphs. It is a label face, not a reading face.
  • Swiza below 800 for anything acting as a heading.
  • 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. Build from the spec column on the right, not by measuring the sample: the two display rows are shown smaller than their real size so they fit this page.

display.
H1 / HERO
clamp(3rem, 7vw, 5.8rem)
weight 900 · tracking -0.045em
line-height 0.95 · slides 60-76pt sample shown reduced
Section Heading
H2 / SECTION
clamp(2.2rem, 4.5vw, 3.8rem)
weight 900 · tracking -0.03em
line-height 1.05 · slides 36-44pt sample shown reduced
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 Royal Blue on light and Fresh Sky on dark. The icons below are drawn with currentColor, which is what makes that inheritance work: set the colour on the parent and the icon follows.

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.
  • Draw icons with currentColor so they inherit.
  • 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.
  • Pin a stroke colour on the icon itself.
  • Add emoji to slides, posts or the site.
  • Colour an icon amber.
  • Put an icon next to every heading. They lose meaning.
// 08_slide_anatomy

presentation layouts.

Six frames that cover almost every deck we make. Build from these rather than starting blank. Each keeps the same left margin, eyebrow position and footer line, so a deck holds together even when the content does not. The fields behind them are the gradients from section 02, so a wireframe here can be rebuilt from the stops listed there.

cover
Signature field, two-line headline, one line of support, one amber CTA. Nothing else.
02
section divider
Deep field, a large Swiza numeral and the section name. Duplicate and renumber.
three cards
The default content frame, on flat Lavender Mist. Three is the ceiling for cards with a paragraph in them.
stat row
Four figures in Swiza, mono labels underneath. Numbers big, everything else quiet.
image and text
Photo left, copy right, sky wash behind. Crop to fill, no scrim needed on light.
closing
Deep field, one statement, contact line. The bookend to the cover.

deck rules

  • One idea per slide. If it needs two, it needs two slides.
  • Keep the footer line and page number on every content slide.
  • Open light and close dark, or the reverse. Give the deck bookends.
  • Amber appears once in a deck, on the slide with the ask.
  • Build the field from the stops in section 02, not by eye.
  • Use Title Case headings in formal decks. See the typography section.

don't

  • Put more than four cards in a row.
  • Shrink body text below 14pt to make copy fit. Cut the copy.
  • Alternate gradients slide to slide. Pick a rhythm and hold it.
  • Swap Lavender Mist for plain white on light slides.
  • Fill dead space. White space is doing a job.
// sister_campuses

wolfsburg and berlin.

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: blue is Wolfsburg, purple is Berlin.

42 wolfsburg.

// blue_system
accent
Fresh Sky #64B2E2 with Royal Blue #5467DE
surface
Lavender Mist #F7F0F5 over Ink Black #001011
gradient
Ink to Fresh Sky on a 140° diagonal
feel
Cool, engineered, close to the industry on its doorstep.

42 berlin.

// purple_system
accent
Purple #8E44AE with Soft Lilac #C9B6E4
surface
White over Ink Black #0A0A0A
gradient
Ink to Soft Lilac, same diagonal, purple mid-point
feel
Warmer and higher contrast, with fuchsia and cyan as punctuation.

what the two share, and must keep sharing

  • Swiza and Space Mono. Same faces, same weights, same tight tracking.
  • The terminal layer. // eyebrows, snake_case labels, cursors, brackets.
  • The 140° diagonal. Both gradient systems run on the same angle.
  • Amber Flame #FFB30F. The apply colour in both systems, and the one warm value either campus uses.
  • Left alignment as the default position for everything.
  • Figures in Swiza, labels in mono, on both sides.

when campuses meet

  • Joint asset, joint audience: use neutral ink and white, and let both logos carry the colour.
  • Wolfsburg audience: the blue system, every time.
  • Keep the shared structure and swap only the palette.

never

  • Mix blue and purple accents in a single layout.
  • Recolour the Berlin logo into blue, or the Wolfsburg logo into purple.
  • Reuse a Berlin deck by swapping the logo and leaving the palette.
  • Describe the campuses as competitors. They are one association.