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 be…

High Quality

Join 0+ developers using this skill

skill

Designs

intermediate

0 installs

4/5 quality

View Source

Last updated: June 19, 2026

AI Skill Market Insights

Real data. Real impact.

Popularity

Rising

Emerging

Active Users

Developers

Quick Start

Install Command

Source: https://github.com/whyashthakker/design-md-templates-skills?ref=explainx

TEAR & SHARE

3-5hrs/WK

RISING

0.0K+ USING

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.

Bento

AI Skill Market Insights

Quick Start

Install Command

TEAR & SHARE

Tags

Raycast

Be Part of the 0+ Developer Community

Design System: Bento

Overview

Design Philosophy

Colors

Typography

Components

Visual Effects

License

MongoDB

NVIDIA

Mintlify

Spotify

Channels

Learn

Compare

Company

Agents