Website
PlaybookCover
Playbook

Brand book

Version 1.0 · 2026
PlaybookContentsPage 1

Contents

01Introduction3
02Brand foundation7
03Audience16
04Brand strategy19
05Communication platform23
06Tone & impact28
07Logotype36
08Colour47
09Typography55
10Iconography62
11Art direction65
12Material language72
13Grid & spacing74
14Editorial & templates79
15Data visualisation81
16Motion83
17Brand in use87
18Merchandise96
PlaybookAt a glancePage 2
The brand at a glance

The brand's brain.

The all-in-one brand platform.

Lime#D5FC44
Paper#F4F3EF
Near-black#0B0B0C
Coal#1B1B1F
Grey#6B6B70
InterDisplay & text
PlaybookIntroductionPage 3
01

Introduction

What this brand is, and how to use this book.

PlaybookIntroductionPage 4
Introduction

What this is

One product for the whole chain: brief, strategy, identity, brand book, assets and the work that comes after. The book is a view, not a file. The asset is rendered, not uploaded. The client sees the same thing you do.

PlaybookIntroductionPage 5
Introduction

Vision

Every brand has one brain, and everything the brand makes comes out of it.

PlaybookIntroductionPage 6
Introduction

How to use this brandbook

This book is for anyone who writes, designs or builds for Playbook — including the agents. Open it before you make anything, and check the thing you made against it after. If the book and the product disagree, the product is wrong.

PlaybookBrand foundationPage 7
02

Brand foundation

The convictions everything downstream answers to.

PlaybookBrand foundationPage 8
Brand essence

The brand's brain.

Purpose
The brand in as few words as possible — what every decision is checked against.
Usage
Inside the company: briefs, reviews, onboarding. Not printed as a line.
PlaybookBrand foundationPage 9
Brand foundation

Belief

Great work happens when the brand's thinking and its output live in the same place.

Mission

Build the platform where a brand is thought through, built, kept and produced — by studios, by companies, and by their agents.

PlaybookBrand foundationPage 10
Brand foundation

Positioning & USP

For studios and brand-led companies, Playbook is the brand platform where the brand's thinking and everything it produces live in one place.

Brand promise

What you see in the book is what the product makes.

PlaybookBrand foundationPage 11
Reasons to believe
01

The brand book is rendered live from the fields.

02

Assets carry rights per image.

03

The sales site's demo runs the real extractor.

04

HUMAN runs its own clients on it.

PlaybookBrand foundationPage 12
Tagline

The all-in-one brand platform.

Purpose
The promise, said in one breath to the outside world.
Usage
End of films and campaigns, packaging, the website hero, beside the logo in a lockup.
PlaybookBrand foundationPage 13
Brand foundation

Category point of view

The category assumes a brand is a folder: guidelines in a PDF, assets in a drive, strategy in a deck nobody opens. Every tool then organises the folder better. Playbook assumes a brand is a set of decisions, and that every artefact should be rendered from those decisions. Change the colour once and the book, the portal and the asset kit change with it.

PlaybookBrand foundationPage 14
Brand foundation

Frame of reference

Closer to a studio's own way of working than to a DAM. We refuse the file-storage category: nothing is stored twice, and nothing is a picture of the truth.

Differentiation

playbook.com stores; we create. Kive generates; we generate on a brand. Frontify manages; we build the brand first. None of them start before the assets exist.

PlaybookBrand foundationPage 15
Brand values
01

Honest

02

Whole

03

Calm

PlaybookAudiencePage 16
03

Audience

The people the brand is built for. Every decision traces back here.

PlaybookAudiencePage 17
Audience

Core consumer group

Studio founders with three to ten brands who are done gluing tools together.

Target audience

Studios and brand-led companies that produce a lot and want it to hold.

Functional & emotional benefits

Functional: one place, one truth, assets that are always current, a client who finds the file alone. Emotional: the calm of knowing the brand holds — and the pride of showing it.

PlaybookAudiencePage 18
Personas
Lina, 38, creative director at a 12-person studioRuns four brand projects at once. Hates that the strategy lives in a deck nobody opens. Needs the book to be true the day it ships. Works from a bright Stockholm studio with paper on every wall.
PlaybookBrand strategyPage 19
04

Brand strategy

How the brand is organised, and the rules the product obeys.

PlaybookBrand strategyPage 20
Brand strategy

Brand architecture

Playbook is the product. HUMAN is the studio that builds it and uses it. Brands inside Playbook are the clients' — never sub-brands of ours.

Product philosophy

