The Brand Kit, measured
A light, luxurious ivory–gold–navy system with the American red, white and blue for alerts and accents. Ivory sets the calm, gold carries the prestige, navy does the reading work, and flag-red is reserved for what is urgent — so red always means look here.
This page holds that kit against the live standard and reports what it finds, rather than assuming either one is right. Every contrast figure below is computed in your browser from the actual values, so the page cannot flatter itself.
Twelve tokens, with the measurement
Contrast is against the kit's own ivory page, #f7f1e3.
WCAG AA needs 4.5:1 for body text and 3:1 for large text.
The kit has no gold that can carry a sentence
This is the same trap the standard exists to close, and it is worth being precise about rather than tasteful about.
The kit's --gold #b8860b is labelled brand / primary. As a
fill behind near-black type, or as a rule, a border or a mark, it is excellent. As
text on the kit's own ivory it measures under 3:1 — below the floor even for large
text — and --gold2 #caa12e is worse. --warn
#c08a1e fails on the same ground.
The standard hit exactly this and solved it by splitting gold in two:
--gold is an accent that may never carry body text, and
--gold-ink is the only gold allowed to carry a sentence. The kit
needs the same second token, whatever its value ends up being. Without it, anyone who follows
the kit literally will set gold headings on ivory and they will be hard to read — most of all
for the readers who need them most.
The two systems are nearly the same colour, and completely different in method
On surfaces they are almost indistinguishable. The page grounds differ by a shade you would struggle to see side by side. Where they part company is not the palette at all.
The real divergence is the sentence at the bottom of each document.
Paste this block into any app
A :root block copied into each app's own CSS. Immediate, needs
nothing from the network, and works in an app that has never heard of this site.
The cost: every copy is a fork. Change a value here and five hundred apps keep the old one until somebody edits five hundred files.
Link it, never copy it
One stylesheet served with an open CORS header, linked by every app. Change a value once and the whole fleet moves, and the roster can measure who has adopted rather than take their word for it.
The cost: a live dependency. If this site is down, an app loses its styling.
The drop-in block, with the missing token added
The kit's block exactly as written, plus the one thing it needs to be safe to follow: a gold that can be read.
/* ===== BB2G DESIGN TOKENS ===== */
:root{
/* surfaces */
--cream:#f7f1e3; --cream2:#efe6d1; --card:#fffdf8; --panel:#faf5ea;
--line:#e6d9bc; --line2:#d8c79f;
/* text */
--ink:#1c2333; --sub:#5f6b83; --muted:#94a0b6;
/* brand */
--navy:#16294a; --navy2:#1f3a68; --blue:#3a5da9;
--gold:#b8860b; --gold2:#caa12e; --gold3:#e4cd84; --goldsoft:#f3e8c6;
/* ADDED — the kit has no gold that may carry text.
--gold is an ACCENT: rules, borders, marks, and fills behind dark type.
--goldink is the only gold allowed to carry a sentence on ivory. */
--goldink:#7a5c12;
/* semantic */
--red:#b22234; --redsoft:#f7dfe2;
--good:#2e8b60; --goodsoft:#dcf1e6;
--warn:#c08a1e; --warnsoft:#f6eccf;
--hot:#c96a1f; --hotsoft:#f7e4cf;
/* type */
--serif:Georgia,"Palatino Linotype","Times New Roman",serif;
}
--warn #c08a1e has the same problem as gold and is used for
notice text far more often. If a notice is meant to be read on ivory, darken it or set it on a
--warnsoft chip rather than on the page.
The four principles
These are the best thing in the document and they do not conflict with anything. They are worth keeping whichever palette wins.
Light & calm
Ivory backgrounds, generous space. Apps should feel safe to open, never like a threat feed.
Gold = prestige
Gold for brand moments, primary actions and accents — used with restraint so it stays special.
Red = urgent only
Flag-red is never decorative. If it is red, it matters. That is what makes it trustworthy.
Serif for soul
The classic serif on names and taglines carries the “two generals” heritage and gravity.
One note on the fourth. The kit sets the display serif as
Georgia / Palatino; the standard self-hosts
Cinzel for display and Cormorant Garamond for ledes. Both are
“serif for soul”, and the difference is a real one — Georgia costs nothing and is on every
device, Cinzel is 380 kB and looks like the engraved card. That is a separate decision from the
palette and can go either way.