Brand guidelines examples: what the best ones contain
Search for brand guidelines examples and you get a hundred PDFs of somebody's rebrand. They look impressive. Most of them are useless, because a brand guide is not a portfolio piece. It is a reference document that someone opens at 11pm to answer one question: what color is the button.
This page is about what actually goes in that document, and what three well-known companies really publish, as opposed to what the listicles claim they publish.
The seven sections a usable brand guide has
Strip away the mood boards and every workable brand guide contains the same seven things.
- Logo and clear space. The mark, its lockups, the minimum size, and how much empty room it needs. This is the one section every guide already has.
- Color, with roles. Not a swatch grid. A list of colors with jobs: this one is the primary action, this one is the page background, this one means "destructive." A palette without roles is a paint sample.
- Typography, with a scale. Which typefaces, at which sizes and weights, for which purpose. A scale beats a list, because it tells you what to do with a size you did not anticipate.
- Spacing and layout. The unit of rhythm (usually 4px or 8px) and the grid. This is the section most guides skip, and it is the reason implementations drift.
- Voice. How the brand writes. Concrete enough to settle an argument, which means example sentences, not adjectives.
- Imagery and illustration. The treatment, the subject matter, and what is off-limits.
- Application. The mark on a button, on a business card, on a dark background, on a photo. Rules that are never shown in use get broken immediately.
If a guide has all seven and a designer can implement a new screen from it without asking a question, it works. If it has fourteen sections of brand philosophy and no type scale, it does not.
What Stripe actually publishes
Stripe is the reference every SaaS company points at, so it is worth being precise about what exists.
Stripe publishes a brand assets page with logos and usage rules. It names its two core colors in words: slate and blurple. The guidance is to use slate and blurple on light backgrounds and white on dark backgrounds.
What Stripe does not publish is a hex code, for either color, anywhere. The values you will see quoted everywhere, #635BFF for blurple and #0A2540 for slate, come from third-party aggregators and community documentation, not from Stripe. They are almost certainly right. They are also not official, and you will find a competing value (#533afd) circulating, which appears to be an accent token rather than the brand color. If you are matching Stripe's blue for a client, sample the asset, do not trust the listicle.
Stripe's typeface is Söhne, from Klim Type Foundry, designed by Kris Sowersby. It arrived with the July 2020 site redesign, replacing Camphor. Any article that tells you Stripe uses Camphor is more than five years stale. Söhne itself has one of the better origin stories in type design: Sowersby built it as the memory of Akzidenz-Grotesk seen through the reality of Helvetica, rooted in the signage of Unimark's 1960s New York City subway wayfinding.
The distinctive part of Stripe's system is not the logo. It is the gradient: sweeping diagonal spectrum bands, blurple bleeding into teals and oranges, used as backgrounds and section dividers. It reads as light through a prism. Nobody else in fintech looks like that, and it survives being reduced to a 40px strip at the top of a docs page.
What to steal: naming colors by role and by name, not by hex, so the palette survives a redesign. What to notice: Stripe has no public design system. It has a press kit and a set of engineering blog posts. The polished multi-hundred-page brand bible you are imagining does not exist.
What Notion actually publishes
Even less. Notion offers a media kit with logos, screenshots, and illustrations. There is no public design system and no published color specification.
That is fine, because Notion's brand is legible without one. The system is monochrome restraint plus hand-drawn line illustration. Near-black on off-white, inverted for dark mode. Note that it is an off-white, warm rather than pure #FFFFFF, which is why "Notion is black on white" is a description, not a spec. Do not publish #000000 on #FFFFFF as Notion's official palette. Nobody official ever said that.
The illustrations are the identity. Single-weight black line drawings of soft, thinking characters, no fills, no gradients, drawn in a lineage that traces to Saul Steinberg. They carry meaning rather than decorate, which is unusual for a productivity tool that could have shipped screenshots instead. In July 2024 the studio Buck expanded the characters into the "Make with Notion" campaign and, for the first time, let real color in.
Typography is reported to be Inter for the product interface, with Lyon used sparingly as an editorial serif. Both are secondary-source claims, not official ones. You will also see "NotionInter" cited as a bespoke typeface. Treat that as unverified; it looks like a CSS token name that escaped into the wild.
What to steal: the discipline of a single expressive element. Notion spends all of its brand budget on illustration and none on color, and it is instantly recognizable. Most brands do the opposite and end up recognizable as nothing.
What Spotify actually publishes
Spotify publishes the most, and the most confusingly, because there are two documents and they are for different people.
The Design and Branding Guidelines are for third parties integrating with Spotify. They specify Spotify black #191414 as a fallback color. That is a real, officially published hex, which makes it the exception on this page. Those same guidelines tell integrators to use a platform default sans (Helvetica Neue, Helvetica, Arial), because Spotify does not license its brand typeface to you.
Spotify Green is the primary brand color, and Spotify does not publish its hex either. Two values circulate: #1DB954 (the classic green) and #1ED760 (the brighter current one). Cite both or cite neither.
The typeface is where most articles are wrong. Since May 2024, Spotify's face is Spotify Mix, a bespoke variable typeface made with the Berlin foundry Dinamo over roughly eighteen months. It replaced Circular (Lineto), which Spotify had used since the 2014 refresh. Spotify Mix carves a "transmitter" shape into the negative space of letters like p, b, and d, so the counters suggest sound leaving a speaker, and it ships four switchable number sets. If a brand-guidelines listicle tells you Spotify uses Circular, it was written before May 2024 or copied from something that was.
Underneath the brand sits Encore, Spotify's design system, which is really a federation of design systems: a foundation layer of color, type, motion, spacing, and writing, then separate web and mobile systems, then local systems for products like Spotify for Artists, all sharing tokens. It is the clearest public example of the thing large organizations eventually need, which is not one design system but a way for forty of them to agree.
What to steal: the token layer. Encore's foundation is what lets forty surfaces change together. If you have more than one product, this is the shape of the answer. See what design tokens are for the mechanics.
The pattern across all three
None of these companies publishes the document you are trying to copy.
Stripe publishes a press kit. Notion publishes a media kit. Spotify publishes an integration spec. The real guidelines are internal, and what leaks out is logos and a paragraph of usage rules. The comprehensive brand bible is a genre of design-portfolio artifact, not an operational document these companies maintain in public.
What they do have, all three, is a system that survives contact with reality: a small set of colors with clear jobs, one typeface decision made deliberately and stuck to, and one distinctive move (Stripe's gradient, Notion's line illustration, Spotify's green) that is defended everywhere.
That is the thing to copy. Not the PDF.
Where to go from here
The three sections most brand guides get wrong are color roles, the type scale, and tokens, in that order of impact.
- Start with choosing brand colors if you are picking a palette and do not want to end up with six blues.
- Read what are design tokens if you already have a palette and it keeps drifting between the design file and the code.
- Read the full teardowns: Stripe, Notion, and Spotify.
If you would rather answer a few questions and get a palette, a type scale, and a token file you can hand straight to an AI coding agent, that is what TasteMaker does.
Sources
Keep reading
- What are design tokens? A working definitionDesign tokens are named design decisions machines can read. The three-layer structure that works, the four mistakes, and why AI agents raised the stakes.
- Choosing brand colors: a method that survives contactChoose brand colors by assigning roles before hues, testing contrast early, and building a ramp you can ship. With the accessibility math that decides it.
TasteMaker turns your design taste into a brand kit AI coding tools read directly: design tokens, an Agent Skill package, and a live MCP server. Free to build.
Build your brand kit