Respira Brand & Design System
This document describes the Respira for WordPress brand and design system. It is structured for AI assistants, crawlers, and developers. The interactive design system loads below via JavaScript.
North Star Principles
The principles that shape every decision across all Respira surfaces — marketing site, docs, cloud dashboard, WordPress plugin, Chrome extension, and AI interfaces.
- Breathe: Every element needs space to exist. Generous whitespace isn't empty — it's the silence between notes that makes the music. Calm authority over visual noise.
- Safety is the Product: Duplicate-before-edit isn't a feature — it's the promise. Visual hierarchy communicates risk. Destructive actions look destructive. Safe actions feel safe.
- Clarity First: No ornament without purpose. If a gradient doesn't guide the eye, remove it. If an animation doesn't convey state, kill it. Direct microcopy, zero jargon.
- Auditability: Every action leaves a trace. Audit logs, timestamps, change diffs. The UI makes the invisible visible — who changed what, when, and what it looked like before.
- Honest Interfaces: No dark patterns. No fake urgency. Pricing is clear. Limitations are visible. Upgrade prompts are contextual, never modal spam. Trust compounds.
- Speed with Guardrails: 88 tools shouldn't feel overwhelming — they should feel available. Skeleton screens over spinners. Optimistic UI over blocking states. Fast, but never reckless.
Personality to UI Behavior
- Calm → Generous whitespace, muted neutrals, no exclamation marks
- Precise → Monospace for data, exact timestamps, numbered audit entries
- Trustworthy → Visible safety cues, no hidden fees, plain-language errors
- Capable → 88-tool count prominent, live telemetry, builder intelligence badges
- Warm → DM Sans, emerald green (not cold blue), rounded corners
Voice & Tone
"The Master Craftsman with a Neural Link" — Respira speaks like a world-class WordPress developer who is also a lead AI researcher. We are brilliant but humble, witty but professional, and deeply protective of the user's site.
Voice Principles
- Witty, not Goofy: Dry, smart humor that acknowledges the absurdity of AI. Never "AI is thinking! Beep boop!" — instead: "Our agent is currently deep in a Gutenberg block battle. It'll be out in a moment."
- Conversational, not Casual: Speak like a lead developer at a high-end agency. Never "Yo, your site is updated." — instead: "Done. Your page is live and looking sharp. Even the AI is impressed."
- Human-First Tech: Focus on the intent, not the algorithm. Never "Executing wordpress_update_page." — instead: "Teaching the agent your brand's rhythm. It's getting the hang of your padding."
Microcopy Guide
- AI Loading: "Teaching the agent your brand's rhythm. It's getting the hang of your padding."
- Error State: "The handshake failed. Let's double-check that API key—it seems to be missing a few characters."
- Upgrade Prompt: "Unlock the full agency suite. Because your team deserves better than manual entry."
- Success: "Done. Your page is live and looking sharp. Even the AI is impressed."
- Empty State: "Your dashboard is looking a bit lonely. Let's connect your first WordPress site and start building."
Brand Personality
"The AI Whisperer for WordPress" — We don't just bridge the gap; we make it feel like the AI was born to build in WordPress.
Audience Messaging
- WordPress User: "Build without code fear. Your live site is untouched until you say so."
- Agency: "Your secret weapon for managing 100+ sites with AI speed and human precision."
- Developer: "An AI co-pilot that actually understands your DOM hierarchy and page builder logic."
- Designer: "Bridge the gap between design and deployment with AI that respects your pixels."
- Enterprise: "Audit trails, role-based permissions, and compliance-ready workflows. Your standard of safety."
Anti-Patterns (Never)
- Modal upgrade nags blocking workflow
- Countdown timers or "only X left" scarcity language
- Auto-playing video or sound
- Pure black (#000000) — warm blacks only
- Emojis in UI (icons only — Lucide set, MIT licensed)
- Generic blue — emerald green is the brand signal
Unified Family Rule
All six surfaces — marketing site, docs, cloud dashboard, WordPress plugin, Chrome extension, and AI interfaces — use the same tokens, the same typography, the same icon set, and the same motion language. A user moving between surfaces should never feel like they've left Respira.
Testimonials
Trusted by professionals. Sample testimonials: Sarah Jenkins (Nexus Digital Agency) — "Respira is the only AI tool we trust with our clients' sites. The duplicate-before-edit feature means we never risk breaking a live WooCommerce store." Marcus Thorne (GlobalTech Solutions) — "Respira's auditability and strict guardrails made it the only viable choice for our enterprise infrastructure." Elena Rodriguez (Elena Designs) — "Respira actually understands how WordPress builders work. It saves me 15 hours a week."
Color System
Primary: Emerald green #10b981 (heartbeat color). Warm stone neutrals for depth. Semantic: Success #22c55e, Warning #eab308, Error #ef4444, Info #3b82f6. Accents: Amber #f59e0b, Sky #0ea5e9, Violet #8b5cf6, Rose #f43f5e. Dark surface layers: Base #0c0a09, Surface #1c1917, Elevated #1f1e1d, Overlay #182433.
Typography
Display and body: DM Sans. Monospace: JetBrains Mono, Fira Code. Cormorant Garamond for editorial.
Section Layouts
Every section on the page should feel different. Mix layouts so no two consecutive sections share the same structure. Types: Bento Grid, Editorial Split, Flow Diagram, Data Dashboard, Full-Bleed Hero, Horizontal Marquee, Compact Stat Strip. Rules: Never two same layouts back-to-back. Alternate dense and spacious. Every 3rd section a "breathing" moment. Tinted zones create mood shifts.
Background Zones
zone-dark #070a0f (Hero, CTA), zone-elevated #0c1219 (default sections), zone-emerald #f0fdf4 (safety, how-it-works), zone-slate #f1f5f9 (technical), zone-cream #faf7f2 (testimonials). Light sections create contrast and trust. Wave dividers create organic transitions.
Logo & Wordmark
Use logo and wordmark together in headers. Favicon alone for browser tabs, bookmarks, wp-admin sidebar. Never stretch, never recolor. Light background: #fafaf9. Dark background: #0c0a09.