DESIGN.md · explainx registry
Cron (Notion Calendar)
Cron's design system is "The Masterpiece of Time." It is a precision-engineered, dark-first environment that prioritizes speed, density, and zero-distraction scheduling for power users.
Design System#design#ui#ux#template
DESIGN.md (markdown body)
| name | Cron (Notion Calendar) |
| colors | background: "#000000" foreground: "#ffffff" brand: "#ffffff" muted: "#666666" border: "#222222" card: "#111111" accent: "#2483e2" # Cron Blue light: background: "#ffffff" foreground: "#111111" muted: "#888888" border: "#f0f0f0" card: "#f9fafb" |
| typography | fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "13px" lineHeight: "1.4" heading: fontWeight: "600" |
| rounded | default: "4px" # Cron is very precise and relatively sharp md: "6px" full: "9999px" |
Design System: Cron (Notion Calendar)
Overview
Cron's design system is "The Masterpiece of Time." It is a precision-engineered, dark-first environment that prioritizes speed, density, and zero-distraction scheduling for power users.
Design Philosophy
- Mechanical Precision: The UI is designed to feel like a high-end digital clock—precise, fast, and impeccably aligned.
- The "Black Box": Dark mode is the primary experience, using deep blacks (
#000000) and thin grey lines to minimize visual noise. - Density for Power: Packs a full week of events, meetings, and overlaps into a single view without feeling cluttered.
- Keyboard-First: Every element is reachable via hotkey, and the UI reacts instantly to user commands.
Colors
- Pure Dark (#000000): The foundation of the Cron aesthetic, creating a high-contrast canvas for colorful events.
- Cron Blue (#2483E2): Used for primary highlights, the current time indicator, and brand presence.
- Vibrant Event Palette: Uses a curated set of colors (Sage, Lavender, Flamingo) for different calendars, ensuring they remain legible on dark backgrounds.
Typography
- Inter: Chosen for its neutrality and precision, ensuring that calendar event titles are readable even when truncated.
- Tight Hierarchy: Uses condensed scales to fit more data into the time grid.
Components
- The Time Grid: A highly-structured area with 1px borders and a prominent red "current time" line.
- The Mini-Month Sidebar: A compact, high-density calendar for fast date jumping.
- Command Palette: A center-focused, floating bar with a minimalist list of actions and shortcuts.
Visual Effects
- Snap-to-Grid: Dragging events features a high-fidelity "snapping" animation that reinforces the precision feel.
- Subtle Glows: The current day or time often features a very subtle glow to draw the user's eye.
- Fast Transitions: View switches (Day to Week) are snappy and use minimal motion to maintain focus.
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 Cron (Notion Calendar) on explainx.ai?
- Cron's design system is "The Masterpiece of Time." It is a precision-engineered, dark-first environment that prioritizes speed, density, and zero-distraction scheduling for power users. 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