Brand proof
Doc 30 says a brand change must be describable entirely as token values — “if it requires
touching component internals, it's rejected.” Until a second brand existed, that was an untested claim. This page is
the test: the same markup, the same bes.css, rendered twice. The only difference between the two columns
is data-brand="sadu" and a stylesheet of 111 token values with no rules in it.
Sadu is a fictional brand invented for this repository — an Islamic-finance neobank, named after the Emirati weaving tradition. It is not a real institution. It was designed to sit as far from BES core as the contract allows: deep green rather than blue, squared rather than rounded, a serif type stack rather than a grotesque, comfortable density rather than standard, and a gold-on-green card face.
BES core
Sadu — same markup, same CSS
What moved, and what it cost
| Palette | Deep green replaces blue; the neutral ramp shifts warm. Core's blue.* and gray.* keys are retuned — the ramp's shape is unchanged, so every semantic token that references it follows. |
| Silhouette | radius.sm/md/lg drop to 2/3/4px, and the component tier squares the button, controls, card, modal, badge, chip, segmented control and status dots. |
| Type | A serif Latin stack and a Naskh Arabic stack, one step larger and looser throughout. The Arabic optical metrics are re-derived for the brand's own scale, not inherited from core's. |
| Density | Sadu ships comfortable values as its standard mode. The comfortable and compact modes still exist and still switch. |
| Motion | Slower: 180/280ms, with a 900ms spinner. |
| Card face | Gold ink on a green gradient with tighter tracking — cardArt.from/to/ink/badgeBg/track. This was the last place in bes.css that carried a raw hex. |
| Cost in component CSS | Zero lines. bes.css is byte-identical between the two columns. |
How this is kept honest
Three gates run on every change, and each was verified by reintroducing the failure it exists to catch:
tools/audit-theme.py— a theme file must be token values only. A real CSS property, a selector reaching outside the brand scope, an@font-face, or a token core does not define all fail the build. So does a generated theme that no longer matches its JSON source.tools/audit-contrast.py— the full derived audit runs once per brand, 1,502 element colourings each. A brand that breaks AA fails the build. Sadu was caught doing exactly that during development: a lighter, friendlier green for the primary action dropped the pressed icon button to 2.11:1.tools/audit-consistency.pyC8 —font-sizeandborder-radiusliterals inbes.cssare held at zero. A brand can only retune what the components read as tokens, so a literal is a hole in the contract, not a style choice.
The honest limit: spacing is not fully tokenised. 135 padding, margin and gap literals remain, because the space scale is a 4px grid while the CSS uses 6/10/14/18px throughout — closing that is a design decision about the grid, not a mechanical substitution. Sadu can change type, colour, shape, density and motion; it cannot yet change rhythm. The consistency audit holds that number visible and only lets it fall.