Cara's Design Protocol
A written rule set for human-AI collaboration
CDP is a governance system — a set of enforced rules that constrain AI behavior, preserve strategic intent, and ensure every design decision is traceable to a documented standard. Built across three versions and 22 rules, it is the operational framework behind every page, every component, and every AI collaboration on this site. The component library below is the proof of what holds when the rules apply.
Why CDP exists — the problem it solves
CDP was built in direct response to a documented pattern: every AI-assisted design session, without a written constraint document in context, produced the same failures. Fourteen-pixel body text. Ghost-grey color values that barely pass large-text thresholds. Unvalidated dark backgrounds with opacity-reduced text. Buttons that fail touch target minimums. These aren't random errors — they are AI defaults, the statistical center of the training data.
CDP exists because a human strategist setting rules in advance produces better outcomes than a human strategist correcting AI errors after the fact. The protocol is the difference between governance and cleanup.
Every session without a written constraint document produces the same failures. CDP was built to prevent them.
Six governance domains
CDP v3.0 organizes its rules across six domains. Each domain governs a category of design decisions and contains specific numbered rules with stated rationale.
Selected rules — stated as governance
Each CDP rule is stated as an enforceable constraint, not a recommendation. Below are selected rules from CDP v3.0 that illustrate how the protocol operates in practice.
Most design protocols govern visual output. CDP governs the collaboration process itself — how AI partners are briefed, how they deliver output, how they handle disagreement, and what they are never permitted to do regardless of instruction. This domain exists because AI behavior without written constraints is not neutral. It has direction — toward defaults, toward averages, toward the most common training pattern. CDP-Domain-02 is the written counterforce.
CDP applied — live implementations
Every page on this portfolio is a CDP implementation. The rules are not theoretical — they are enforced constraints visible in every component, every color token, every navigation pattern, and every line of code on this site.
CDP governs a multi-AI collaboration panel: Ryan (ChatGPT — structural feedback and strategic audit), Ming (DeepSeek — engineering analysis and code review), and Claude (Anthropic — strategic thinking, writing, and governance documentation). The panel nicknames are documented here because they appear by name in case study references throughout this portfolio.
The component library — governance made visible
The component library below is not the protocol. It is the output of the protocol — what CDP produces when the rules hold. Every color token is verified. Every touch target is 44px minimum. Every font is 16px minimum everywhere. Every navigation pattern carries full ARIA implementation. The rules above are the reason the components below look the way they do.
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.