Render, never build. One value in one place. Unknown must be sayable. A number on screen is computed from what it describes. Nothing ships that the book would not approve.

PlaybookBrand strategyPage 21
Brand strategy

Naming & nomenclature

Playbook is the product, always capitalised, never 'the Playbook'. A brand inside it is a brand, never a project or a client. A workspace is where a studio or a company works. A board is a collection in the library. Phases are numbered 0–6 and named: Framework, Discovery, Strategy, Direction, Identity, Applications, Brand book.

PlaybookBrand strategyPage 22
Brand strategy

20-year roadmap

5 years: the standard tool for studios in the Nordics. 10: the place brands are built, for companies and their agents. 15: the brand layer that other tools connect to. 20: still one brain per brand.

PlaybookCommunication platformPage 23
05

Communication platform

What the brand says, and how the same message survives every format.

PlaybookCommunication platformPage 24
Core message

Think the brand through once, and every asset comes out of that thinking.

Purpose
The one thing every message has to leave behind.
Usage
The website's opening line, pitch decks, press releases, the first sentence of sales copy.
PlaybookCommunication platformPage 25
Messaging pillars
01

One brain: strategy to asset, in one place.

02

Honest rendering: nothing stored twice, nothing decorative.

03

Built for studios: portal, quotes, retainers.

04

Agents welcome: readable by machines.

PlaybookCommunication platformPage 26
Communication platform

Product messaging framework

Claim: your brand book is a view, not a file. Mechanism: every page renders from the brand's fields. Benefit: change once, it changes everywhere. Proof: the book on this site is rendered live.

Language system

We say: brand, book, asset, workspace, request. We avoid: DAM, content hub, synergy, AI-powered. Technical terms get a plain sentence next to them the first time.

Message translation

Web: 'The brand's brain lives here.' Social: 'Paste your site. See your brand.' Studio pitch: 'Your client finds the logo at seven in the evening without emailing you.' Portal: 'Everything about your brand, in one place.'

PlaybookCommunication platformPage 27
Communication platform

Brand manifesto

A brand is not a folder. It is a set of decisions — who you are for, what you refuse, what you promise — and everything you make should be rendered from those decisions. The book, the portal, the campaign image: views of the same brain. We built Playbook because the tools we had stored the pictures and lost the thinking. Here the thinking comes first, and the pictures come out of it.

PlaybookTone & impactPage 28
06

Tone & impact

How the brand sounds — and what that makes possible.

PlaybookTone & impactPage 29
Tone & impact

Tone of voice

A senior colleague: plain, specific, calm. Short sentences. Verbs. Say what a thing is, then what it does. Never 'AI-powered', never 'seamless', never an exclamation mark. When something is unknown, say so — an honest empty field beats a confident guess.

PlaybookTone & impactPage 30
Tone & impact

Tone principles

Plain before clever. Specific before general. Calm before loud. Say what a thing is, then what it does. If something is unknown, say so. If a number is on screen, it was computed from what it describes.

PlaybookTone & impactPage 31
Tone & impact

Tone spectrum

Serious 70 / playful 30 — one bright note per page, never a joke per sentence. Authority 60 / friend 40 — a senior colleague, not a lecturer. Formal 40 / casual 60 — full sentences, contractions allowed, no slang.

PlaybookTone & impactPage 32
Headline examples
01

The all-in-one brand platform.

02

The brand's brain lives here.

03

Paste your site. See your brand.

04

Your client finds the logo at seven in the evening.

05

Change it once. It changes everywhere.

06

Render, never build.

PlaybookTone & impactPage 33
Tone & impact

What this enables

A studio runs ten brands without gluing five tools together. A company keeps one brand consistent across every hand that touches it. A client sees where the project stands and takes the file without asking. An agent reads the brand and produces on-brand work without a human copying rules into a prompt.

PlaybookTone & impactPage 34
Tone & impact

Brand narrative

Every brand has a moment where the strategy deck, the identity files and the campaign images stop agreeing. Someone updates a colour in one place and not the others; someone emails for the logo; someone generates an image that has nothing to do with the brand. Playbook is the place where that stops being possible, because there is only one place. Built by a studio that had that problem every week — and used its own product to fix it.

PlaybookTone & impactPage 35
Tone & impact

Strategic do's and don'ts

Do: render from the brand's fields. Do: show the real product. Do: say 'unknown' when it is. Do: keep client colours in the content, never in the shell. Don't: store the same fact twice. Don't: use stock imagery or 3D blobs. Don't: promise what the code does not do. Don't: write 'AI-powered'.

