DESIGN.md · explainx registry
BGBlur
BGBlur is a utilitarian privacy tool for focus and clarity in photography and video.
Design System#privacy#photography#utility#design#teal
DESIGN.md (markdown body)
| name | BGBlur |
| colors | background: "#FAFAFA" foreground: "#09090B" brand: "#0D9488" # Teal border: "#E4E4E7" dark: background: "#09090B" foreground: "#FAFAFA" border: "#27272A" |
| typography | fontFamily: sans: "Inter, sans-serif" mono: "JetBrains Mono, monospace" |
| rounded | default: 8px md: 4px |
Design System: BGBlur
Overview
BGBlur is a utilitarian privacy tool for focus and clarity in photography and video. The vibe is secure, functional, and precise.
Design Philosophy
- Privacy & Security: Teal accents and "shield" motifs represent the protection of personal space.
- Functional Focus: The UI should get out of the way, highlighting the "Before/After" transition.
- Tool-like Precision: Use tighter spacing and smaller border radii for a professional utility feel.
Colors
- Secure Teal (
#0D9488): Represents safety, clarity, and precision. - Greyscale Foundation: Heavy use of neutrals to keep the focus on the user's imagery.
Components
- Comparison Sliders: Custom Teal handles for before/after view.
- Utility Buttons: 8px rounding, solid teal or high-contrast grey.
- Upload Zones: 1px dashed borders with subtle teal focus states.
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 BGBlur on explainx.ai?
- BGBlur is a utilitarian privacy tool for focus and clarity in photography and video. 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