Bento Flow

# Bento Flow

## Design Philosophy

Bento Flow embraces the **asymmetric harmony** of Japanese bento box composition. Each card is a self-contained thought, yet together they form a cohesive visual narrative. The design rejects rigid 12-column grids in favor of organic, purposeful arrangements where size communicates importance.

Inspired by Apple's WWDC presentations and product pages, Bento Flow treats each section as a distinct "dish" — some large and detailed, others compact and focused — arranged on a shared tray with consistent spacing and generous padding.

## Design Goals

- Communicate feature hierarchy through card size and placement
- Create a playful yet professional first impression
- Ensure the grid adapts gracefully from 1-column mobile to multi-column desktop
- Maintain visual balance despite asymmetric layouts
- Make every card feel like a curated, intentional composition

## Visual Language

The visual language is **warm minimalism**. Backgrounds are near-white warm neutrals (`#fafaf9`), cards are pure white with subtle shadows, and the orange accent (`#f97316`) injects energy without aggression.

Cards have generous padding (24-32px) and large border-radius (16-24px), creating a friendly, approachable feel. Typography is clean with tight heading line-heights for impact.

## Color System

| Token           | Value     | Usage                       |
|-----------------|-----------|-----------------------------|
| background      | `#fafaf9` | Page background             |
| surface         | `#ffffff` | Card backgrounds            |
| primary         | `#f97316` | CTAs, highlights            |
| primary-hover   | `#ea580c` | Button hover                |
| secondary       | `#78716c` | Secondary text              |
| accent          | `#fed7aa` | Accent backgrounds          |
| text            | `#1c1917` | Headings, body              |
| text-muted      | `#a8a29e` | Captions, metadata          |
| border          | `#e7e5e4` | Card borders, dividers      |
| surface-warm    | `#fef3c7` | Highlighted cards           |

## Typography

- **Primary Font:** SF Pro Display (system), Inter (web)
- **Heading Scale:** `clamp(2rem, 5vw, 4rem)` for hero, 60% per level
- **Body Size:** 16px, line-height 1.5
- **Font Weights:** 400 (body), 500 (labels), 600 (subheadings), 700 (headings)
- **Letter Spacing:** -0.03em for large headings

## Spacing System

Base unit: 4px

| Token | Value  | Usage                    |
|-------|--------|--------------------------|
| xs    | 4px    | Inline gaps              |
| sm    | 8px    | Tight spacing            |
| md    | 16px   | Card internal gaps       |
| lg    | 24px   | Card padding             |
| xl    | 32px   | Grid gap                 |
| 2xl   | 48px   | Section spacing          |
| 3xl   | 64px   | Hero padding             |

## Border Radius

| Token | Value | Usage                    |
|-------|-------|--------------------------|
| sm    | 12px  | Inputs, small cards      |
| md    | 16px  | Standard cards           |
| lg    | 24px  | Feature cards            |
| xl    | 32px  | Hero sections            |
| full  | 9999px| Buttons, badges          |

## Shadows

```css
.card-shadow {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
}
.elevated-shadow {
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.hover-shadow {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
```

## Gradients

```css
.cta-gradient {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}
.warm-gradient {
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
}
```

## Layout

- **Container:** max-width 1200px, centered, 24px padding
- **Grid:** CSS Grid with `grid-template-areas` for named placement
- **Card Gap:** 16px (mobile), 20px (tablet), 24px (desktop)
- **Section Spacing:** 80px between major sections
- **Breakpoints:**
  - Mobile: < 640px (single column, stacked cards)
  - Tablet: 640px–1024px (two-column bento)
  - Desktop: > 1024px (full bento grid)

### Bento Grid Template (Desktop)

```css
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}
.card-large { grid-column: span 2; grid-row: span 2; }
.card-medium { grid-column: span 2; }
.card-small { grid-column: span 1; }
```

## Components

### Navbar
- White background with subtle bottom border
- 64px height, centered logo
- Nav links with hover underline animation
- CTA button with orange gradient

### Hero
- Large bento grid with featured card spanning 2x2
- Animated entrance for cards (staggered fade-up)
- Headline in gradient text for emphasis

### Buttons
- Primary: orange gradient, white text, full border-radius
- Secondary: white with orange border
- Hover: slight elevation increase, shadow deepens

### Cards
- White background, 16px radius
- 24px internal padding
- Hover: translate(-2px), shadow deepens
- Content: icon + title + description

### Feature Grid
- Asymmetric layout with large + small cards
- Large cards contain illustrations
- Small cards contain metrics or icons

### Footer
- Warm gray background
- Multi-column link grid
- Social icons row

## Animation

- **Duration:** 250ms standard, 500ms for entrances
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)` standard, `cubic-bezier(0.34, 1.56, 0.64, 1)` bouncy
- **Hover Effects:** translate(-2px), shadow transition, scale(1.01)
- **Entrance:** Staggered fade-up, 80ms delay between cards
- **Scroll:** Parallax on hero, fade-in on sections

## Responsive Rules

- **Mobile (< 640px):** Single column, all cards full-width, 16px gap
- **Tablet (640px–1024px):** Two columns, large cards span full width
- **Desktop (> 1024px):** Four columns, full bento layout with named areas
- **Card content:** Truncate at 3 lines on small cards, full on large

## Accessibility

- Focus-visible: 2px solid `#f97316` with 2px offset
- Reduced motion: disable entrance animations, keep hover transitions
- Cards are focusable with keyboard
- Semantic heading hierarchy within each card
- Color contrast minimum 4.5:1 for all text

## Performance

- CSS Grid layout, no JavaScript for grid management
- Images use `loading="lazy"` and aspect-ratio containers
- Font loading with `font-display: swap`
- Hover effects use CSS transforms (GPU-accelerated)
- No layout shift from card entrance animations (use `transform`)

## Implementation Rules

1. Named grid areas must be defined for desktop, with fallback to auto-fill
2. Card heights must use `aspect-ratio` or `min-content` — never fixed px
3. Orange accent must never appear on orange backgrounds
4. All cards must be keyboard-focusable
5. Test bento layout at every 100px viewport width increment
6. Large cards must reflow to full-width below 640px