PlaybookLogotypePage 36
07

Logotype

The mark, the room it needs, and how it must never be used.

PlaybookLogotypePage 37
The mark
Playbook
Clear space — The height of the “P” on every side.
Clear space — A quarter of the symbol's width on every side.
PlaybookLogotypePage 38
On backgrounds
Playbook
Playbook
Playbook
PlaybookLogotypePage 39
Never do
  • Never rotated, never outlined, never with a drop shadow.
PlaybookLogotypePage 40
Primary logo
PlaybookLogotypePage 41
Secondary logo
PlaybookLogotypePage 42
Responsive / optimised versions
Playbook
Large — 120 px and up
Playbook
Medium — 48 to 120 px
Small — below 48 px
PlaybookLogotypePage 43
Clear space diagram
Playbook
XX

The height of the “P” on every side. No other element may enter the dashed area — not type, not an image edge, not a partner mark.

PlaybookLogotypePage 44
Placement principles
Playbook
Top left — default
Playbook
Centred — covers and signage
Playbook
Bottom right — endorsement

The dashed line is the margin from the layout system. The mark never crosses it, and never sits closer to another element than its own clear space.

PlaybookLogotypePage 45
Incorrect usage
Playbook
Never stretch or condense.
Playbook
Never rotate.
Playbook
Never recolour the mark.
Playbook
Never add effects.
Playbook
Never reduce the opacity.
Playbook
Never alter the proportions.
PlaybookLogotypePage 46
Co-branding lockups
Playbook
Partner mark
Side by side — equal partners
Playbook
Partner mark
Stacked — endorsement

The divider is one grid unit; the partner mark is scaled to match the optical height of ours, never the literal height. Neither mark may sit inside the other's clear space. Where a partner's own guidelines conflict with these, theirs govern their mark and ours governs ours.

PlaybookColourPage 47
08

Colour

Roles before values. Every combination is contrast-checked.

PlaybookColourPage 48
Core palette
Lime
Paper
Near-black
Coal
Grey
PlaybookColourPage 49
Shades

Derived from the core colours — never hand-picked.

Lime
Coal
Grey
PlaybookColourPage 50
Accessibility

Every ratio below is computed, not claimed.

AaNear-black
Near-black on Paper17.72:1 · AAA
AaNear-black
Near-black on Lime16.71:1 · AAA
AaCoal
Coal on Paper15.46:1 · AAA
AaCoal
Coal on Lime14.58:1 · AAA
AaGrey
Grey on Paper4.77:1 · AA
AaGrey
Grey on Lime4.50:1 · AA
AaGrey
Grey on Near-black3.71:1 · AA large
AaGrey
Grey on Coal3.24:1 · AA large
AaCoal
Coal on Near-black1.15:1 · not for text
AaPaper
Paper on Lime1.06:1 · not for text
PlaybookColourPage 51
Accessibility · the rules
Text of any size4.5:1 or more
  • Paper on Near-black 17.7:1
  • Near-black on Paper 17.7:1
  • Lime on Near-black 16.7:1
  • Near-black on Lime 16.7:1
  • Paper on Coal 15.5:1
  • Coal on Paper 15.5:1
  • Lime on Coal 14.6:1
  • Coal on Lime 14.6:1
  • Paper on Grey 4.8:1
  • Grey on Paper 4.8:1
  • Lime on Grey 4.5:1
  • Grey on Lime 4.5:1
Large text only3:1 — 24 px, or 18.7 px bold
  • Near-black on Grey 3.7:1
  • Grey on Near-black 3.7:1
  • Coal on Grey 3.2:1
  • Grey on Coal 3.2:1
Never for textUnder 3:1 — lines, fills, decoration
  • Near-black on Coal 1.1:1
  • Coal on Near-black 1.1:1
  • Lime on Paper 1.1:1
  • Paper on Lime 1.1:1
  • Motion. With reduced motion switched on, nothing moves: no slides, no 18 px entrances. Fades up to 150 ms stay, everything else is still.
  • Text size. Body text no smaller than 16 px on screen and 9 pt in print. Captions 13 px at the least.
  • Images. Every image that carries meaning has alt text that says what it shows and why it is there. Decorative images have empty alt text.
  • Colour alone. Colour never carries meaning on its own — a status, an error, a link also has a word, an icon or an underline.
PlaybookColourPage 52
Colour usage examples
Lime10%
Paper60%
Near-black25%
Coal2%
Grey3%

Surface carries the page, ink carries the words, and the accent is spent once. A layout where the accent competes with the surface is the most common way this system goes wrong.

