# Bento Box

Schema: 1.0.0 · Content revision: f5fd78058ba2
Resource base: https://mejohnc.org (or the preview host used to obtain this file).

A layout pattern using differently sized cards within a shared grid. The hierarchy comes from card size and grouping rather than from a particular color palette.

## Visual family
Contemporary interfaces. Editorial family: shared visual vocabulary, not a claim of common origin.

## Visual cues
- Modular cards
- Shared gutters
- Unequal emphasis

## Build it
1. Choose one lead card.
2. Give each card a single purpose.
3. Define the mobile reading order before adding spans.

## Example
A product overview with one demonstration, two capabilities, and a compact release note.

## Typography
Keep one sans-serif family across cards. Use size and weight to distinguish the lead card from supporting information.

## Practical consequences
- Starting projects: Portfolio, Store, Internal tool. These are suggestions, not restrictions.
- Reading/layout: compact; quiet visual emphasis.
- Asset work: Choose a useful preview or summary for each card.
- Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks.

## Limits
Making everything a card, cropping essential content to fixed heights, or changing the reading order on mobile.

## Reading the collected reference board
Notice how different image and text blocks fit a shared grid. Check which block leads each composition and how the smaller blocks support it.

## Context
Contemporary screen interpretation. The recipe is a modern web adaptation.
No single inventor or exact founding date is asserted for this interpretation.

## Implementation files
- [page](/territories/bento-box/)
- [guide](/territories/bento-box/guide.md)
- [brief](/territories/bento-box/brief.md)
- [tokens](/territories/bento-box/tokens.json)
- [checks](/territories/bento-box/checklist.md)
- [example](/territories/bento-box/example/)
- [versionedGuide](/territories/v1/bento-box/guide.md)
- [versionedTokens](/territories/v1/bento-box/tokens.json)