Adopt it
Making 516 apps match is not 516 redesigns. It is two lines in each <head>, then a short pass over the markup that already exists.
Link the standard
Paste this before </head>. On its own it already re-sets the typography, the focus ring, the selection colour and every token an app needs to stop looking like a different company.
Link it. Never copy it. A copied stylesheet is a fork, and a fork stops matching the day the standard moves. Everything served from this host sends access-control-allow-origin: * so any BB2G app can load it.
<link rel="stylesheet" href="https://standard.bornbetween2generals.com/fonts/fonts.css"> <link rel="stylesheet" href="https://standard.bornbetween2generals.com/assets/standard.css"> <script src="https://standard.bornbetween2generals.com/assets/standard.js" defer></script>
The fonts line is optional. Leave it out and the standard falls back to Georgia and the system sans — still coherent, just not the house voice.
The half-hour pass
Six changes. In that order, because each one makes the next easier to see.
Delete every hard-coded colour
Search the app for # followed by six hex digits. Each one is a place the app decided for itself. Replace with the nearest token: structure → var(--navy), emphasis → var(--red), edges → var(--gold), text → var(--text).
Put the tricolor at the top
A single <div class="bb-tricolor"></div> as the first element in the body. It is the cheapest signal that two apps belong to the same house.
Swap the buttons
bb-btn for the primary action, bb-btn--ghost for the rest, bb-btn--red only where something is destructive or urgent. One primary button per view.
Give sections an eyebrow
<span class="bb-eyebrow"> above each heading. Letterspaced small caps in gold-ink is the house's label voice, and it does more for coherence than any other single change.
Replace the logo
Take the mark from the brand kit as SVG. Raster logos garble below about 48 pixels and again inside image models; the vector does not.
Check both themes and reduced motion
The standard ships a dark theme and honours prefers-reduced-motion. If the app hard-codes a white background anywhere, dark mode will show it as a white slab. Toggle the theme in this site's header and look for the slab.
Prove it, don't claim it
Once an app links the standard, the roster's next build will find the stylesheet in its HTML and mark it On standard. Nobody has to remember to update a list, and nobody can tick a box for an app that never shipped the change.
Right now 0 of 516 apps carry the link. That number is measured, not asserted — if it is low, it is low.
# is this app on the standard? curl -s https://YOUR-APP.bornbetween2generals.com \ | grep -c 'standard.bornbetween2generals.com/assets/standard.css' # re-measure the whole portfolio node scripts/build-roster.mjs && node build.mjs
The class list
Everything the standard gives you. All of it is optional; none of it needs a build step.
| Class | What it does |
|---|---|
| bb-wrap · bb-narrow | Page gutter at 1200px / 760px |
| bb-section · --alt · --navy | Vertical rhythm; alternating parchment or navy band |
| bb-grid bb-grid--2/3/4 | Responsive columns, no framework |
| bb-tricolor | The flag bar with its gold hairline |
| bb-rule | Gold hairline with a star at the centre |
| bb-eyebrow · --red · --navy | Letterspaced small-caps section label |
| bb-display · bb-lede | Cinzel caps; Cormorant italic lede |
| bb-foil · bb-shimmer | Gold-gradient text; the same, animated |
| bb-card · --parchment · --seam | Surface, card stock, gold top seam |
| bb-btn · --red · --gold · --ghost · --sm | Buttons |
| bb-pill · --ok/warn/bad/navy/gold/plain | Status and metadata badges |
| bb-stat · bb-stat__n/__l | Big-number tile |
| bb-table · bb-tablewrap | Data table with a sticky head; wrapper scrolls, page never does |
| bb-input · bb-select | Form controls with the gold focus ring |
| bb-note · --red · --navy | Callout with a coloured left rule |
| bb-reveal · bb-rise | Scroll and load motion; both resolve to finished under reduced motion |
| data-bb-count | Counts up to the number already in the markup |
| data-bb-copy="#id" | Copy-to-clipboard with a fallback for insecure contexts |
| data-bb-theme-toggle | Cycles system → light → dark |
| BB.csv(rows, name) | Client-side CSV export, BOM included so Excel reads UTF-8 |