PlaybookColourPage 53
Incorrect colour usage
Aa
Lime on Paper — 1.06:1, insufficient
Aa
Paper on Lime — 1.06:1, insufficient
Aa
Near-black on Coal — 1.15:1, insufficient
Aa
Near-black on Grey — 3.71:1, AA large
PlaybookColourPage 54
Never
  • Lime never carries text on paper — contrast fails.
  • Client brands' colours live in the content, never in the shell.
PlaybookTypographyPage 55
09

Typography

A display face for presence, a text face for reading.

PlaybookTypographyPage 56
Display face
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 & ? ! @ # % ( ) — ; :
Google FontsFree for web and printWeights: 400, 600
PlaybookTypographyPage 57
Text face
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 & ? ! @ # % ( ) — ; :
Google FontsFree for web and printWeights: 400, 600
PlaybookTypographyPage 58
Type scale
StyleSizeLine heightTrackingSample
Display76 px0.95-0.03emPlaybook
H154 px1.0-0.02emPlaybook
H238 px1.1-0.02emPlaybook
H327 px1.2-0.01emPlaybook
Body17 px1.60Playbook
Caption13 px1.50.02emPlaybook
PlaybookTypographyPage 59
Hierarchy in use
Playbook

The same page, set to the scale in this book

Display carries the argument; the text face carries the evidence. Nothing in a layout should need a third size that is not on the scale — if it does, the hierarchy is the problem, not the type.

Display — InterText — Inter
PlaybookTypographyPage 60
Pairing examples
AaInter — displayGoogle Fonts · 400, 600
AaInter — textGoogle Fonts · 400, 500, 700
PlaybookTypographyPage 61
Do's and don'ts
Playbook
Display for headlines only.
Playbook
Never set body text in the display face.
Playbook
Text face at its designed tracking.
Playbook
Never letterspace running text.
Playbook
One weight change per hierarchy step.
Playbook
Never stack italic and caps.
PlaybookIconographyPage 62
10

Iconography

Stroke weight, corner treatment, and the grid icons are drawn on.

PlaybookIconographyPage 63
Iconography

Principles

Line icons, 1.5 px stroke, rounded caps, on a 20 px grid. Monochrome, inheriting text colour.

Never
  • The ✳ is a mark, not an icon — never in the icon set.
PlaybookIconographyPage 64
Icon grid system

Icons are drawn on a 24 px artboard with a 2 px keyline, on the same 8 px base unit as every other measurement in the system. Square shapes fill the keyline; circular shapes overshoot it slightly so the two read at the same optical size.

PlaybookArt directionPage 65
11

Art direction

How imagery is chosen, treated and cropped.

PlaybookArt directionPage 66
Art direction

Principles

Real product and real brands. Generated imagery is always from a brand's own palette and labelled as generated. No stock. No 3D blobs. No purple gradients.

Never
  • Screenshots are the product, never mock-ups.
PlaybookArt directionPage 67
Product imagery
Product imagery
PlaybookArt directionPage 68
Lifestyle imagery
Lifestyle imagery
PlaybookArt directionPage 69
Abstract visuals
Abstract visuals
PlaybookArt directionPage 70
Light, tone and atmosphere
Light, tone and atmosphere
PlaybookArt directionPage 71
Do's and don'ts
Do — As shot: full colour, the subject given room.
Never desaturate or push the contrast.
Never tilt the frame.
Do — Light and colour as the brand found them.
Never add a colour cast or filter.
Never crop into the subject.
PlaybookMaterial languagePage 72
12

Material language

How the brand speaks about what it is made of — without overclaiming.

PlaybookMaterial languagePage 73
Material language

Philosophy

Playbook is software. We do not talk about materials — we talk about what is rendered from what. The only claim we make about our own making is that nothing on screen is decoration.

PlaybookGrid & spacingPage 74
13

Grid & spacing

The layout system every surface inherits.

PlaybookGrid & spacingPage 75
Grid & spacing

System

A 12-column grid with 1.5 rem gutters. Content grids are three columns on desktop, two on tablet, one on a phone. Sections breathe with clamp(4rem, 5vw, 10rem). Cards have 12–22 px radii; the bigger the surface, the bigger the radius.

PlaybookGrid & spacingPage 76
Layout system
TokenValue
Corner radius12px
Base unit8px
Columns12
Margin64px
Max width1280px
PlaybookGrid & spacingPage 77
Grid diagram
Corner radius12px
Base unit8px
Columns12
Margin64px
Max width1280px
PlaybookGrid & spacingPage 78
Layout examples
Editorial — 8 of 12
Split — 6 and 6
Full bleed
PlaybookEditorial & templatesPage 79
14

