Playbook
The all-in-one brand platform.
The ✳ — a six-pointed asterisk.
The ✳ — a six-pointed asterisk. It marks the brain: the point everything radiates from. Always the same stroke weight as the wordmark's stems. In lime on near-black, in near-black on lime or paper. Never rotated, never outlined, never with a drop shadow.
'Playbook' set in Inter Semibold with tight tracking.
'Playbook' set in Inter Semibold with tight tracking. Always sentence case. Lockup: mark, one x-height of space, wordmark. The wordmark alone is fine; the mark alone only where the name is already present.
Lime #D5FC44 is the primary and the only colour.
Lime #D5FC44 is the primary and the only colour. Near-black #0B0B0C is the ground for the site; paper #F4F3EF for the product. Coal #1B1B1F for raised surfaces on dark, grey #6B6B70 for secondary text. Lime never carries text on paper — contrast fails. Client brands' colours live in the content, never in the shell.
Inter
Inter · The quick brown fox jumps over the lazy dog. 0123456789
Inter for everything.
Inter for everything. Display: Semibold, tight tracking, balanced line breaks. Body: Regular at 16–18 px, 65 characters per line. Labels: uppercase with 0.1em tracking. No second typeface — the client's brand supplies the variety.
Real product and real brands.
Real product and real brands. Screenshots are the product, never mock-ups. Generated imagery is always from a brand's own palette and labelled as generated. No stock. No 3D blobs. No purple gradients.
Motion clarifies, never decorates.
Motion clarifies, never decorates. 150–300 ms, ease-out. Reveals on load, not on scroll. Hover states move 2 px at most. Reduced motion is respected everywhere.
- The all-in-one brand platform.
- The brand's brain lives here.
- Paste your site. See your brand.
- Your client finds the logo at seven in the evening.
The whole text
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.
A 12-column grid with 1.5 rem gutters.
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.
Line icons, 1.5 px stroke, rounded caps, on a 20 px grid.
The whole text
Line icons, 1.5 px stroke, rounded caps, on a 20 px grid. Monochrome, inheriting text colour. The ✳ is a mark, not an icon — never in the icon set.
Playbook is software.
The whole text
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.
Campaign
Every frame shot for Playbook, in the art direction the book describes.
Brand book
Not a PDF of this page: the book renders from the same fields, and changes the moment any of them do.
Open the brand book →