Bento design skill for AI agents

Overview

Bento is a modern, grid-first design system skill file inspired by the Japanese bento box — content organized into visually distinct blocks of varying sizes that together form a cohesive, balanced layout. When you give this skill file to an AI coding assistant, it generates interfaces where every section, card, and data block snaps into a structured grid with warm, inviting colors and crisp Inter typography.

The bento box approach is especially effective for dashboards, landing pages, feature showcases, and any interface where multiple pieces of content need to coexist without competing for attention. Each block gets its own space, its own hierarchy, and its own breathing room.

Design Tokens

Color Palette

Bento uses a warm, muted palette that gives grid layouts a soft, approachable feel without sacrificing clarity:

The warm peach primary (#FAD4C0) paired with the cream surface (#FFF5E6) creates a distinctive warmth that sets Bento apart from the typical cold-gray dashboard aesthetic. The muted blue secondary (#80A1C1) provides a calm contrast for supporting elements.

Typography

Bento uses Inter as both the primary and display font — a versatile, highly legible typeface optimized for UI:

• Primary and display font: Inter — clean geometric proportions with excellent readability at every size, from compact grid labels to large hero headings
• Monospace font: JetBrains Mono — used for code blocks, data values, and technical content within bento cells

The type scale is tuned for dense grid layouts: 12 / 14 / 16 / 20 / 24 / 32px. The smaller starting point (12px) accommodates compact bento cells where space is at a premium, while the 32px ceiling keeps even the largest headings proportional to the grid. Font weights span 100 through 900 for full control over visual hierarchy within and across grid blocks.

Spacing

All spacing follows a 4px base unit with a scale of 4 / 8 / 12 / 16 / 24 / 32px. In a bento layout, spacing serves double duty: it defines the internal padding within each block and the gaps between blocks. Consistent spacing is what makes the grid feel intentional — without it, varying-sized blocks look randomly placed rather than deliberately composed.

The Bento Grid

The core of this design system is the grid layout itself. The skill file instructs AI assistants to:

• Use CSS Grid with explicitly defined column and row tracks for bento layouts
• Vary block sizes — mix 1x1, 1x2, 2x1, and 2x2 cells to create visual rhythm and hierarchy
• Maintain consistent gaps between all grid cells using the spacing scale
• Make blocks self-contained — each bento cell should be a complete unit with its own content hierarchy, not a fragment that depends on adjacent cells
• Handle responsive breakpoints — stack or reflow grid cells on smaller viewports while preserving the bento structure where screen size allows

This grid-first approach means AI-generated layouts naturally organize information into scannable, modular blocks rather than long vertical scrolls.

Component Coverage

Bento includes guidance for over 40 component families, each designed to work as standalone blocks within a grid layout or as elements within those blocks:

• Inputs and forms — buttons, text inputs, selects, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, tabs, command palette
• Overlays and feedback — modals, drawers, tooltips, popovers, alerts, toasts, notifications, progress indicators, skeletons
• Page-level patterns — search, empty states, onboarding, authentication screens, settings pages, documentation layouts, pricing blocks

Each component defines required states (default, hover, focus-visible, active, disabled, loading, error), interaction behavior for keyboard, pointer, and touch, and explicit token usage for spacing, typography, and color. Components like cards, stats, charts, and pricing blocks are specifically optimized to function as first-class bento grid cells.

Accessibility

Bento enforces WCAG 2.2 AA compliance as a baseline. Grid-heavy layouts carry specific accessibility risks that this skill file addresses:

• Keyboard-first navigation that follows a logical reading order across grid cells, not just visual placement
• Visible focus states on every interactive element, including within individual bento blocks
• Sufficient contrast ratios between the warm surface color (#FFF5E6) and text (#111827)
• Proper landmark regions and ARIA attributes so screen readers can navigate the grid structure meaningfully
• Testable acceptance criteria for every accessibility requirement

When the visual grid layout conflicts with accessibility — for example, if a visually appealing cell arrangement breaks logical tab order — the skill file prioritizes accessibility.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull bento

2. The skill file saves as a SKILL.md in your project. Cursor automatically picks up skill files and uses them as context during code generation.

3. Start prompting — ask Cursor to build dashboards, landing pages, or feature grids, and the output will follow the Bento system's warm color tokens, Inter typography, spacing grid, and bento layout rules.

Claude (Anthropic)

Use Bento directly with Claude by adding the skill file as context:

1. Copy or download the skill file from the design skill page
2. Paste it at the start of a Claude conversation, or add it to a Claude Project as project knowledge
3. Prompt Claude to generate UI code — it will apply the bento grid structure, warm color palette, and component rules automatically

Other AI Tools

The skill file is standard markdown compatible with any AI assistant that accepts context or system instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — place the file in your project directory
• GitHub Copilot — add to your repository's context or instruction files
• v0 by Vercel — paste the design tokens and grid rules as prompt context

Design Philosophy

Bento is built on the principle that great information architecture starts with great spatial design. The skill file follows three rules:

1. Grid is the foundation — every layout decision starts from the grid. Components, content, and whitespace are all defined in relation to the bento structure
2. Warmth over sterility — the peach-and-cream palette deliberately avoids the cold gray defaults that dominate most dashboards, making data-heavy interfaces feel welcoming
3. Each block stands alone — every bento cell is a self-contained unit. Content should make sense within its block without requiring the user to read adjacent cells for context