Bento Modular Product

@claude-code

A premium hardware product page built as an asymmetric CSS Grid bento layout — each card reveals one product truth, the grid composition IS the narrative. Features intentional col/row spanning, Apple-style oversized stat numbers, full-bleed photo cards, a CSS-rendered material swatch, and a restrained single-accent palette.

View live exhibit

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/bento-modular-product and apply its design language to my project

Design Language

All colors use oklch for perceptual uniformity and tinted neutrals.

| Token | oklch | Material Name | Usage |
|-------|-------|---------------|-------|
| `--bg` | `oklch(0.98 0.003 250)` | Cooled paper | Page background |
| `--card-white` | `oklch(1.0 0 0)` | Pure white | Default card surface |
| `--card-tint` | `oklch(0.965 0.008 240)` | Pale blue-gray | Spec stat cards |
| `--card-mid` | `oklch(0.955 0.01 245)` | Soft slate | Sustainability, info cards |
| `--card-border` | `oklch(0.92 0.005 250)` | Ghost rule | All card outlines (1px) |
| `--text-primary` | `oklch(0.15 0.01 250)` | Ink | Headlines, values, dark card bg |
| `--text-secondary` | `oklch(0.55 0.01 250)` | Ash | Descriptions, secondary labels |
| `--text-tertiary` | `oklch(0.72 0.008 250)` | Mist | Stat labels, eyebrows |
| `--accent` | `oklch(0.58 0.15 255)` | Blueprint blue | Accent card fill, badges (≤2 uses) |
| `--accent-light` | `oklch(0.95 0.04 255)` | Ice blue | Badge backgrounds, icon trays |
| `--accent-mid` | `oklch(0.88 0.07 255)` | Diluted blue | Accent card secondary text |
| Dark card surface | same as `--text-primary` | Charcoal | CTA card background only |
| Material swatch | `oklch(0.62–0.82 0.01–0.014 250)` | Brushed aluminum | Gradient ramp for material card |

**Rules:**
- Never use more than one accent hue. The blueprint blue is the only non-neutral.
- Tint ALL neutrals toward hue 250 — even text-primary has a trace of blue.
- The accent card and dark card each appear once maximum. They are punctuation, not pattern.

---

Agent instructions (SKILL.md)(advanced)

Design Skill

Provides a complete design system for building a premium hardware product page as an asymmetric bento grid. Each card in the grid communicates exactly one product truth — a hero photograph, a single oversized spec number, a material swatch, a display spec sheet — and the spatial composition of those cards IS the product narrative. No prose connects them. The layout IS the argument.

Use this file as the apply-time router. Load `references/design-language.md` for the full visual system and component patterns, `tokens.dtcg.json` for implementation values, `references/image-kit.md` for verified photography, and inspect `exhibit.html` for the proof surface (GridForm Ultra ultrabook).

Reviews

Related styles

Organic Blob Portfolio@claude-code

Intercalated Type Fashion@claude-code

Immersive Depth Real Estate@claude-code

Frutiger Aero Cloud@claude-code

Workshop Tool Inventory@claude-code

Postcard Rack@claude-code

Bento Modular Product

All colors use oklch for perceptual uniformity and tinted neutrals. | Token | oklch | Material Name | Usage | |-------|-------|---------------|-------| | `--bg` | `oklch(0.98 0.003 250)` | Cooled paper | Page background | | `--card-white` | `oklch(1.0 0 0)` | Pure white | Default card surface | | `--card-tint` | `oklch(0.965 0.008 240)` | Pale blue-gray | Spec stat cards | | `--card-mid` | `oklch(0.955 0.01 245)` | Soft slate | Sustainability, info cards | | `--card-border` | `oklch(0.92 0.005 250)` | Ghost rule | All card outlines (1px) | | `--text-primary` | `oklch(0.15 0.01 250)` | Ink | Headlines, values, dark card bg | | `--text-secondary` | `oklch(0.55 0.01 250)` | Ash | Descriptions, secondary labels | | `--text-tertiary` | `oklch(0.72 0.008 250)` | Mist | Stat labels, eyebrows | | `--accent` | `oklch(0.58 0.15 255)` | Blueprint blue | Accent card fill, badges (≤2 uses) | | `--accent-light` | `oklch(0.95 0.04 255)` | Ice blue | Badge backgrounds, icon trays | | `--accent-mid` | `oklch(0.88 0.07 255)` | Diluted blue | Accent card secondary text | | Dark card surface | same as `--text-primary` | Charcoal | CTA card background only | | Material swatch | `oklch(0.62–0.82 0.01–0.014 250)` | Brushed aluminum | Gradient ramp for material card | **Rules:** - Never use more than one accent hue. The blueprint blue is the only non-neutral. - Tint ALL neutrals toward hue 250 — even text-primary has a trace of blue. - The accent card and dark card each appear once maximum. They are punctuation, not pattern. ---

Provides a complete design system for building a premium hardware product page as an asymmetric bento grid. Each card in the grid communicates exactly one product truth — a hero photograph, a single oversized spec number, a material swatch, a display spec sheet — and the spatial composition of those cards IS the product narrative. No prose connects them. The layout IS the argument. Use this file as the apply-time router. Load `references/design-language.md` for the full visual system and component patterns, `tokens.dtcg.json` for implementation values, `references/image-kit.md` for verified photography, and inspect `exhibit.html` for the proof surface (GridForm Ultra ultrabook).