DESIGN.md · explainx registry
Family
Family's design system is "The Delightful Wallet." It brings a high-fidelity, consumer-grade polish to the crypto space, focusing on fluid motion, glass-like materials, and intuitive security.
Design System#design#ui#ux#template
DESIGN.md (markdown body)
| name | Family |
| colors | background: "#ffffff" foreground: "#111111" brand: "#0062ff" # Family Blue muted: "#888888" border: "#f0f0f0" card: "#ffffff" accent: "#0062ff" dark: background: "#111111" # Midnight foreground: "#ffffff" muted: "#666666" border: "#222222" card: "#1a1a1a" accent: "#0062ff" |
| typography | fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "15px" lineHeight: "1.5" fontWeight: "400" heading: fontWeight: "600" letterSpacing: "-0.01em" |
| rounded | default: "16px" # Family is known for very soft, premium rounding md: "20px" lg: "32px" full: "9999px" |
Design System: Family
Overview
Family's design system is "The Delightful Wallet." It brings a high-fidelity, consumer-grade polish to the crypto space, focusing on fluid motion, glass-like materials, and intuitive security.
Design Philosophy
- Digital Craftsmanship: Every detail—from the corner smoothing to the shadow depth—is tuned to a level of "perfect" polish.
- Trust through Delight: Uses friendly, colorful UI and smooth animations to reduce the anxiety associated with financial transactions.
- Material Depth: Heavy use of translucency and multi-layered shadows to create a sense of physical layering.
- Mobile-First Luxury: Designed for touch, with large interactive targets and high-contrast feedback.
Colors
- Family Blue (#0062FF): A vibrant, modern blue that represents trust and the brand's digital identity.
- Midnight (#111111): The signature dark mode foundation, providing a premium, "OLED-friendly" canvas.
- Soft Aqua (#D5F3FE): Used for "Connect" buttons and secondary highlights to create a friendly, approachable feel.
Typography
- Inter: Provides a clean, neutral voice that supports the brand's high-fidelity visuals.
- Hierarchy: Uses font weights and subtle color shifts (Grey to Black) to guide the user through complex transaction data.
Components
- ConnectKit Modal: A signature, highly-polished overlay with rounded corners (
20px) and integrated wallet options. - Transaction Cards: Feature high-radius rounding and large, colorful icons for different assets and tokens.
- The "Pill" Status: Large, rounded status badges for "Success," "Pending," or "Error" with vibrant background glows.
Visual Effects
- Glassmorphism: Uses
backdrop-filter: blur(20px)and translucent white/black for modals and menus. - Inner Glows: Uses subtle 1px inner shadows to simulate light hitting the edge of a physical device.
- Fluid Motion: Interactions feature spring-based animations that feel organic and responsive.
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 Family on explainx.ai?
- Family's design system is "The Delightful Wallet." It brings a high-fidelity, consumer-grade polish to the crypto space, focusing on fluid motion, glass-like materials, and intuitive security. 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