Editorial & templates

The layouts other people will fill in without us.

PlaybookEditorial & templatesPage 80
Editorial & templates

Template system

Two templates: the presentation (16:9, near-black cover with the ✳, paper content pages) and the document (A4, paper, Inter, one accent line in lime). Both render from the brand's fields; nothing is pasted in.

Editorial rules

One idea per page. Headlines set in Inter Semibold, balanced. Body at 65 characters. Numbers in tables, never in prose. Uppercase labels with tracking for eyebrows.

PlaybookData visualisationPage 81
15

Data visualisation

Numbers as part of the system, not an afterthought.

PlaybookData visualisationPage 82
Data visualisation

Chart principles

Charts are part of the design system: an area fill, a faint grid, an emphasised endpoint. Every number on a chart is computed from the data it describes. No decorative charts.

Categorical & sequential colour

Categorical: lime, paper, coal, grey — four steps, then hatching. Sequential: lime to near-black. Semantic good/warning/critical are separate from the accent and never lime.

PlaybookMotionPage 83
16

Motion

How the brand moves — easing, tempo, and what motion is for.

PlaybookMotionPage 84
Motion

Principles

150–300 ms, ease-out. Reveals on load, not on scroll. Hover states move 2 px at most. Reduced motion is respected everywhere.

Never
  • Motion clarifies, never decorates.
PlaybookMotionPage 85
Storyboard
Playbook
0 ms — the surface alone.
Playbook
160 ms — the mark rises on the curve.
Playbook
400 ms — in place. Nothing overshoots.
Playbook
The all-in-one brand platform.
650 ms — the line follows.
PlaybookMotionPage 86
Easing & timing
Calm — cubic-bezier(0.16, 1, 0.3, 1)Nothing hurries, nothing bounces. Long curves, short distances.
Fast · 150 msHover, buttons, toggles
Standard · 250 msCards, panels, fields opening
Slow · 400 msPage changes, full screen, reveals

Transform and opacity only. Every motion has a still equivalent: with reduced motion switched on, nothing on this page moves.

PlaybookBrand in usePage 87
17

Brand in use

The identity where people actually meet it.

PlaybookBrand in usePage 88
Website
Playbook
Products · About · Contact

The all-in-one brand platform.

See the range

Near-black ground, paper text, lime for one action per screen. Hero with the live extractor. Sections breathe; grids are three columns. Motion reveals on load, not on scroll. Every case card is rendered from a real brand.

PlaybookBrand in usePage 89
Brand in use

Digital

The product itself: studio, client portal, public brand book. Sales site on playbookbrand.com. Email: plain text, one message, no drip. Social profiles: the ✳ on lime as avatar, the wordmark on near-black as banner.

PlaybookBrand in usePage 90
Social post formats
The all-in-one brand platform.
What you see in the book is what the product makes.
The brand's brain lives here.
Paste your site.
Your client finds the logo at seven in the evening.
Change it once.

One image, one sentence. Rhythm: brand image, product screenshot, brand image. Type only in Inter, only in paper or near-black. Lime as ground for statements, never as text on paper. Formats: 1:1 and 4:5; stories reuse the 4:5 crop.

PlaybookBrand in usePage 91
Campaign
Playbook

The all-in-one brand platform.

Out of home · 3×6 m

Hero image generated from a real brand's palette, one line, one action: 'Paste your site.' No feature lists in campaigns; the product demo is the campaign.

PlaybookBrand in usePage 92
Print & stationery
Playbook
Playbook

Rarely. A business card: near-black, ✳ in lime, name and email in Inter. A printed brand book is a mockup of the product, not a deliverable — the book lives on the web.

PlaybookBrand in usePage 93
Blind emboss
Embossed
Debossed
PlaybookBrand in usePage 94
Envelopes & tape
Playbook
C4
Playbook
C5
Playbook
DL
PlaybookBrand in usePage 95
Brand in use

Environmental & signage

Studio walls and events only. A single lime panel with the ✳, or the wordmark on near-black. No wayfinding system — we are not a venue.

PlaybookMerchandisePage 96
18

Merchandise

What the brand puts its name on when it does not have to.

PlaybookMerchandisePage 97
Merchandise

The ✳ on a tote or a cap, in lime on near-black or near-black on paper. Never the wordmark on merch — the mark is enough. Never on white.