To teach a machine a brand, you first have to read one yourself. Iterant learns a brand by parsing its live site: the colors, the type ramp, the spacing, the components, the voice. Doing that across many sites surfaces a stranger's question worth asking about your own brand. How hard is this to learn from the outside? Some sites you internalize in a minute. Others fight you no matter how long you stare. The difference is consistent, and it has a name.
We call the readable ones legible. You can infer their rules just by looking, because the site applies them the same way every time. Legibility is not beauty. Plenty of striking sites are illegible, and plenty of plain ones read clean as a grid. The legible ones share a few traits, and the best public design systems show exactly what those traits look like when they are done on purpose.
Legible brands use fewer values, more often
The strongest signal is restraint. Legible systems reuse a small set of values: a handful of colors, a short type ramp, one spacing rhythm. Illegible ones sprawl, with a dozen near-identical grays, font sizes that never quite repeat, and padding that shifts from one section to the next for no reason.
Look at how a mature system caps its type ramp. Material Design 3 ships a complete typographic system in just five roles (display, headline, title, body, and label), each with large, medium, and small sizes, for fifteen tokens total. Those sizes are not arbitrary; they are generated from a single base size and a Major Second ratio of 1.125, so each step is a fixed multiple of the last. Material's own guidance notes that most products will not even use all fifteen. That is the discipline a legible brand copies without realizing it: a short ramp, a predictable ratio, no orphan sizes.
Repetition is what makes a value readable. The third time you see the same accent in the same role, you have learned the rule. A value used once is noise. A value used consistently is a signal. Nielsen Norman Group's fourth usability heuristic, consistency and standards, makes the same point: a consistent interface lets people reuse what they already know and lowers the cognitive load of meeting something new. It splits that into internal consistency (the system agrees with itself) and external consistency (it agrees with conventions users already carry). A legible brand wins on both.
Roles beat raw values
Legible brands do not think in colors and sizes. They think in roles. This is the primary action, this is a heading, this is supporting text, this is a surface. The same gray means the same thing everywhere because it has a job, not just a hex code.
GitHub's Primer is explicit about this. It does not expose raw colors to designers; it exposes color roles split into fgColor for text and icons, bgColor for fills and surfaces, and borderColor for dividers, each with muted and emphasis variants. An emphasis background is always paired with an on-emphasis foreground, so contrast is guaranteed by the naming, not by the person picking the swatch. Material 3 does the same with semantic roles like primary, on-primary, surface, and on-surface. The brand stops being a list of hex codes and becomes a list of jobs.
That is why two brands with nearly identical palettes can feel worlds apart. The values are not the difference. Whether the values do consistent work is. In a legible system you can point at any element, guess its role, and be right, because elements that share a role always look alike.
This is exactly the discipline the design token world has standardized. The W3C Design Tokens Community Group, whose specification reached its first stable version in October 2025, frames tokens as the single source of truth for color, typography, and spacing decisions. Mature systems layer them into tiers: primitive tokens hold the raw value (blue-500), semantic tokens name the role (fgColor-accent), and component tokens bind a role to a place (button-primary-bg). A reader, or a machine, learns the system by learning the role names, not by memorizing hex codes.
Spacing is the tell
For a fast read on whether a brand is legible, ignore the colors and look at the spacing. Legible systems have a rhythm. Their gaps and padding are clearly multiples of one base unit, so your eye relaxes as everything lines up to an invisible grid you can feel without naming.
The disciplined systems make that base unit explicit. Shopify's Polaris builds its spacing on a 4px base, with tokens named by their multiple: space-100 is 4px, space-400 is 16px, and every gap on the page is one of those steps. IBM's Carbon uses an 8px mini-unit as the geometry of its grid, with a fixed ramp where spacing-05 is 16px and spacing-07 is 32px. In both, a designer cannot type an arbitrary number; they pick a rung. That constraint is what produces the rhythm a reader feels.
Illegible systems have arrhythmia. Twenty-two pixels here, thirty-one there, a section tight at the top and loose at the bottom. Nothing reads as broken, but the page never settles, and you cannot predict what the next section will do. When we parse a site and the gaps do not collapse onto a base unit, that is almost always a brand built without a spacing scale at all.
Open your own site and run four quick checks.
- Type ramp. List every distinct font size on a single page. More than seven or eight, or two sizes within a pixel of each other, means your ramp has duplicates to merge.
- Spacing grid. Inspect the padding and gaps on five sections. Do they all land on multiples of one base unit (4px or 8px)? Note every value that does not.
- Color roles. Pick your busiest gray and your accent. Find three uses of each. If the same gray plays different roles (border in one place, body text in another), it is doing too many jobs.
- Component repeats. Pick one button, one heading, one card, then find three more of each. If they match without you thinking about it, that part is legible. Every exception you find is a consolidation task.
Why we care so much about this
Legibility is the difference between a brand a system can extend faithfully and one it can only approximate. When a brand reuses a small set of values in consistent roles on a steady rhythm, those rules can be captured and reapplied to a new page that looks unmistakably like the original. When a brand is illegible, there are no rules to capture, only a thousand one-off decisions that do not generalize. Iterant reads brand systems like these for a living, drafts pages from what it finds, and hands them to you to review and approve. Nothing publishes on its own.
The same trait helps your people, not just our software. The recurring finding across years of the Sparkbox Design Systems Survey is that the hard part is rarely building components; it is adoption, getting everyone to actually apply them. Sparkbox has found lack of adoption to be a top reason design systems stall, with a majority of agency respondents naming it as the most common cause of failure on client systems. The zeroheight 2025 report echoes the gap: tokens are now near-universal, yet only 40% of teams have automated the pipeline that keeps design, docs, and code in sync, and only 64% document their UI patterns at all. A legible system makes adoption almost automatic, because the right choice is also the obvious one.
So the most useful thing most teams can do for their brand is not a redesign. It is a round of consolidation. Collapse the near-duplicate grays into named roles, settle on one type ramp with a fixed ratio, commit to a single spacing scale. Make your brand legible to a stranger and you will find it becomes legible to a machine, to a new hire, and to your own customers.