Every component. Every rule. No guessing.
This page demonstrates what Cara's Design Protocol (CDP) produces — a compliant, intentional design system where AI is the partner and the strategist sets the rules. Every token validated. Nothing assumed.
Color Palette & Compliance
Every color token is verified against an external contrast checker — not self-reported by the AI. These are tested results, not estimates.
Why CDP exists — and what it prevents
Left without constraint, AI consistently defaults to 14px body text, ghost-grey color values that barely pass large-text thresholds, and unvalidated dark backgrounds. Every session, the same patterns resurface. CDP is the written rule set enforced before any code ships. Not a preference — a constraint. The page you are reading is the proof of what holds when the rules apply.
Type Scale
Two fonts. One scale. 16px hard floor on every element — headings, body, labels, badges, captions, metadata. No exceptions. CDP enforces this because AI will shrink text without a written rule to hold it accountable.
Great Design Starts Here
Section Heading
Card or Module Title
Body copy at 16px minimum, dark brown #2c1810 on cream. Rich contrast. Not grey. CDP enforces this because small, light body text is the first thing AI defaults to when there is no constraint document in the conversation.
Supporting copy at #5c4a42 — medium brown, 7.4:1 on cream, AAA pass. Used only for true secondary text: captions, timestamps, secondary labels. Never for body paragraphs.
Category Label · Section Tag
Navigation Patterns & ARIA
Three working patterns — light desktop, dark desktop, and a functional hamburger menu. Hover every link. Tab through every element. Open and close the hamburger with keyboard or tap. Current page state communicates through aria-current, not just visual styling.
ARIA attributes at work in these patterns
| Attribute | Where it lives | What it does |
|---|---|---|
aria-label | nav, buttons, brand links, CTAs | Names elements for screen readers when visible text is absent or not descriptive enough. Every interactive element in these navs has one. |
aria-expanded | Hamburger button | Announces open or closed state. JavaScript toggles this between false and true as the user opens and closes the panel. |
aria-controls | Hamburger button | Links the button to the panel it controls. The id on the panel must match exactly. |
aria-hidden="true" | Closed panel, decorative bar spans | Removes content from the accessibility tree when it should not be announced. Flips to false when panel opens. |
aria-current="page" | Active nav link | Tells screen readers which page the user is on. Visual highlight alone is not enough — assistive technology needs this attribute. |
role="list" | All nav ul elements | CSS list resets can strip list semantics in some browsers. Explicit role="list" restores them so screen readers announce item count and position. |
Button System
44px minimum touch target on every button. Focus rings visible at 3:1 contrast per WCAG 2.1 SC 1.4.11. Disabled state uses aria-disabled plus explicit visual treatment.
Card Components
Three surface variants. Contrast recalculated for each surface — not assumed. CDP three-tier hierarchy on every card: eyebrow label → heading → supporting text.
White Card
Foreground: #2c1810 · Background: #ffffff · Ratio: 16.75:1 AAA. Body at 16px minimum. Three-tier hierarchy enforced at the component level by CDP.
Navy Card
Foreground: #ffffff · Background: #1a2744 · Ratio: 15.4:1 AAA. Full white — no opacity reduction. CDP rule: never use rgba to fade text on dark surfaces.
Tinted Card
Foreground: #2c1810 · Background: #fdf0e8 · Ratio: 15.9:1 AAA. Tinted backgrounds shift the contrast calculation — text color is always re-verified against the actual surface used.
Built In. Not Bolted On.
These decisions were made at the system level. A site is never 100% — but there is a documented standard, a validation process, and an honest account of where the work stands.
Skip Navigation Link
Visually hidden until keyboard focus. Allows screen reader and keyboard users to bypass the header. Press Tab as soon as the page loads.
Visible Focus Indicators
All interactive elements show a 3px focus ring in CDP orange. Not the browser default — explicitly set and tested on every interactive element.
Semantic HTML + Landmarks
Header, main, nav, footer, article — properly structured. Heading hierarchy flows H1 → H2 → H3 without skipping levels.
ARIA on Interactive Elements
Hamburger toggle carries aria-expanded, aria-controls, and aria-label. Active links use aria-current="page". Decorative elements use aria-hidden="true".
44px Touch Targets
Every button and interactive control meets WCAG 2.5.5 minimum. Enforced with min-height in CSS. The hamburger button is 44×44px exactly.
No Site Is 100%
CDP strives for AAA where achievable and enforces AA as the floor. Borderline cases are documented and revisited. The standard exists. The work continues.