Live demo of the Campaign playbook blueprint · Forma is a fictional brand.All blueprintsJoin the waitlist

Visual toolkit

Campaign look & feel

The campaign borrows Forma's brand identity and adds one thing: movement. Ink Violet sets the stage, Lilac builds the furniture, and Signal marks the one module that just moved.

Lockup

The campaign lockup

The Forma wordmark sits on top of the campaign line. The full stop is a Signal module, lifted out of place — the campaign in one detail. Use the lockup once per layout; the wordmark alone is for where the lockup won't fit.

For screens: websites, apps, social media, presentations and email.

Campaign lockup
Campaign lockup
  • SVGRGB · 954 B · 645 × 423 px
Campaign lockup — reversed
Campaign lockup — reversed
  • SVGRGB · 954 B · 645 × 423 px
Forma mark (avatars, favicons)
Forma mark (avatars, favicons)
  • SVGRGB · 555 B · 400 × 400 px
Forma wordmark
Forma wordmark
  • SVGRGB · 246 B · 520 × 180 px
Wordmark — reversed
Wordmark — reversed
  • SVGRGB · 246 B · 520 × 180 px
Wordmark — black, one colour
Wordmark — black, one colour
  • SVGRGB · 246 B · 520 × 180 px

Digital or print? The three wordmark cards hold a file per colour mode — use the switch on each card. RGB is for screens, social and Office. CMYK is for offset and digital print: flyers, inserts, partner ads. Pantone (2685 C, or Black 6 C for one colour) is for spot-colour jobs where the violet must be exact: posters, signage, shop windows and anything screen-printed or embroidered.

Clear-space diagram: a margin of x around the lockup, where x is the height of the 'o' in forma.
Clear space: x on every side, where x is the height of the 'o' in forma (marked in Signal).
Clear space
Keep a space of x around the lockup and the wordmark, where x is the height of the 'o' in forma. Nothing enters this zone: no copy, no partner logos, no format edge. On formats under 300 px wide, a clear space of ½x is allowed.
Minimum sizes
Campaign lockup: 120 px wide on screen, 30 mm in print. Wordmark: 24 px high on screen, 15 mm wide in print. Forma mark: 32 px — for avatars, favicons and app icons only. Below these sizes, drop the campaign line and use the wordmark.
Placement
The lockup sits top left, aligned to the margin. The margin is 7.5% of the shortest side of the format. When the campaign line is already the headline, use the wordmark on its own in the bottom band — never the line twice.
Co-branding with partners
Partner logos go in the bottom band, right-aligned, no taller than 80% of the Forma wordmark height. Separate the two logos by at least 2x. Never lock a partner logo into the campaign line or place it on Signal. Templates with a partner slot are in Assets.
Colour versions and file formats
Ink Violet lockup on Chalk, Mist or Lilac. Reversed (white) lockup on Ink Violet, Night or a calm, dark photo area. Black for one-colour print, newspapers and engraving. SVG for web and digital, vector PDF for print, PNG at 2x for presentations.
Do
  • Use the reversed version on Ink Violet.
  • Use the Ink Violet version on Mist, Lilac or Chalk.
  • On photography, place it on a calm area with enough contrast.
  • Use the black version for one-colour print and newspapers.
  • Give it room: keep a clear space of x on every side.
Don't
  • Don't stretch, squash or redraw the wordmark or lockup.
  • Don't recolour it. Signal is for the module, never for the letters.
  • Don't rotate it. Only the module moves.
  • Don't place it on a busy background or pattern.
  • Don't add shadows, outlines, gradients or other effects.

Colour

Ink Violet sets the stage, Signal moves

Four campaign colours and two neutrals. Click any value to copy it. Print values are for coated stock; check proofs against the Pantone swatch.

Ink Violet
Lead colour: backgrounds and headlines, with white text.
Lilac
Furniture modules and panels, with Ink Violet text.
Mist
Floors, bottom bands and light backgrounds.
Signal
Campaign accent: the moved module and calls to action. Night text only.
Chalk
Page background on screen; unprinted paper white in print.
Night
Body text, icons and text on Signal.

