Internal brand guideline

Draft14 of 98 specified

Every rule below is derived from the system you built, and the measured ones are re-checked each time this page renders. Nothing here was typed in that could be computed.

Typography

14 of 18 specified

Typefaces

declared

Display: Unbounded
Body: Plus Jakarta Sans
Mono: Geist Mono
Character: Wide, geometric, deliberately synthetic
Served from: googlemeasuredLicence terms are not carried by the preset yet — §9 licensing depends on them.

Where the faces come from

measured

Display: Unboundedfontsource/unbounded · 8 weights · variable · self-hostable
Body: Plus Jakarta Sansfontsource/plus-jakarta-sans · 7 weights · variable · self-hostable
Mono: Geist Monofontsource/geist-mono · 9 weights · variable · self-hostable

Font licensing

cited

SIL Open Font License 1.1: Unbounded · Plus Jakarta Sans · Geist MonoWeb embedding, Print, Bundled in a product — but NOT sold on its own. May be bundled and sold with a product, but never sold on its own. A modified version must not use the original Reserved Font Name, and must itself stay under the OFL.

Fallback stack

measured

Display: "Unbounded", system-ui, -apple-system, sans-serif
Body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif
Mono: "Geist Mono", ui-monospace, "SF Mono", monospace
Email: Arial, Helvetica, sans-serifMost email clients strip webfonts. This is what actually renders.

Weights

declared

Body weight: 400measured
Available: 200–800 on an axisA variable font carries its weights on a continuous axis, so any value in that range is a real cut rather than a browser faking one.
Reversed on dark: Not setdeclaredText reversed out of a dark ground reads lighter than it is. Most manuals step the weight up.

Scale

measured

Base size: 1rem16px at a 16px root.
Ratio: 1.250
Steps: display → captionLine height, tracking and weight each state a per-role rule and have their own entries below.

Hierarchy

measured

display: 3.05rem48.8px at a 16px root
h1: 2.44375rem39.1px at a 16px root
h2: 1.95625rem31.3px at a 16px root
h3: 1.5625rem25px at a 16px root
h4: 1.25rem20px at a 16px root
body: 1rem16px at a 16px root
small: 0.8rem12.8px at a 16px root
caption: 0.6375rem10.2px at a 16px root

Line height

measured

Body: 1.55
Headings: 1.12Derived. Long text needs more leading than a heading of one or two lines — USWDS puts headings between 1 and 1.35, running text at 1.5 or above.

Tracking & kerning

measured

Body: 0em
Kerning: Opticaldeclared
Uppercase: Not setCaps set at body tracking read tight. Most manuals add 0.05–0.12em.

Measure

measured

Readable range: 45–90 characters
At this base size: 360px – 720pxApproximate — character advance is per-face, so treat it as a target column width rather than a guarantee.
Target: 65 charactersdeclared

Minimum sizes

measured

Web body: 16pxUSWDS floor for running text.
Email body: 14pxBelow this the fallback face becomes unreadable.
This system’s body: 16px at weight 400WCAG treats it as normal text, so it needs 4.5:1.

Channel rules

measured

Web: 16px body against a 16px floor — holds · "Plus Jakarta Sans", system-ui, -apple-system, sans-serifcitedThe only channel where the stack you chose is the stack that renders. The U.S. Web Design System sets 16px as the floor for running text.
Email: 16px body against a 14px floor — holds · Arial, Helvetica, sans-serifdeclaredMost clients strip webfonts, so the brand face never arrives and the fallback is what people read. Practitioner floor, not a published standard: below 14px the fallback face — which is what most clients actually show — stops being comfortable.
Print: 12pt body · "Plus Jakarta Sans", system-ui, -apple-system, sans-serifSized in points on paper, so a pixel floor says nothing. The licence is the constraint that actually bites. SIL Open Font License 1.1 permits print use.
Presentation: 12pt body · Arial, Helvetica, sans-serifRead across a room and usually opened on a machine that does not have the face installed, so it falls back like email does.

Text spacing tolerance (WCAG 1.4.12)

measured

Authored line height: 1.55
Reader override of 1.5: no layout changeAlready at or above the value the criterion asks content to tolerate.

Type misuse

measured

Do not tighten body tracking: 0em → -0.02emNegative tracking on running text costs legibility for a saving nobody asked for.
Do not set headings at body leading: 1.55 on a display sizeLeading that suits a paragraph looks slack on a two-line heading.
Do not go under the channel floor: 12px in emailBelow 14px in email the fallback face is what people actually read.

Take this with you

The link is the guideline

Not a copy of it. The whole system travels in the address, so anyone who opens this rebuilds the same document — no account, no upload, nothing to expire.

/brand

Tokens

The rules above as something a build reads: every role, every colour and the whole type ladder. Names, not values — --color-primary, so the colour can change without the code changing.

:root {
  color-scheme: dark;

  /* Roles — what each colour is FOR. Reference these, not the palette. */
  --color-background: oklch(15% 0.0021 286.14); /* #0B0B0C */
  --color-surface: oklch(21% 0.0021 286.14); /* #181819 */
  --color-primary: oklch(59.9% 0.2299 286.2); /* #7C5CFF */
  --color-text: oklch(96.2% 0.004 286.32); /* #F2F2F5 */
  --color-accent: oklch(82.38% 0.1408 70.17); /* #FFB454 */
  --color-border: oklch(53.02% 0.0108 286.02); /* #6B6B72 */
  --color-on-primary: oklch(0% 0 0); /* #000000 */
  --color-on-accent: oklch(0% 0 0); /* #000000 */

  /* Type — the families, resolved with their fallbacks. */
  --font-display: "Unbounded", system-ui, -apple-system, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* The ladder: 1rem base, 1.25 ratio. */
  --text-display: 3.05rem; /* 48.8px */
  --text-h1: 2.44375rem; /* 39.1px */
  --text-h2: 1.95625rem; /* 31.3px */
  --text-h3: 1.5625rem; /* 25px */
  --text-h4: 1.25rem; /* 20px */
  --text-body: 1rem; /* 16px */
  --text-small: 0.8rem; /* 12.8px */
  --text-caption: 0.6375rem; /* 10.2px */

  /* How that type is set. */
  --leading: 1.55;
  --tracking: 0em;
  --font-weight: 400;
}

Showing only what is set

Blocks with nothing in them yet are hidden, and so are the sections left empty by hiding them. The counts still say how many were left out.

Show everything

Print, or save as PDF

This page, through the browser’s own print pipeline — so the PDF has real text and real links, and there is no second renderer that could ever print something the page does not say.