DESIGN.md · explainx registry
Rabbit
Rabbit's design system is "The AI Companion." It is characterized by its iconic fluorescent orange color, a high-tech-meets-lo-fi aesthetic, and a focus on speech-to-action interactions.
Design System#design#ui#ux#template
DESIGN.md (markdown body)
| name | Rabbit |
| colors | background: "#000000" foreground: "#ffffff" brand: "#ff5722" # Rabbit Orange muted: "#333333" border: "#222222" card: "#111111" accent: "#ff5722" dark: background: "#000000" foreground: "#ffffff" muted: "#444444" border: "#222222" card: "#111111" accent: "#ff5722" |
| typography | fontFamily: sans: "Inter, system-ui, sans-serif" mono: "JetBrains Mono, Courier New, monospace" body: fontSize: "14px" lineHeight: "1.4" heading: fontWeight: "700" |
| rounded | default: "0px" # Rabbit hardware/UI is often quite sharp or uses perfect circles md: "4px" full: "9999px" |
Design System: Rabbit
Overview
Rabbit's design system is "The AI Companion." It is characterized by its iconic fluorescent orange color, a high-tech-meets-lo-fi aesthetic, and a focus on speech-to-action interactions.
Design Philosophy
- The Orange Beacon: The Rabbit Orange (#ff5722) is the single brand signal, representing energy, intelligence, and the "R1" device.
- Lo-Fi High-Tech: Combines pixel-art elements and monospace fonts with cutting-edge AI features, creating a "retro-futuristic" vibe.
- Modal Simplicity: The UI is designed to be experienced in small bursts—cards, voice snippets, and focused status screens.
- The Mascot Voice: Integrated animations of the Rabbit mascot provide a human-like feedback loop for AI processing.
Colors
- Fluorescent Orange (#FF5722): Used for the primary device chassis and all critical UI actions.
- Stark Monochrome: Uses pure Black and White to ensure the Orange remains the absolute hero.
- Dark Void: Backgrounds are almost always pure black to minimize eye strain and save power on OLED screens.
Typography
- Geometric Sans: Used for the primary interface to provide a clean, modern look.
- Monospace Accents: Uses Mono fonts for "Terminal" or "Processing" states to reinforce the technical nature of the AI.
Components
- The PTT (Push-To-Talk) Ring: A large, circular orange indicator that pulses when the AI is listening.
- LAM (Large Action Model) Cards: Simple, monochrome cards that display the result of an action (e.g., booking a ride, ordering food).
- The Scrolling Carousel: A vertical or horizontal list of focused interactions, often controlled by a scroll wheel.
Visual Effects
- Pulse & Glow: The Rabbit Orange often features a subtle glow or pulse to indicate "thinking" or "listening."
- Scanlines: Subtle horizontal lines in the background to simulate a terminal or CRT display.
- Snappy Transitions: Animations are fast and mechanical, mimicking the speed of a hardware device.
Usage
- Copy DESIGN.md into your project or paste it into your IDE agent chat.
- Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
- When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.
Common questions
- What is Rabbit on explainx.ai?
- Rabbit's design system is "The AI Companion." It is characterized by its iconic fluorescent orange color, a high-tech-meets-lo-fi aesthetic, and a focus on speech-to-action interactions. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
- What is DESIGN.md?
- DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
- How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
- Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
- Where is the source repo?
- Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
- How current is this DESIGN.md?
- Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
- Need a fresh DESIGN.md from scratch?
- Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.
Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
List Your Design.md
Share your design system with AI agents worldwide