Proportions

How much of each colour

Across a typical layout. Ink Violet carries the campaign; Signal stays well under 10%.

  • Ink Violet 40% · Backgrounds and headlines
  • Mist 22% · Floors, bands and space
  • Lilac 18% · Furniture and panels
  • Chalk 10% · Page and paper
  • Signal 6% · The moved module and the button
  • Night 4% · Body text

Contrast

Combinations that pass — and two that don't

Ratios are calculated live (WCAG 2.2). Body text needs at least 4.5:1, large text 3:1. Try the pairs with your own text.

Preview as
Aa
13.0:1
White on Ink Violet

The quick brown fox jumps over the lazy dog.

AAA
Aa
10.7:1
Ink Violet on Mist

The quick brown fox jumps over the lazy dog.

AAA
Aa
7.1:1
Ink Violet on Lilac

The quick brown fox jumps over the lazy dog.

AAA
Aa
6.7:1
Night on Signal

The quick brown fox jumps over the lazy dog.

AA
Aa
15.9:1
Night on Chalk

The quick brown fox jumps over the lazy dog.

AAA
Aa
7.1:1
Lilac on Ink Violet

The quick brown fox jumps over the lazy dog.

AAA
Aa
2.5:1
White on Signal

The quick brown fox jumps over the lazy dog.

Not for text
Aa
2.1:1
Signal on Mist

The quick brown fox jumps over the lazy dog.

Not for text

Contrast is calculated with the WCAG 2.2 formula. AA: at least 4.5:1 for body text and 3:1 for large text (24 px, or 19 px bold); AAA: 7:1.

Using Signal

Signal is the colour of movement. It marks the one thing that moves — the module, the button, the new thing — and nothing else.

  • Two Signal elements per layout at most: the moved module and the call to action.

  • Never use it as a background for text blocks or for body copy.

  • Text on Signal is always Night (6.7:1). White on Signal fails contrast (2.5:1).

  • In print, use Pantone 1645 C for Signal on posters and in-store materials; CMYK is fine for flyers and inserts.

Typography

Syne for impact, Manrope for everything else

Two free Google Fonts, available to every partner. Syne gives the headlines their wide, slightly quirky character; Manrope keeps body copy calm and readable.

Display
Syne
Extra bold

Campaign line and headlines. Sentence case, always with a full stop.

Good typography is invisible. It guides the eye from line to line, so readers stay with the story instead of the letters. Spacing between lines matters as much as the letters themselves.

Line height
1.5 · 150% · 24 px at 16 px
Subheads
Syne
Bold

Secondary headlines, product names, email titles. At least half the size of the display line.

Good typography is invisible. It guides the eye from line to line, so readers stay with the story instead of the letters. Spacing between lines matters as much as the letters themselves.

Line height
1.5 · 150% · 24 px at 16 px
Body
Manrope
Regular · Medium

Body copy, captions, legal lines. Regular 16–18 px on screen, 9–11 pt in print.

Good typography is invisible. It guides the eye from line to line, so readers stay with the story instead of the letters. Spacing between lines matters as much as the letters themselves.

Line height
1.5 · 150% · 24 px at 16 px
Eyebrows and buttons
Manrope
Bold

Eyebrows in caps. Buttons in sentence case, Night on Signal.

Good typography is invisible. It guides the eye from line to line, so readers stay with the story instead of the letters. Spacing between lines matters as much as the letters themselves.

Line height
1.5 · 150% · 24 px at 16 px

Type scale

One hierarchy, everywhere

Sizes for screen at desktop width; scale everything down by the same factor for small formats. Keep this order: eyebrow, line, subhead, body, button.

