Respira Unified Brand & Design System

Foundation and precedence: the original comprehensive Respira system defines the brand, principles, voice, audiences, logo usage, content patterns, layouts, product surfaces, WordPress UI, imagery, pricing, safety, and telemetry. The 2026 refinement complements that foundation with role-based tokens for both modes, tested contrast, canonical product components, a three-motion contract, Aer proof, and explicit agent implementation rules. When an older visual example conflicts with a refinement, the refinement wins.

Agent implementation standard

1. Read this page and the repository DESIGN_SYSTEM.md before creating or changing Respira content.
2. Use semantic --rp-* role tokens. Do not copy raw colors from a screenshot.
3. Treat dark and light as equally designed modes. Do not derive one by mechanically inverting the other.
4. Reuse canonical classes from /brand-v2/components.css: .rp-btn, .rp-approval, .rp-receipt, .rp-chip, .rp-notice, .rp-table, .rp-theme-toggle, .rp-progress-card, and .rp-explainer.
5. Use only three motion families: breath for live status, approve→execute→receipt for state change, and short color/background/border micro-transitions plus a restrained button press.
6. No generic gradients, glassmorphism, glow stacks, parallax, scroll-jacking, content entrance animation, card tilt, decorative particles, fake urgency, pure black fields, or pure white fields.
7. Body copy defaults to at least 18px with a 60–75 character measure. Data, IDs, timestamps, logs, and tool names use JetBrains Mono.
8. Emerald is the primary color event. Gold is rare and never communicates urgency. Rose is reserved for genuinely destructive states.
9. Every action must make intent, current state, and outcome legible. Approval states become receipts; errors say what happened and what to do next.
10. Meet WCAG 2.2 AA, preserve visible focus, honor reduced motion, and verify both modes before shipping.

North Star Principles

• Breathe: Every element needs space to exist. Calm authority over visual noise.
• Safety is the Product: Duplicate-before-edit is the promise. Visual hierarchy communicates risk.
• Clarity First: No ornament without purpose. Direct microcopy, zero jargon.
• Auditability: Every action leaves a trace: who changed what, when, and what existed before.
• Honest Interfaces: No dark patterns, fake urgency, hidden limitations, or blocking upgrade nags.
• Speed with Guardrails: 320+ tools should feel available, not overwhelming. Fast, but never reckless.

Voice & Tone

The Master Craftsman with a Neural Link. Respira speaks like a world-class WordPress developer who is also a lead AI researcher: brilliant but humble, warm but precise, and deeply protective of the user's site.

• Witty, not goofy. Dry intelligence, never novelty AI theater.
• Conversational, not casual. Speak like a trusted lead developer.
• Human-first tech. Lead with intent, result, and next action rather than internal function names.
• No exclamation points, emojis, hype words, fake certainty, em dashes, or anthropomorphic filler in product copy.

Audience Messaging

• WordPress users: build without code fear; live content remains protected until approval.
• Agencies: manage many sites with AI speed and human precision.
• Developers: work with an AI collaborator that understands DOM hierarchy and builder logic.
• Designers: bridge design and deployment without losing visual intent.
• Enterprise: use audit trails, permissions, and compliance-ready workflows.

Role-based color system

Emerald is the heartbeat. Warm neutrals provide depth. All implementations use semantic roles such as --rp-bg, --rp-surface, --rp-surface-elevated, --rp-text-primary, --rp-text-secondary, --rp-text-muted, --rp-border-hairline, --rp-accent, --rp-success, --rp-warning, and --rp-destructive. Both modes are first-class and all text/background pairs must pass the contrast matrix.

Typography

DM Sans is the product display and body face. JetBrains Mono is for code and verifiable data. Cormorant Garamond is an editorial accent limited to one restrained italic line per screen. Body text defaults to 18px with comfortable leading and a 60–75 character measure.

Product state language

The canonical workflow is approval → execution → receipt. Approval cards state the proposed change and risk. Progress cards show current work without pretending completion. Receipts include outcome, time, target, and audit identity. Notices are calm and actionable. This state language applies across the dashboard, WordPress plugin, MCP surfaces, docs, and marketing proof.

Motion contract

• Breath: a quiet opacity/scale cycle for live status only.
• Approve → execute → receipt: a purposeful state transition that explains system progress.
• Micro: short color, background, and border transitions; buttons may use a restrained press.

All other decorative motion is deprecated. Honor prefers-reduced-motion.

Layout and content foundation

Use varied editorial layouts, alternate dense and spacious sections, and insert breathing moments between high-density sections. The original patterns for bento grids, editorial splits, data dashboards, pricing, charts, WordPress screens, safety flows, imagery, and page narratives remain part of the system where they do not conflict with the agent standard above.

Aer proof

Aer is the reference proof that the system can feel editorial, warm, technical, and trustworthy without generic AI aesthetics. Recreate its principles rather than copying a screenshot: asymmetric hierarchy, role tokens, restrained emerald, readable measures, explicit product state, and evidence over decoration.

Canonical implementation assets

• /brand-v2/colors_and_type.css: role tokens for both modes, typography, accessibility, and sanctioned motion.
• /brand-v2/components.css: canonical components and states.
• DESIGN_SYSTEM.md: repository contract and source hierarchy for agents.