DESIGN.md · explainx registry
Bento
Bento's design system is "The Grid of You." It is a playful, personal environment centered around the "Bento Box" pattern—organizing life and links into a beautiful, highly-rounded grid.
Design System#design#ui#ux#template
DESIGN.md (markdown body)
| name | Bento |
| colors | background: "#1d1d1d" # Cod Gray foreground: "#ffffff" brand: "#5aff88" # Screamin' Green muted: "#8a8f98" border: "#2b2b2b" card: "#262626" accent: "#5aff88" light: background: "#ffffff" foreground: "#111111" muted: "#6b7280" border: "#e5e7eb" card: "#f9fafb" accent: "#5aff88" |
| typography | fontFamily: sans: "Inter, system-ui, sans-serif" body: fontSize: "15px" lineHeight: "1.5" heading: fontWeight: "700" letterSpacing: "-0.02em" |
| rounded | default: "24px" # Bento is known for very large, soft rounding md: "32px" lg: "40px" full: "9999px" |
Design System: Bento
Overview
Bento's design system is "The Grid of You." It is a playful, personal environment centered around the "Bento Box" pattern—organizing life and links into a beautiful, highly-rounded grid.
Design Philosophy
- The Modern Grid: Every element is a tile in a perfectly aligned, responsive grid.
- Extreme Rounding: Uses very large border radii (24px to 40px) to create a soft, friendly, and tactile feel.
- Vibrant Signals: Uses "Screamin' Green" as a signature brand voltage against a dark, minimalist canvas.
- Personal Expression: The UI is designed to be a canvas for the user, supporting diverse colors, images, and links in a coherent frame.
Colors
- Screamin' Green (#5AFF88): A vibrant, digital green that represents the "online" personal brand.
- Cod Gray (#1D1D1D): The primary background that makes the colorful bento tiles pop.
- Soft Accents: Uses a secondary palette of Peach, Coral, and Muted Blue for individual tile backgrounds.
Typography
- Inter: Ensures that personal bios and link labels are highly legible across different tile sizes.
- Bold Headers: Uses heavy weights and tight tracking for a modern, "poster-like" editorial feel.
Components
- The Bento Tile: The fundamental unit. A highly-rounded rectangle (
24px+) with integrated links, images, or status. - The Header Card: A larger, full-width tile at the top containing the user's profile and bio.
- Link Pills: Small, high-radius buttons within tiles for social media or personal links.
Visual Effects
- Tile Hover: Tiles subtly scale up and show a soft glow when hovered.
- Smooth Sorting: Drag-and-drop interactions feature fluid, physics-based motion.
- Mesh Gradients: Marketing headers often use soft, multi-colored mesh gradients to add depth.
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 Bento on explainx.ai?
- Bento's design system is "The Grid of You." It is a playful, personal environment centered around the "Bento Box" pattern—organizing life and links into a beautiful, highly-rounded grid. 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