A logo is not a brand system.

A brand built for print has to survive paper. A brand built for screens has to survive a 320 pixel phone, a bright afternoon, and a reader who cannot tell your red from your grey.

The usual delivery is a PDF. A logo with its clear space, a palette of six swatches, two typefaces, a page of dos and don'ts, and a paragraph about the values.

Then it reaches a website and the questions start. What size is body text on a phone. What does the button look like when it is disabled. Which of the six colours is the link. What happens to the logo on a dark background. None of it is in the PDF, so a developer decides, at four in the afternoon, and that decision becomes the brand for everyone who visits.

That is the gap. Not bad design, missing decisions.

A colour is not a colour, it is a contrast budget

This is where brands break most often, and the failure is nearly always the same. A colour that carries the identity gets used for text, because it is the brand colour and text is a place text goes.

Our own accent is a deep burgundy. Here is what it does, measured rather than assumed.

One colour, two completely different verdicts, and the difference is only what sits behind it. On the off-white field it clears AAA for body text with room to spare. On the dark field it is illegible for anything small, and no amount of insisting it is the brand colour changes that.

So the rule in our system is written as a restriction rather than a permission. The burgundy is allowed on buttons, on oversized display characters, and on rules and markers. It is banned for small functional text on the dark field, and banned for focus outlines there, where the off-white does the job at 15:1.

The thresholds worth knowing are few. Body text needs 4.5 to 1. Text at 24 pixels, or 19 pixels bold, needs 3 to 1. Interface components and their focus indicators need 3 to 1 as well. A brand guide that lists colours without listing these numbers has handed the problem to whoever builds with it.

Type is a scale, not two font names

Naming a display face and a text face is the easy half. The half that decides how the brand actually looks is the sizes, and those are usually left to whoever is building the page.

The hard case is the range. A headline set at 96 pixels looks composed on a laptop and absurd on a phone, where it becomes four words per line and a scroll of its own. Fixed sizes with a handful of breakpoints solve this in steps, and the steps are visible: text jumps as the window crosses a threshold.

A fluid scale removes the jump by making size a function of viewport width, with a floor and a ceiling so it cannot become unreadable at either end.

/* minimum, preferred, maximum */
font-size: clamp(2.2rem, 5.8vw, 7.2rem);

/* Below ~380px it holds at 2.2rem and stops shrinking.
   Above ~1990px it holds at 7.2rem and stops growing.
   Between them it tracks the window with no steps. */

What belongs in the system is not the technique, it is the decision: for each role in the hierarchy, the size at the small end and the size at the large end, plus its line height and letter spacing. Six roles is usually enough. Display, heading, subheading, body, small, and the caps label.

Motion is a brand property that nobody writes down

Two sites can share a logo, a palette and a typeface and feel like different companies, because one moves in 180 milliseconds and the other takes 700 with a heavy ease. Speed and easing read as personality long before anyone consciously registers them.

It is a strange omission, since motion is one of the few brand properties that operates continuously while somebody is on the site. Three lines fix it.

• A duration for interface response, which should be short, and a duration for content arriving, which can be longer.
• One or two easing curves for the whole system, named, so nobody invents a third at midnight.
• What happens under reduced motion, which is a real setting used by real people and not an accessibility footnote. The answer is almost always that the change happens instantly rather than not at all.

That last one is worth being firm about, because the common implementation is wrong. Disabling animation must not disable the result: an element that was going to fade in should simply be there, not stay invisible forever.

The accent works because it is rationed

There is a failure mode where a brand colour is applied to everything that might benefit from emphasis, and the result is a page where nothing is emphasised. This is not a taste judgement, it is arithmetic. Emphasis is a ratio, and a ratio approaching one has no value left in it.

So a system is more useful when it says where the accent appears than when it says what the accent is. On this site the burgundy has four jobs and no others: the fill of a primary button, the full stop that closes a display line, the markers in a list, and the value of a statistic. Everything else is off-white on near-black.

The constraint is doing the work. When the accent shows up, it means something, because it has not been spent elsewhere.

Hand over tokens, not a document

A brand guide as a PDF has a predictable life. It is followed closely for the first project, loosely for the second, and by the fourth it is a file somebody has to be asked for.

The reason is not discipline. It is that a document requires a person to translate it every time, and every translation is a chance to drift. Values that live in code do not need translating.

/* One definition, used everywhere. */
@theme {
  --color-ink: #020612;
  --color-bone: #E0DEDC;
  --color-signal: #891A20;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

The PDF still has a job, and it is the one it is good at: explaining why. Why this colour, why this weight of voice, which is the part a token file cannot carry and a new designer genuinely needs. Reference in the document, values in the code.

The measure of a brand system is not how good the first page looks. It is how much the fifteenth page, built by someone who was not there at the start, still looks like the same company.