Design reference — bento grids, coloring & illustrations (Steep)

:::note Contenido en inglés Esta página del wiki se sincroniza desde la base de conocimiento en inglés y todavía no está traducida. :::

reference · designer · updated 2026-06-28 · source

Reference captured from https://bentogrids.com/shots/cltfyofaf000an8ztrm3gzf2q ("Bento cards at Steep" · product: https://steep.app/ — BI tool). Issue #358. Reference, not normative — it feeds the admin's design decisions; the rules in force remain grid-system.md (v2, G1–G20 + C1–C5), color-scope.md and admin-ui-conventions.md.

Source images (BentoGrids CDN, in reading order):

1. Hero + 6+6 — https://s.bentogrids.com/cltfynmaz0006n8ztcfqmn8da.png
2. Mixed feature grid — https://s.bentogrids.com/cltfynng30009n8zt0m4j5718.png
3. 6+6 + quote band — https://s.bentogrids.com/cltfynms60007n8zt19ete0q5.png
4. 6+6 closing — https://s.bentogrids.com/cltfynn4i0008n8zt1xvh9wch.png

1. Bento grid — what Steep does

Pattern	Observation
Bands, not mosaic	The page is a stack of horizontal bands; each band is a mini-grid (full-width hero · 6+6 · mixed band). No chaotic masonry.
Simple spans	Almost everything is 6+6 or "large card + quarters". The complex band: large card (~5 cols × 2 rows) + 2×2 grid of small cards + bottom 3+3+6 row.
One lead card per band	Each band has exactly ONE standout card (by background tint or size); the rest are quiet cards.
Constant card anatomy	Illustration/UI on top (~60% of the height), serif title + sans body below, centered or left depending on density. The repeated anatomy is what makes the bento legible.
Surface	Large, consistent radius, soft 1px border, near-white background on a white canvas — hierarchy comes from tint and size, not shadows.
Quote band	Full-width quote in serif italic on light gray as a "breather" between feature bands.

tedos mapping (grid v2): Steep's bands ≈ G8 (stacked bands, height = their tallest group); each band works as a G9/G10 group (no widget floats loose, cohesive subgrid); the lead card per band ≈ G16 (intensity = attention). The constant card anatomy is almost 1:1 our G18 widget anatomy (icon on top, text below, subtle background), and the size range per card ≈ the G11 group contract.

2. Coloring — what Steep does

Pattern	Observation
Dominant neutral base	~80% of the cards are near-white with a soft border; color is the exception, not the rule.
Tints as card background	3 pale tints (sage green, cream/butter, light gray) used as the FULL background of a card — never as partial decoration.
One tint per band	Each band has at most one tinted card → the eye goes there first. This is exactly our G16/G17 (tone = group, intensity = attention; one accent per group).
Saturated color only in illustration	Strong color (warm orange gradient, violet, chart blue) lives INSIDE the illustrations, never in the card's chrome/UI.
Text always neutral	Titles and body in dark ink over any tint; the tint never compromises contrast (C4 — AA is a gate).

tedos mapping: the pale tints ≈ our *-soft (accent-soft, success-soft) and bg-elevated/bg-sunken. In admin the lead tint would be Cian-soft (color-scope.md: Cian exclusive to the admin; Azafrán brand-only — and never as a group hue, G16). "Saturated color only in illustration" rhymes with our rule of a contained Azafrán seed (one active seed per group, G17).

3. Use of illustrations — what Steep does

Two registers, never mixed within a single card:

Register	How it's built	When it's used
Product-UI fragments	Real product screenshots/crops, cropped and stacked in layers with offset and a soft shadow; bleeding outside the card's visible area.	Concrete features (define metrics, compare, edit docs) — proof of a real product.
Line illustrations	Fine ink-style stroke (outline), dotted guides, composition with lots of air; a SINGLE element filled with a warm gradient (orange bars, violet flower, gradient board).	Abstract concepts (common language, depth, engagement) — the human/editorial side.

Cross-cutting details:

• Minimal thin-line icons in quiet cards; a single color glyph (orange) across the whole page.
• Typography: display serif (with italic for emphasis) for titles, sans for body, mono for technical chips (semantic layer) — the same trio we already have (font-serif/sans/mono).
• The illustration occupies the top zone of the card and breathes; the text never competes with it.

tedos mapping: the "line + one accent" register is almost 1:1 our "lines + points" brand icon system (optional Azafrán, one point/segment at most — brand/icons/icon-style.md). Steep validates scaling that icon language → card illustration. For admin: neutral illustrations

• the surface's hue accent; warm gradients only on brand surfaces.

4. Actionable takeaways (if the Designer adopts them, they go to spec)

1. Bento bands for the admin's reading/marketing surfaces (empty states, onboarding, /plans landing): bands with one tinted card per band — expressible today with G8/G10 + G16.
2. Scale "lines + points" to card illustrations — Tinta stroke + one Azafrán element on brand surfaces; neutral version + Cian-soft for admin. A Designer decision (new token/spec, doesn't exist yet).
3. Quote/breather band between dense widget groups — full-width, serif italic, bg-sunken.
4. Layered UI fragments as an empty-state / feature-intro pattern: real product screenshots with offset + shadow, not invented mockups.

None of this is normative until it passes through design-routing.md (Designer spec → Frontend).