Eyebrow
Body font 700 · 13/18 · +12% · caps
New · modular collection
Display
Heading font 800 · 64/62 · -1%
Made to move.
Subhead
Heading font 700 · 30/34
One more seat. Same sofa.
Lead
Body font 500 · 20/28
Sofas and shelving that grow, shrink and come along when you move.
Body
Body font 400 · 17/26
Add a seat when friends stay over. Every module clicks on and off in two minutes — no tools needed.
Button
Body font 700 · 16/20
Discover the collection
Caption and legal
Body font 400 · 13/18
Prices include VAT. Offer valid 17–30 November 2026.
Fallback fonts: email, Word and PowerPoint
Syne and Manrope don't exist in Outlook, Word or on a partner's laptop. There, use: Headlines (Syne ExtraBold) → Arial Black, line height 1.0. Subheads (Syne Bold) → Arial Bold. Body, eyebrows and buttons (Manrope) → Segoe UI on Windows, Roboto or Helvetica elsewhere; Arial as a last resort. Never substitute with another display font — a plain Arial Black reads more like Forma than a look-alike.
Line height and letter spacing
Display: line height 0.95, tracking −1%. Subheads: 1.1, 0%. Body: 1.5, 0%. Eyebrows: 1.3, +12%, caps. In print, use the same ratios in points (e.g. body 10/15 pt).

Graphic device

The shift

Our one graphic device. A grid of soft modules, one of which has just moved: it leaves a dashed outline behind and carries a short Signal trail. Use it where there's no furniture to show — teasers, backgrounds, icons, motion.

Three steps: a grid of lilac modules; one module shifts out in Signal leaving a dashed outline; motion lines are added.
Building the shift in three steps.

1 · Start from the grid

Square modules with 25% corner radius, gaps of 1/6 of a module. Lilac on Ink Violet, or Ink Violet on Mist.

2 · Shift one module

Move one module up and to the right by about half its size and rotate it 4–6°. It turns Signal. Leave a dashed outline where it was.

3 · Add the trail

Three rounded lines behind the module, in Signal, of different lengths. Never more than three lines, never on more than one module.

Module pattern: a grid of violet tiles with Signal modules shifting out along a diagonal.
The module pattern for backgrounds, wrapping paper and showroom walls. Crop freely, never recolour.

Icons

Icons that point at the product

Four brand icons tell the product story; Material Symbols (rounded, weight 500) cover everything functional in banners, the landing page and the configurator. Ink Violet, with Signal only for the moving part.

Brand icons

4 icons

Interface (Material Symbols)

12 icons

Material Symbols by Google, open source (Apache 2.0)

Photography

Real homes, mid-change

Campaign photography shows the moment life changes shape — not the finished showroom. Boxes still in the hallway, a new seat clicked on, a kids' drawing on the shelf. These illustrations brief the photographer on scenes and colour.

  • Light: daylight, from the side. No flash, no harsh shadows.

  • Viewpoint: eye level, a 35 mm feel. Show the room, not just the product.

  • Colour: at least one campaign colour in every shot — a Lilac sofa, an Ink Violet wall, a Signal cushion.

  • People: busy with something, not posing. Faces may be out of frame.

  • Space: leave a calm area of at least 30% of the frame for copy.

What this means: Something is happening — a move, a new seat — but it never feels hectic.

What this means: Daylight from the side. No flash, no harsh shadows.

What this means: Real homes with real clutter: boxes, drawings, a mug on the floor.

What this means: At least one campaign colour in every shot; no colour grading.

What this means: Show the room and the change; details only for materials.

Keywords

  • mid-change
  • daylight
  • real homes
  • eye level
  • 35 mm
  • a campaign colour
  • people busy
  • calm area for copy

Moodboard

Do
  • Show a change in progress: boxes, a half-arranged room, a module being carried.
  • Shoot in real homes in Amsterdam, Utrecht and Antwerp, with real tenants where possible.
Don't
  • No studio cut-outs on white for campaign visuals — those are for product pages.
  • No perfect families smiling into the camera, no heavy filters or teal-and-orange grading.

Made with brandbooks