Live reference for the Jaden Raats theme. One system, one palette, no modes to blend. If a build for jadenraats.com or JD Guides shows a colour, font, corner radius or border that is not on this page, it is drift.
Orange is the only strong accent. It is for actions, active states, numbers, stamps and labels — never a large background fill. Body copy is ink or secondary text; orange on paper is roughly 3.3:1, so it never carries body text.
Used for a single inline phrase, never a whole paragraph. Loaded by the live site through next/font as --font-serif. Known gap: this face is not yet an approved UDS typography token — see the open items in README.md.
| Rule | Value | Job |
|---|---|---|
| Radius | --uds-radius-none (0px) | No rounded cards, no pills, no glass treatment, no gradients, no soft shadows. This is a hard rule. |
| Border, standard | --uds-border-width-standard (1px) | Dense interior cells, table dividers. |
| Border, strong | --uds-border-width-strong (3px) | Structural frames, card edges, primary CTAs, section tops. |
| Grid gap | --uds-layout-grid-gap (16px) | Hard modular grid. Sections touch; dividers carry the rhythm. |
| Spacing scale | --uds-space-1…9 (4px → 96px) | 4px baseline. Never invent an off-scale number. |
| Touch targets | --uds-layout-touch-target-min (44px) | WCAG 2.2 AA. Applies to every interactive element. |
| Reading measure | --uds-layout-reading-measure | 45–75ch for prose. |
Number / category, real or operational image, bold uppercase title, one short practical description, explicit read action. No oversized empty card areas.
Ink top bar or orange category header, visible filters and search, narrow modular cells, meaningful counts. Denser than a marketing surface — same palette, same 0px radius.
Both of these have already shipped broken at least once in a real build for this brand.
absolute renders behind or through body copy on mobile. Any absolute photo positioning belongs inside a min-width media query. Under ~700px the photo must be position:static, in normal document flow, stacked after the text.
<meta name="color-scheme" content="light only"> plus color-scheme: light only in CSS, phones in OS dark mode auto-invert the warm paper palette into something broken. Lock it on every page — meta tag and CSS, with !important on background and text colours.
These are documented drift. They came from earlier builds that each re-derived the brand from scratch or from screenshots. If you find one of these in a build for this brand, it is a bug:
| Legacy | Canonical replacement |
|---|---|
#141210, #1c1a17 | #0A0A09 (ink) |
#e8552a, #cf5a35 | #F4511E (signal orange) |
#f1ece1, #faf6ee, #ece5d4 | #F2EFE6 (warm paper) |
#8a8578, #a8a396 | #5D5A53 (secondary text) |
| Archivo Black (display) | Anton |
| Fraunces (accent) | Instrument Serif italic |
| Inter, JetBrains Mono (body) | IBM Plex Mono |
| 999px pill radius, 16px card radius | 0px — no exceptions |
| “marketing mode = rounded / pill” | There is no rounded mode. One system. |
Never restate these values from memory — fetch them. A build that hard-codes a palette will drift the moment the theme changes.
| Artifact | URL |
|---|---|
| Theme values (JSON) | https://raw.githubusercontent.com/raatsja74/universal-design-system/main/themes/jadenraats.json |
| Theme stylesheet | https://raw.githubusercontent.com/raatsja74/universal-design-system/main/dist/themes/jadenraats.css |
| Core custom properties | https://raw.githubusercontent.com/raatsja74/universal-design-system/main/dist/uds.core.css |
| Framework tokens | https://raw.githubusercontent.com/raatsja74/universal-design-system/main/tokens/core.json |
Load dist/uds.core.css first, then dist/themes/jadenraats.css, and set data-uds-theme="jadenraats" on a parent element. Use the semantic variables; do not hard-code the palette in components.
This theme is the personal/builder brand: jadenraats.com, JD Guides, and related Jaden-owned properties. It does not authorise importing this palette, type or voice into Award Coatings, LeadBolt, AI Ledger or any other independently branded theme.