I'm not technical. Will this work for me?

Yes! If you can chat with ChatGPT, you can use Respira. No coding knowledge required.

Which AI tool should I use?

Any! ChatGPT, Claude, Cursor, Codex, or others. They all work with Respira.

How do I safely use Cursor with WordPress?

Respira creates a safety layer between Cursor and your WordPress site. It uses a duplicate-first workflow - Cursor edits duplicate pages, not your originals. You review and approve changes before they go live. This is the best way to let AI edit live WordPress site safely.

What if AI breaks my site?

It can't. AI only updates duplicate pages. Your live site is never touched until you review and approve the changes. This safety layer ensures you don't break existing pages.

Which WordPress page builders are supported?

Gutenberg, Divi, Elementor, WPBakery, Oxygen, Bricks, Beaver Builder, Brizy, Visual Composer, and Thrive Architect. Each builder has its own Intelligence package for full AI understanding.

Does Respira require SSH access?

No! Respira works with any WordPress hosting, even shared hosts. No SSH, no server access needed. Just install the plugin and connect your AI.

MCP (Model Context Protocol) is the language AI uses to talk to WordPress. You don't need to understand it - Respira handles it automatically. It's like a translator between your AI and WordPress.

Respira vs official WordPress MCP?

Official MCP is basic and read-only. Respira adds safety (duplicates first), security checks, page builder support, audit logs, and works on any hosting - even shared hosts without SSH access. Unlike WordPress MCP, Respira enables safe WRITE operations through duplicate-first workflow and page builder intelligence.

How many sites can I use Respira on?

Starter plan: 1 WordPress site. Agency plan: up to 20 WordPress sites. All plans are 1-year licenses with full updates and support included.

Can I try before paying?

Yes! Start with a 7-day free trial. No credit card required. If you like it, pay for 1 year of updates and support.

Respira Brand & Design System

Name: Respira for WordPress
Price: 19 EUR
Availability: InStock
Author: Respira

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: 172 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.

Warm Accent Tier

Gold/amber warm accents are used sparingly for hero-level moments and key conversion points. The hero headline uses a gradient of cyan (#ecfeff) → mint (#bbf7d0) → warm gold (#fcd34d) to create warmth without abandoning the emerald identity. Warm tones signal importance and human touch — use for: hero headlines, key CTAs, pricing highlights, and manifesto typography. Never use warm gold as a background or for body text. The warmth is an accent, not the palette.

Typography

Display and body: DM Sans (font-respira class). Monospace: JetBrains Mono, Fira Code. Cormorant Garamond for editorial pull quotes and testimonial cards. Hero headlines use 800 weight with tight letter-spacing (-0.05em) and gradient text treatment. Section headlines use 700 weight at 4xl-5xl scale.

Homepage 3-Act Structure

The homepage follows a narrative arc designed for conversion:

Act 1 — HOOK: Hero + LiveStats → Manifesto → Demo Video. Emotional connection, brand positioning, proof of life. Gold/warm accents allowed here.
Act 2 — UNDERSTAND: ThreePanelVisual → BeforeAfter → SafetyPhilosophy → Testimonials. Show the workflow, prove safety, build trust. Cream testimonial zone creates contrast.
Act 3 — PROVE: BentoCapabilities → SkillsHub → Comparisons → Blog. Technical depth, competitive positioning, community. Dark zones with emerald accents.
Act 4 — CONVERT: Pricing → FAQ → Community → Footer. Clear paths to purchase. No scarcity tactics, honest pricing, prominent "no credit card" messaging.

Breathing Moments

Every 3rd section should be a "breathing moment" — generous whitespace, reduced information density, and a shift in visual tone. The Testimonials section (cream background with wave dividers) and the Manifesto section (warm stone background) serve as breathing moments. Wave SVG dividers create organic transitions between dark and light zones. Never stack two high-density sections (Bento, Comparison, Pricing) back-to-back without a breathing moment between them.

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, Vertical Trust Chain. 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), zone-stone #1c1917 (manifesto — warm dark). Light sections create contrast and trust. Wave SVG dividers create organic transitions between zones. Gradient transitions (dark→cream, cream→dark) use dual-path SVG waves for seamless color blending.

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.