At a glance

PlaybookAt a glancePage 3
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
01

Introduction

PlaybookIntroductionPage 5
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 6
Introduction

Vision

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

PlaybookIntroductionPage 7
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.

02

Brand foundation

PlaybookBrand foundationPage 9
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 10
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 11
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 12
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 13
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 14
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 15
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 16
Brand values
01

Honest

02

Whole

03

Calm

03

Audience

PlaybookAudiencePage 18
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 19
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.
04

Brand strategy

PlaybookBrand strategyPage 21
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 22
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 23
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.

05

Communication platform

PlaybookCommunication platformPage 25
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 26
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 27
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 28
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.

06

Tone & impact

PlaybookTone & impactPage 30
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 31
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 32
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 33
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 34
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 35
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 36
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'.

07

Logotype

PlaybookLogotypePage 38
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 39
On backgrounds
Playbook
Playbook
Playbook
PlaybookLogotypePage 40
Never do
  • Never rotated, never outlined, never with a drop shadow.
PlaybookLogotypePage 41
Primary logo
PlaybookLogotypePage 42
Secondary logo
PlaybookLogotypePage 43
Responsive / optimised versions
Playbook
Large — 120 px and up
Playbook
Medium — 48 to 120 px
Small — below 48 px
PlaybookLogotypePage 44
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 45
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 46
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 47
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.

08

Colour

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

Derived from the core colours — never hand-picked.

Lime
Coal
Grey
PlaybookColourPage 51
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 52
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 53
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 54
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 55
Never
  • Lime never carries text on paper — contrast fails.
  • Client brands' colours live in the content, never in the shell.
09

Typography

PlaybookTypographyPage 57
Display face
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 & ? ! @ # % ( ) — ; :
Google FontsFree for web and printWeights: 400, 600
PlaybookTypographyPage 58
Text face
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 & ? ! @ # % ( ) — ; :
Google FontsFree for web and printWeights: 400, 600
PlaybookTypographyPage 59
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 60
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 61
Pairing examples
AaInter — displayGoogle Fonts · 400, 600
AaInter — textGoogle Fonts · 400, 500, 700
PlaybookTypographyPage 62
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.
10

Iconography

PlaybookIconographyPage 64
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 65
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.

11

Art direction

PlaybookArt directionPage 67
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 68
Product imagery
Product imagery
PlaybookArt directionPage 69
Lifestyle imagery
Lifestyle imagery
PlaybookArt directionPage 70
Abstract visuals
Abstract visuals
PlaybookArt directionPage 71
Light, tone and atmosphere
Light, tone and atmosphere
PlaybookArt directionPage 72
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.
12

Material language

PlaybookMaterial languagePage 74
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.

13

Grid & spacing

PlaybookGrid & spacingPage 76
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 77
Layout system
TokenValue
Corner radius12px
Base unit8px
Columns12
Margin64px
Max width1280px
PlaybookGrid & spacingPage 78
Grid diagram
Corner radius12px
Base unit8px
Columns12
Margin64px
Max width1280px
PlaybookGrid & spacingPage 79
Layout examples
Editorial — 8 of 12
Split — 6 and 6
Full bleed
14

Editorial & templates

PlaybookEditorial & templatesPage 81
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.

15

Data visualisation

PlaybookData visualisationPage 83
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.

16

Motion

PlaybookMotionPage 85
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 86
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 87
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.

17

Brand in use

PlaybookBrand in usePage 89
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 90
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 91
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 92
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 93
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 94
Blind emboss
Embossed
Debossed
PlaybookBrand in usePage 95
Envelopes & tape
Playbook
C4
Playbook
C5
Playbook
DL
PlaybookBrand in usePage 96
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.

18

Merchandise

PlaybookMerchandisePage 98
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.