Governance Document · Not a Style Guide Alone
UXDW Style Guide
Cara's Design Protocol (CDP), applied — the token set, type scale, and hard rules that govern every page on uxdesignwarrior.com.
01 — Color
Verified palette
Every value below matches the current confirmed tokens on askadinyalaunch.com/style. The single orange token used on the previous version of this page (#c85a1e) has been retired — it fails AA at regular body weight and size. Two role-specific orange tokens replace it below.
Ink
#2c1810
16.24:1 on Cream — AAA
Header/nav background
Ink Support
#5c4a42
8.05:1 on Cream — AAA
Secondary/support copy only
Orange — Dark-BG Token
#FA8A2E
7.02:1 on Ink — AAA
Dark backgrounds only — 2.31:1 on Cream, never use on light
Orange — Light-BG Token
#8C4103
7.04:1 on Cream — AAA
Light backgrounds only — 2.31:1 on Ink, never use on dark
Navy
#1a2744
14.81:1 with white — AAA
Alternate dark background
Dark Olive
#1a1a0f
15.65:1 with #FAF1E3 — AAA
Section-zone background
Cream — Page BG
#fefaf6
Warm off-white
Primary light background
White — Card Surface
#ffffff
Reserved for surfaces
Cards, modals, form inputs — never the default page base
02 — Typography
Type scale
New floor, matching the current live standard: body copy is never smaller than 18px, eyebrows/labels never smaller than 16px. Inter is the default body typeface, replacing Source Sans 3. The previous 14px floor and 14px eyebrow exception on this page are retired.
H1
Playfair Display 900
32–48px · lh 1.1
Your brilliance, brought forward.
H2 Section
Inter 800
28–42px · lh 1.2
Section Heading
Subheading
Inter 600
22px minimum · lh 1.4
A subheading sits between a section title and body copy — never smaller than 22px.
Body
Inter 400
18px minimum · lh 1.7
Body copy at 18px minimum on light backgrounds, dark ink color. Never smaller, never opacity-faded, never grey.
Support
Inter 400
18px · lh 1.6
Supporting copy — captions, secondary labels, timestamps. Raised to 18px to match the body floor.
Eyebrow
Inter 700
16px minimum · all-caps
Category Label · Section Tag
03 — Contrast
Verified ratios
AA floor is 4.5:1 body / 3:1 large text; AAA (7:1) is preferred. No opacity-faded text (rgba) is used on dark backgrounds anywhere below — every dark-background row uses a solid, verified hex value instead. This replaces the previous rgba(255,255,255,.95) / rgba(255,255,255,.75) tokens, which violated that rule.
| Text | Background | Ratio | Result |
|---|---|---|---|
| #2c1810 Ink | #fefaf6 Cream | 16.24:1 | AAA |
| #5c4a42 Ink Support | #fefaf6 Cream | 8.05:1 | AAA |
| #ffffff White | #1a2744 Navy | 14.81:1 | AAA |
| #ffffff White | #2c1810 Ink | 16.86:1 | AAA |
| #FAF1E3 Cream Text | #1a1a0f Dark Olive | 15.65:1 | AAA |
| #FA8A2E | #2c1810 Ink | 7.02:1 | AAA — dark-bg token |
| #FA8A2E | #fefaf6 Cream | 2.31:1 | FAILS — never on light bg |
| #8C4103 | #fefaf6 Cream | 7.04:1 | AAA — light-bg token |
| #8C4103 | #2c1810 Ink | 2.31:1 | FAILS — never on dark bg |
04 — Non-Negotiable
Hard rules
Enforced on every page, no exceptions. This list replaces the previous "never below 14px" framing and the 14px eyebrow exception — both retired.
- ✗
Body copy never below 18px. Applies to every paragraph of running text, no exceptions.
- ✗
Subheadings never below 22px. A lede, an intro line, a card subhead — 22px minimum, not body size.
- ✗
Eyebrows/labels never below 16px. Captions, badges, meta text — all included.
- ✗
Inter is the default body font. Every new body-copy element uses Inter unless explicitly told otherwise.
- ✗
No opacity-faded text on dark backgrounds. Use a verified solid hex value instead — never an rgba text-color fade.
- ✗
No default/generic grey text. Every text color comes from the verified palette — never an unverified hex picked for looking "muted."
- ✗
No bare selectors. Scope every rule — no bare ul, li, a, h1–h3.
- ✗
44px minimum touch targets. Buttons, links, form controls — always.
- ✗
Focus rings always visible. 3px CDP orange, explicitly set — never rely on browser default.
- ✗
Never skip heading levels. H1 → H2 → H3, in order, every time.
- ✗
Font-family and font-size need !important on every text selector. Divi's theme defaults can silently override rules that lack it — confirmed the cause of previous rendering issues on this site.
- ✗
Self-scan before presenting — every linked file, not just the main one. Contrast recalculated, font sizes checked, before anything is shown.
05 — Divi Build Rules
Working within Divi
Lessons learned building on this platform. Language below reflects real defaults and documented exceptions — not blanket absolutes unless marked "Never."
A Code Module gets a fragment — a <style> block plus the actual markup — not a full <!DOCTYPE>/<html>/<head>/<body> document. The real page already provides those; a second set risks Divi or the browser relocating or ignoring the content.
When working in a hurry, full standalone HTML is sometimes used as a fast starting point, then broken down into zone fragments afterward — building in zones means a later rule change only touches the zone it affects, not the whole document.
Bare element selectors — h2, h3, p, img, body, ul, li as CSS selectors bleed into Divi's header and can break the entire site. Every selector gets a page-unique prefix (e.g. uxsg-).
Font-size and font-family need !important on every text selector. Divi's theme defaults can win even when a custom rule's specificity looks sufficient — this was the confirmed cause of body text rendering far smaller than specified on an earlier version of this page.
Every zone's outermost wrapper carries its own explicit background color. Fragments get pasted into Code Modules without a real <body> tag, so a background relying on body alone falls through to white in production even when a standalone preview looks correct.
!important is only for overriding Divi's own defaults — never used to fight another custom rule. And no et_pb_* targeting or margin-top:-1px hacks; both break Divi in ways that are hard to undo.
06 — ARIA, Responsive, Image & Copy
Remaining build rules
These don't have their own section on askadinyalaunch.com/style, so they're reconciled here from CDP's confirmed accessibility and process rules rather than carried over unchanged.
Verified Divi menu selectors
| Main nav links | #et-top-navigation nav > ul > li > a |
| Fixed/scroll state | .et-fixed-header #et-top-navigation nav > ul > li > a |
| Current page | #top-menu li.current-menu-item > a |
| Dropdown panel | #main-header .nav li ul |
| Mobile drawer | .et_mobile_menu |
| Hamburger trigger | .mobile_menu_bar |
ARIA & accessibility
- aria-label on every nav, button, and section that needs context for screen readers.
- aria-expanded / aria-controls on the hamburger toggle, announcing open/closed state and linking it to its panel.
- aria-current="page" on the active nav link — visual highlight alone isn't enough.
- role="list" on div-based list structures, since CSS resets can strip native list semantics.
- Descriptive alt text that says what the image proves, not just what it shows.
- Visible focus rings — 3px CDP orange, explicitly set, never the browser default.
Responsive
- Breakpoints at 860px and 600px minimum; test every layout at 375px before handoff.
- Buttons never stretch full width on mobile unless intentional — max 280px centered, or auto-width.
- Never assume desktop styling translates to mobile — include explicit mobile overrides for grids, padding, and font sizes.
Image rules
- No photo dumps — every image is intentional and supports the story, never a replacement for it.
- Captions required when an image appears alongside text.
- Never two images side by side without a clear purpose and hierarchy between them.
- Text over a photo, even with a gradient overlay, is never certified as meeting contrast — use a solid opaque backdrop panel instead, since contrast varies pixel-to-pixel across an image.
Copy rules
- Never write in negation framing — "It's not X, it's not Y." State what something IS directly.
- Never mix old and new design iterations in the same card — each gets its own moment.
- Never use color descriptors for design labels — say "2026 design" or "Final Design," not "the orange design."