Apple Bento Grid — Design System Reference

Apple Bento Grid — Design System Reference

Complete design tokens, card components, layout templates, and HTML skeleton for generating Apple-inspired bento grid presentations. Supports both light and dark themes.

Table of Contents

1. Design Tokens — Colors, typography, spacing (light theme)
2. Zero-Gap Grid Technique — The 5 mandatory rules
3. Layout Templates — 4-col, 3-col, 2-col
4. Base Card CSS — Reset, card foundation, .num/.label
5. Card Components — Hero, Stat, Category, Bar Chart, Badge, Quote, Highlight
6. Pill / Tag Component — Reusable tag styling
7. Background Texture — Optional crosshatch overlay
8. Complete HTML Skeleton — Copy-paste starter template (light)
9. Dark Theme — Complete dark theme tokens, card overrides, and skeleton

---

1. Design Tokens

Color Palette

Assign one accent color per stat category for visual distinction. Max 3-4 accents per grid.

Role	Hex	When to Use
Page background	#f5f5f7	body background — Apple's signature light gray
Card surface	#ffffff	All card backgrounds
Primary text	#1d1d1f	Headings, hero taglines, dark card backgrounds
Secondary text	#86868b	Labels, subtitles, chart axis labels
Tertiary text	#aeaeb2	Dates, footnotes, lightest text
Pill background	#f0f0f2	Tag/pill backgrounds
Pill text	#6e6e73	Tag/pill text, badge labels
Blue	#0071e3	Primary stats, counts, feature numbers
Cyan	#00b4d8	Secondary stats, code metrics, alt accent
Red/Coral	#ff6b6b	Cost figures, warnings, negative numbers
Green (medium)	#34d399	Growth stats, quote emphasis, bar chart mid
Green (dark)	#059669	Badges, darkest bar gradient stop
Green (light)	#6ee7b7	Mid bar gradient stop
Green (lightest)	#a7f3d0	Lightest bar gradient stop

**Color assignment strategy:**

• Blue #0071e3 — primary metrics (revenue, count, features)
• Cyan #00b4d8 — secondary metrics (users, lines, volume)
• Red #ff6b6b — cost/money figures, warnings
• Green #34d399 — growth, savings, positive outcomes

Typography

Font	Role	Weights
Sora	Display headings, large numbers, hero taglines, chart values	400, 600, 700, 800
DM Sans	Body text, labels, pills, captions, descriptions	400, 500, 600, 700 (+ italic 400)

Spacing & Surface

| Property | Horizontal Layout | Vertical Layout | |--------