DESIGN.md · explainx registry
Reflect
Reflect's design system is "The Minimalist Second Brain." It is an elegant, typography-first environment designed for deep focus, structured notes, and frictionless data recall.
Design System#design#ui#ux#template
DESIGN.md (markdown body)
| name | Reflect |
| colors | background: "#ffffff" foreground: "#111111" brand: "#000000" muted: "#888888" border: "#f0f0f0" card: "#ffffff" accent: "#2483e2" dark: background: "#0d0e10" foreground: "#eff3f4" muted: "#666666" border: "#1f1f1f" card: "#121417" accent: "#2483e2" |
| typography | fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" serif: "Lyon-Text, Georgia, serif" body: fontSize: "16px" lineHeight: "1.6" fontWeight: "400" heading: fontFamily: serif fontWeight: "600" letterSpacing: "-0.01em" |
| rounded | default: "4px" md: "8px" full: "9999px" |
Design System: Reflect
Overview
Reflect's design system is "The Minimalist Second Brain." It is an elegant, typography-first environment designed for deep focus, structured notes, and frictionless data recall.
Design Philosophy
- Typography as Interface: The UI is almost entirely defined by the relationship between its serif headings and sans-serif body text.
- Restrained Minimalism: Rejects decorative elements for a clean, monochrome-first aesthetic that minimizes cognitive load.
- The "Daily" Focus: The UI is built around a daily note, prioritizing the "Now" while making the "Past" easily reachable through back-links.
- Quiet Intelligence: Uses subtle icons and thin lines to guide the user without distracting from the content.
Colors
- Pure Monochrome: Primarily uses absolute Black and White, with a deep "Hunter Black" for dark mode.
- Subtle Highlights: Uses very soft, tinted backgrounds (Pastel Blue, Green) for back-links and highlighted text.
- Functional Accents: A single professional blue is used sparingly for primary interactive states.
Typography
- Lyon (Serif): Used for headings to create a literary, thoughtful, and high-quality "notebook" feel.
- Inter (Sans): Handles the day-to-day writing and interface utility with exceptional clarity.
Components
- The Graph View: A signature, minimalist visualization of notes as nodes and links in a 2D space.
- The Daily Note: A full-screen, distraction-free writing environment with integrated "Backlinks" and "Incoming" sections.
- Command Palette: A center-focused, minimalist search bar that is the primary way to jump between notes.
Visual Effects
- Airy White Space: High use of padding and margins to "let the thoughts breathe."
- Minimalist Depth: Relies on thin borders and subtle background shifts rather than shadows.
- Fast Content Search: Designed for instant result appearing as the user types in the search bar.
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 Reflect on explainx.ai?
- Reflect's design system is "The Minimalist Second Brain." It is an elegant, typography-first environment designed for deep focus, structured notes, and frictionless data recall. 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