Data Bento

A data-dense dashboard design system. Rigid grid compartments inspired by Japanese bento boxes -- each section a different data visualization type.

01 Color Palette Wood, porcelain & data ink
Wood & Lacquer
Bento Wood #8B6914
Wood Dark #5C4A0E
Wood Light #C49A2B
Lacquer #2C1810
Lacquer Red #8B2500
Clean Whites
White #FFFFFF
Rice #FAFAF7
Cream #F5F2EB
Porcelain #F0EDE6
Linen #E8E4DB
Data Ink
Blue #2563EB
Teal #0D9488
Amber #D97706
Rose #E11D48
Violet #7C3AED
Emerald #059669
02 Typography
Display / Noto Sans JP 700 2.5rem
Dashboard Overview
Heading 1 / Noto Sans JP 700 2rem
Revenue Analytics
Heading 2 / Noto Sans JP 500 1.5rem
Monthly Performance Report
Heading 3 / Inter 600 1.125rem
Conversion Rate by Channel
Body / Inter 400 0.9375rem
Each compartment in the bento grid acts as an independent data visualization zone. Dense, readable content is organized into proportional sections that mirror the meticulous arrangement of a traditional bento box.
Caption / Inter 400 0.75rem
Updated 2 hours ago · Source: Analytics API · Region: APAC
Monospace / JetBrains Mono 400 0.8125rem
SELECT COUNT(*) FROM orders WHERE status = 'completed'
03 Spacing 8px base grid
--space-xs
4px
--space-sm
8px
--space-md
16px
--space-lg
24px
--space-xl
32px
--space-2xl
48px
--space-3xl
64px
Badges
Active Healthy Warning Critical Beta Deployed
04 Buttons
Primary Actions
Variants
States
Icon Buttons
05 Forms
Alphanumeric characters and hyphens only
06 Cards & Metric Tiles Data-dense containers
Total Revenue
$847.2K
+12.5%
Active Users
24,891
+8.3%
Avg. Session
4m 32s
-2.1%
Conversion
3.42%
+0.8%
Top Channels Live
Channel Sessions Revenue
Organic Search 12,847 $312.4K
Direct 8,291 $198.7K
Paid Social 5,104 $142.1K
Email 3,649 $94.0K
Last updated: 2 minutes ago
System Health All Clear
API Gateway 99.98%
Database Cluster 99.95%
CDN Edge Nodes 100.0%
ML Pipeline 98.72%
Search Index 99.99%
Monitored every 30s
07 Alerts
ℹ
Dataset Sync
Your data warehouse is syncing. This may take up to 15 minutes.
✓
Pipeline Complete
All 847 records processed successfully. No anomalies detected.
⚠
Approaching Quota
API usage at 87% of monthly limit. Consider upgrading your plan.
✗
Query Failed
Connection timeout on replica-3. Automatic failover initiated.
08 Navigation
Dashboard / Analytics / Revenue
09 Bento Dashboard Demo Full compartmentalized layout
Orders
1,247
+5.2%
Avg. Order Value
$67.80
+1.4%
Bounce Rate
32.1%
+3.7%
Uptime
99.97%
All systems go
Weekly Revenue
Completion
72%
Status
Production
Staging
Preview
Dev
Region Performance
$312K
North America
+14%
$198K
Europe
+9%
$156K
APAC
+22%
$94K
LATAM
-3%
$87K
MEA
+6%