CDP Style Guide — UX Design Warrior
Cara Design Protocol — UX Design Warrior
Version 1.0 · March 202601 — Color Tokens
All approved colors for use across CDP properties. Never use an unlisted color without running a contrast check first and documenting it here.
Light / Cream Palette
Text Colors
Brand Accent Colors
02 — Contrast Requirements
All approved color pairings with verified contrast ratios. Test any new combination before using. Accessibility flanks design — if it's hard to read, it fails regardless of the ratio number.
On Light Backgrounds
| Text Color | Background | Ratio | Level | Use For |
| #2c1810 Brown | #fefdf8 Cream | 16.56:1 | AAA ✓ | H1/H2 headings |
| #4a2e1a Brown Mid | #fefdf8 Cream | 12.15:1 | AAA ✓ | Body text, paragraphs |
| #4a2e1a Brown Mid | #f5ede0 Sand | 10.65:1 | AAA ✓ | Body text on sand sections |
| #4a2e1a Brown Mid | #ffffff White | 12.38:1 | AAA ✓ | Body text on white cards |
| #963f12 Orange-A | #fefdf8 Cream | 6.84:1 | AAA ✓ | Labels, eyebrows, section markers |
| #963f12 Orange-A | #f5ede0 Sand | 5.38:1 | AA ✓ | Labels on sand — acceptable for all-caps |
| #c85a1e Orange | Any light bg | 3.5–4.2:1 | FAIL ✗ | DECORATIVE ONLY — never as text |
On Dark Backgrounds (Navy #1a2744)
| Text Color | Background | Ratio | Level | Use For |
| #ffffff White | #1a2744 Navy | 14.81:1 | AAA ✓ | H1/H2 headings on dark |
| rgba(255,255,255,.95) | #1a2744 Navy | 13.8:1 | AAA ✓ | Hero sub paragraphs |
| rgba(255,255,255,.75) | #1a2744 Navy | 8.93:1 | AAA ✓ | Supporting body text on navy |
| #F3BA91 Orange-DK | #1a2744 Navy | 8.64:1 | AAA ✓ | Orange text/labels on navy |
| #f0d080 Gold | #1a2744 Navy | 9.90:1 | AAA ✓ | Heading accents in dark card sections |
| #74c69d Green-Lt | #1a2744 Navy | 7.27:1 | AAA ✓ | Keto Me / Imara accent on navy |
| #e8784a Orange-Lt | #1a2744 Navy | 5.09:1 | AA ✓ | Large display text ONLY (hero h1 em, 36px+) |
On Dark Card Background (#263654)
| Text Color | Background | Ratio | Level | Use For |
| #e8edf5 Off-White | #263654 Card | ~10:1 | AAA ✓ | Body text inside dark cards |
| #F3BA91 Orange-DK | #263654 Card | 7.04:1 | AAA ✓ | Orange labels/headings inside dark cards |
| #f0d080 Gold | #263654 Card | 5.58:1 | AA ✓ | Gold headings inside dark cards |
| #74c69d Green-Lt | #263654 Card | 4.09:1 | FAIL ✗ | Do NOT use green as text on card bg |
03 — Typography Rules
Non-negotiable. Every violation is an ADA/WCAG failure and breaks CDP.
Never use font sizes below 14px under any circumstance. Not for labels, captions, eyebrows, numbers, badges, or meta text. 12px and 13px are ADA failures.
Body text minimum 16px everywhere. Paragraphs, list items, captions, card body text — all 16px minimum.
Eyebrow / label text minimum 14px — only when all-caps AND letter-spaced (e.g. letter-spacing: .12em+). This is the one documented exception.
Fonts: Playfair Display (headings, serif display) · Source Sans 3 (body, UI, labels). Always load both from Google Fonts.
Three-tier hierarchy on dark backgrounds: Label (#F3BA91 or gold) → Value (white) → Supporting text (#e8edf5 or rgba(.75)). Each tier steps down in visual weight.
Type Scale Preview — Light Background
A decade of design, rooted in a disaster.
The design challenge
Three iterations, one evolving platform
Springboard Capstone
Queen Pelican began as a response to the 2010 BP Deepwater Horizon oil spill — a question about what it would take to build a cleaning platform that actually respected the environment.
Case Study · Queen Pelican Cleaning
Type Scale Preview — Dark Background
Label · #F3BA91 · 13px all-caps
H1 White · #ffffff
Hero sub paragraph · rgba(255,255,255,.95) · 18px — Queen Pelican began as a response to the 2010 BP Deepwater Horizon oil spill.
Body text inside dark card · #e8edf5 · 16px — Dialogues should not contain irrelevant information. Every extra unit competes with relevant units and diminishes their visibility.
04 — Divi Hard Rules
These rules exist because we learned them the hard way. Every item below was discovered by breaking the site.
Full standalone HTML — DOCTYPE, html, head, body. Never paste a fragment.
Unique page prefix on all CSS classes — km-, qp-, vb-, cs- etc. Wrap all content in <div class="prefix-page">. Scope box-sizing reset to .prefix-page * only.
No bare element selectors — h2, h3, p, img, body, strong, ul, li as CSS selectors bleed into Divi's header and break the entire site.
No !important, no et_pb_* targeting, no margin-top:-1px. These break Divi in ways that are very hard to undo.
Scope list resets to the page wrapper — .prefix-page ul { list-style: none }. Prevents Divi's default bullets stacking with CSS ::before markers.
Split pages into max 5 logical code modules. Never one giant block — Divi can't handle it and Ming can't debug it.
Never experiment with new patterns when an existing format works. The km- pattern is proven. Use it as the template for every new page.
05 — Responsive Rules
Breakpoints at 860px and 600px minimum. Test every layout at 375px mobile width before handing to Ming.
Buttons never stretch full width on mobile unless intentional. Max button width on mobile: 280px centered, or auto width fitting content.
Never assume desktop styling translates to mobile. Always include explicit mobile overrides — grids, padding, font sizes.
06 — Image Rules
No photo dumps. Every image must be intentional and add to the story. Images support the narrative — they do not replace it.
Captions required when an image appears alongside text. Every image earns its placement.
Never place two images side by side without clear purpose and hierarchy between them.
Never use color descriptors for designs — say "2025 design" or "Final Design," not "green design" or "yellow design."
07 — ARIA & Accessibility Rules
Accessibility flanks design. If it's hard to read or navigate, it fails — regardless of whether it technically passes a ratio number.
aria-label on every section — screen readers need context for each content region.
aria-hidden="true" on all decorative elements — ::before glows, ornamental lines, section dividers.
role="article" on self-contained content blocks — competitor blocks, case study cards, persona cards.
role="list" + role="listitem" on timeline rows and any div-based list structures.
role="note" on supplemental context blocks (e.g. competitor swap notes, methodology notes).
Descriptive alt text — describe what changed, what matters, what the image proves. "Cleaning Authority website 2017" is not enough. Describe the content.
Hero tags as ul > li — not div > span. Wrap with role="list" aria-label="Project disciplines".
Wrap entire page content in <main> with aria-label identifying the page. This is the primary landmark for screen readers.
08 — Copy Rules
Never write in negation framing — "It's not X, it's not Y." Write what it IS directly.
Never mix old and new designs in the same card. Each design iteration gets its own moment.