Layout reference

Single-block aspect

A single rectangle at each canonical ratio (held at the same height for comparison). Use these as the aspect for a one-block bento cell, hero illustration, or feature image.

Two-column split

Two cells side-by-side at each canonical proportion. The Tailwind grid template under each demo is what to drop into a bento section's outer wrapper.

Box Layouts

Eight named patterns from Planar's frame 98:5033. Each pattern is a padded soft-surface shell holding N module slots, with 4–7 alignment variants exploring where the modules sit inside the container. The catalog totals 37 variants. Pick the pattern by element count and orientation, then the variant by content's intended balance — don't improvise a new alignment.

aspect-[492/464]              (492 × 464 ≈ 1.06:1, near-square)
rounded-md                    (12px radius, on spine)
border border-border-default  (hairline per Card visibility rule)
bg-bg-section-alt             (surface-2 #edede8)
p-4                           (18px Figma → rounds down to 16px)
gap-6                         (24px module gap, exact match)

1 Element

5 variants · group 98:5035

One module, positioned in any of the five canonical positions: center or any corner.

2 Elements stacked

6 variants · group 98:5040

Two modules stacked vertically. Variants explore four shared alignments plus two diagonal patterns where the modules sit in opposite corners.

3 Elements stacked

7 variants · group 98:5046

Three modules stacked vertically. Four shared-alignment variants plus three with the middle module overridden to a different horizontal position.

4 Elements stacked

4 variants · group 99:8422

Four modules stacked vertically. Three shared-alignment variants plus a mixed one where the two middle modules span full width.

2 Elements Adjacent

5 variants · group 98:5053

Two modules side-by-side. The pair is always centered horizontally; alignment variants control each module's vertical position within its column.

3 Elements Adjacent

4 variants · group 98:5058

A two-module column paired with a single module side-by-side. Variants control whether the column's modules are gap-stacked or top/bottom-aligned, and where the single module sits vertically.

4 Elements Adjacent

2 variants · group 98:7850

Two columns of two stacked modules each. Variants differ only in whether the columns are gap-stacked + centered, or stretched to top + bottom corners.

4 Elements Vertical Split

4 variants · group 98:5062

Two stacked single modules followed by a paired horizontal row at the bottom (1 + 1 + 2). Variants differ in vertical distribution and whether the first module is constrained to full-width left or right.

Box Backgrounds

Four motif-sizing variants for backgrounds inside the 492 × 492 Box Background container (true square, slightly different from Box Layouts' 492 × 464). All four containers are the same outer size; what changes is how the underlying motif is rendered — Fill scales the motif to fit the container exactly (cover), while Fixed - md / lg / xlg render the motif at a fixed pixel size larger than the container and clip to the top-left corner. The bigger the motif, the more "zoomed in" the visible crop feels.

Two demonstrations below. First row uses a diagonal cream gradient as a stand-in so the relative zoom levels read at a glance, independent of any specific asset. Second row uses Planar's reference imagery so the asset-driven version is visible too — replace with a Journey brand motif when one lands.

Gradient stand-in

With Planar reference assets

Two source files in /library-mocks/box-backgrounds/: a fabric photo (Fill) and one floral motif used for all three Fixed variants (sized via CSS percentage to match Figma's render dimensions).

Fill · 97:7306

Asset scaled to container (cover). Whole image visible.

Fixed - md · 98:2496

Motif rendered at 1080 × 800. Top-left crop of the source visible.

Fixed - lg · 98:2541

Motif rendered at 1920 × 1200. Tighter crop, more zoom.

Fixed - xlg · 98:2636

Motif rendered at 2400 × 1500. Maximum zoom; mostly corner.

Bento Layouts

Planar's Bento Layouts frame (98:5268) groups multi-cell grid templates into three canvas classes: Small (square), Medium (horizontal), and Large (extra-wide). Each template fixes a specific composition of aspect-driven cells (1:1, Golden, Root 2) and Fill cells. Pick a template by content shape rather than improvising bento grids.

Notation used below: V[…] = vertical stack · H[…] = horizontal row · 1:1 = aspect-square cell · Golden = 528/326 horizontal or 326/528 vertical · Root2v = 262/370 vertical · Fill = flexible cell.

Bento Layouts - Small

Thirteen square-canvas templates from frame 98:5256. All thirteen are distinct compositions; each card shows the structural sketch and a wireframe rendering.

Bento Layouts - Medium

Ten horizontal-canvas templates. Default canvas is 3:2 (712 × 475); Medium 10 alone uses a shorter 2:1 canvas. Several Medium variants restage Small patterns on the wider canvas — useful when content density needs more breathing room.

Footnote: Medium 03's left cell carries the Figma inner-text label "Root 2", but its aspect ratio (294/475 ≈ 0.619) matches Golden vertical, not Root 2 (≈ 0.707). The sketch below follows the actual aspect.

Cross-references: Medium 04 restages Small 13 (V[Fill, H[Fill, Fill]]) on a wider canvas. Medium 05 restages Small 02 (V[H[1:1, Fill], Fill]). Medium 06 restages Small 06 (V[H[1:1, Fill], H[Fill, 1:1]]). Pick the canvas shape first, then the structure that fits the section's hierarchy.

Bento Layouts - Large

Fifteen large-canvas templates at 1080px wide. Canvas aspect varies per template — most cluster around two named families (Wide ≈ 2:1, Ultrawide ≈ 2.55:1), with the rest scattered by what their lead cell dictates. Pick by canvas shape first, then by the cell composition that fits.

Cell vocabulary additions in Large: "Wide fill" and "Ultrawide fill" appear as Box Layout cell labels (Large 11, 12) — functionally still flex-grow Fill cells, but Planar's labels signal the intended container width inside named row containers. Large 14 pairs a fixed-pixel-width Fill (436px, not flex-grow) with a 1:1 cell. Large 15 introduces the 4:3 cell aspect (new family for Large).

Figma's internal numbering skips "Large 05" (no template with that label exists). Our doc renumbers sequentially against the 15 actual templates; node IDs in each card are the canonical key.

Canvas-family map across the 15 templates: Wide (2:1) — Large 06, 08, 09, 10, 11, 13 (six templates, dominant family). Ultrawide (2.55:1) — Large 12 (only true 2.55 canvas). Near-Ultrawide (≈2.45–2.67) — Large 02, 04, 15. One-off aspects — Large 01 (2.22), 03 (4.11), 05 (2.14), 07 (3.02), 14 (1.69, near Golden). When composing sections, prefer Wide first; reach for Ultrawide or a one-off only when the content demands the shape.

Rules

• For column splits, pick from the four canonical ratios. Do not improvise other splits.
• For module groupings inside a box, pick from the eight Box Layout patterns. Pattern names tag a section's intent ("this section uses Box Layout - 3 Elements - Adjacent").
• The canonical Box Layout container recipe (rounded-md border border-border-default bg-bg-section-alt p-4 + gap-6) applies universally. Do not change the radius, padding, or gap value per section.
• "Adjacent" means horizontal direction (flex). Default vertical variants use flex-col. Gap is the same (gap-6) in both.
• The same ratio or layout pattern used in 3+ sections earns promotion to a @theme template or a shared utility (same threshold as TileSegmented).
• This is a layout reference, not a sections-catalog variant. Planar's Box Layouts (98:5033) and Bento Layouts (98:5268) frames inform the patterns but are not ported as library sections.