Skip to main content
Fill in this workbook as you go. Each section has a “Concept review” dropdown underneath it. These explain the concept behind the section, not a rule to follow. Your brand might land somewhere different than the examples show, and that’s fine. Examples throughout use Doughnut Labs, a SaaS company that sells disruptive Doughnut Technology. Delete the grayed example text as you fill each section in.
This page covers everything visual except the logo, which has enough rules of its own to warrant a separate document. See logo usage.
1

Record exact values, not descriptions

“Warm off-white” is not a color. A hex code is. Anything a designer has to interpret will be interpreted differently by the next designer.
2

Say where each element is used, not just what it is

A palette without usage rules produces layouts that are technically on-palette and look nothing alike.
3

Check contrast as you fill in the palette

It’s cheaper to reject a color pairing here than to discover it fails on a shipped page.
4

Add optional sections only where the brand actually shows up

Motion rules matter if the brand animates. Delete them if it doesn’t.

​
Core sections

​
1. Color palette

One row per color. Include every value anyone will need, so nobody eyedroppers a screenshot. How much of each color should a layout use? E.g. Roughly 60% Sugar, 30% Ink, 10% Glaze Pink. Glaze Pink is for one focal element per layout, usually the primary action. Accent and status colors never carry brand meaning, only function.
Recording every color space up front is about who has to use the file later. A hex code is useless to a printer and a Pantone reference is useless in CSS, and the person who needs the missing one is rarely the person who built the palette. Filling all the columns once removes a recurring interruption.The proportion question is separate from the palette itself and is often what actually distinguishes two brands using similar colors. A palette lists what’s allowed. Proportion describes what the brand looks like, which is why two designers can both stay inside the palette and produce layouts that don’t look related.How tightly to specify proportion varies a lot. Some brands fix ratios precisely, which produces strong consistency and limits what a designer can respond to. Others give a dominant color and leave the rest open, trading some consistency for range.

​
2. Color usage and contrast

Approved pairings only. Anything not listed needs checking before use. What contrast standard does the brand hold itself to? E.g. WCAG 2.2 AA: 4.5:1 for body text, 3:1 for text 24px and above or 19px bold, and 3:1 for interactive elements and their focus states.
Contrast fails late and expensively. A pairing that looked fine on a designer’s calibrated screen shows up as a legibility complaint months later, by which point it’s on a hundred pages, and the fix is a palette change, which touches everything.Putting the ratios in the palette document changes when the constraint gets applied. A designer choosing from a table of approved pairings is working inside the constraint. A designer choosing freely and being corrected afterwards is working against it, and the correction gets negotiated.Where brands genuinely differ is in how much of the palette they’re willing to restrict. A vivid brand color that fails on body text can be kept and confined to large text and shapes, or the palette can be adjusted so it passes everywhere. Both preserve accessibility; they cost different things.

​
3. Typography

Type scale Anything else a designer needs to know about setting type? E.g. Headlines are set tight, with letter-spacing at minus 2%. Body copy is never justified. Maximum line length is 75 characters. Never set body copy below 14px.
The fallback stack is the part most often left blank and the part most visible when it’s wrong. A licensed typeface fails to load for reasons nobody controls: a blocked font host, an email client, a partner’s template. What renders instead is either a considered fallback or whatever the system reaches for, and the second one is where a brand suddenly appears in Times New Roman.Licensing belongs in this table for a similar reason. Font licenses are scoped by use (desktop, web, app, broadcast) and by volume, and the gap tends to surface at the worst moment: an agency building an ad, a partner producing a deck, a new hire installing the file. Recording the scope next to the typeface makes the limit visible before somebody exceeds it.A scale does something different from the two columns beside it. Listing sizes fixes the relationships between them, so a layout with three heading levels reads as a hierarchy. Sizes picked ad hoc read as three arbitrary numbers. Brands vary in how strictly they enforce it, and a scale treated as fixed and one treated as a starting point produce visibly different amounts of variation.

​
4. Layout and spacing

Grid E.g. 12 columns on desktop with 24px gutters and a 1200px maximum content width. 6 columns on tablet, 4 on mobile. Content never spans edge to edge on screens above 1400px. Spacing scale E.g. All spacing is a multiple of 8: 8, 16, 24, 32, 48, 64, 96. 4px is allowed only for optical adjustment inside a component. Corner radius, borders, elevation E.g. 8px radius on cards and inputs, 4px on buttons, full round on avatars. Borders are 1px in Ink at 12% opacity. One shadow only: 0 2px 8px Ink at 8%.
A spacing scale works by removing a decision. When the options are 16 or 24, a designer picks one and moves on. When the options are every integer, the gap between two elements becomes a small judgment made hundreds of times, and those judgments don’t agree across people or across weeks.The compounding effect is the reason to write it down. Individually, a 22px gap where the pattern says 24 is invisible. Across a page, and then across pages built by different people, the accumulated near-misses read as a layout that feels slightly unresolved without anyone being able to point at the reason.Radius, border, and shadow behave like a very small vocabulary. Two shadow values look deliberate; nine look like nobody was tracking them. The number a brand settles on is a genuine choice about how much variety the system needs, and the count matters more than which values get picked.

​
5. Photography and illustration

Photography direction E.g. Real workspaces, natural light, and people mid-task. Shot slightly wide with room for text overlay. Color-graded warm to sit next to Sugar and Glaze Pink. What photography should avoid E.g. Stock imagery of people laughing at laptops. Heavy filters. Empty desks. Anything shot on a pure white background, which clashes with the off-white palette. Illustration direction E.g. Flat two-color line work in Ink and Glaze Pink, 2px strokes, no gradients. Used for empty states and explanatory diagrams, never as decoration next to photography. When to use which E.g. Photography for anything about customers or teams. Illustration for anything about how the product works. Never both in the same layout.
Image direction resists specification in a way color and type don’t, since there’s no hex code for “feels like us.” The negative half usually does the work. “Natural light, real workspaces” describes a very large set of possible photos. “No posed groups, no pure white backgrounds” removes most of the ones that would have been wrong, and does it in fewer words.The choice between photography and illustration carries meaning of its own, separately from the style of either. Photography implicitly claims something happened. Illustration signals that the thing being shown is a model or a simplification. A product diagram rendered as a photorealistic screenshot and one rendered as a drawing make different promises to a reader about how literal to take them.Brands land in different places on how much room to leave here. Tight direction produces a coherent library and a narrow one. Loose direction produces range and, over enough contributors, drift.

​
6. Iconography

Icons drift faster than most other elements because each one is added individually, usually under deadline, by whoever needed it. Nobody sets out to build an inconsistent set. It happens one urgent icon at a time, and the inconsistency only becomes visible once forty of them sit on a page together.Specifying the grid and stroke lets a new icon match without the person drawing it having to study the existing ones. It also makes the request path meaningful: “ask for an icon” is only reasonable advice if the person fulfilling the request has a spec to work from.The size rule is quieter but does real work. A 24px icon scaled to 19px puts strokes on half pixels, which is a large part of why some interfaces look slightly soft without an obvious cause.

​
Optional sections

​
A. Motion

Optional: include if the brand appears in interfaces, video, or animated ads
Motion reads as personality faster than most static choices, which cuts both ways. Consistent timing across an interface is barely noticed and feels considered. Inconsistent timing is noticed as sloppiness, even by people who couldn’t say what they noticed.The reduced-motion row is doing something different from the rest of the table. For some people, large or parallax movement causes actual physical discomfort, and the operating system already exposes a preference for it. Deciding once what the brand does when that preference is set is easier than resolving it per component.

​
B. Sub-brand and product theming

Optional: include if products, tiers, or regions vary the visual system
What can a sub-brand change, and what stays fixed? E.g. A Doughnut Labs product can change the accent color and its illustration subject matter. Typography, spacing scale, iconography, and the neutral palette are fixed. Glaze Pink is reserved for the master brand and never becomes a product accent.
This section is really about drawing a line between the parts of the system that carry recognition and the parts that carry differentiation. Typography and spacing tend to sit on the recognition side, since they’re what makes two layouts feel related even when nothing else matches. Color often sits on the other side, because it’s the fastest thing to tell apart.Where the line falls is a strategy question, and it usually gets answered by whoever owns the portfolio. A brand that wants its products read as one family draws it tightly. A brand whose products serve different buyers who don’t overlap can afford to draw it loosely, and gains room to make each one feel native to its own market.
Last modified on August 12, 2026