Foundations

Layout & grid.

Every Tetrifox screen begins with the same constraints: close the frame, quantize the space, assemble from cells. Layout is not decoration around content—it is the system the interface grows from.

Unassembled: an open edge and unresolved spacing.

01 / Structure

The closed grid.

Close every edge. Each line must meet a neighbour or the frame, and each region has one border owner—never a floating edge, never a doubled one.

State 1 / 4. One wrapping frame closes the outside; gap-px bg-border supplies the internal hairlines.

One frame owner

The section closes the region; its cells only contribute the dividers between neighbours.

Floating edge

Open on two sides, so the structure never resolves.

02 / Rhythm

Spacing lattice.

Quantize every measure. A 4px base and 8px rhythm produce nine legal steps; half-steps break the beat and are not part of the system.

State 2 / 4 · measured

The same cells now inherit a controlled rail instead of arbitrary inset.

The nine legal steps

14pxMicro-gap

28pxStack gap

312pxCompact control

416pxMobile cell inset

624pxContent rail

832pxGroup gap

1248pxDesktop rail

1664pxSection rhythm

2496pxGenerous section

Banned: p-1.5, gap-2.5, and py-3.5.

Content rail24 → 32 → 48Primary content aligns at px-6, md:px-8, and lg:px-12.

Cellstandard / sectionSemantic padding modes keep inset and vertical rhythm consistent.

Rhythm8 / 32 / 64→96Stack gap, group gap, and section spacing.

03 / Frame

Frame & containers.

Let the viewport be the frame. Readability comes from a capped measure inside a cell—not from pulling the whole interface into a centred outer box.

State 3 / 4 · full-bleed shell

Header, Rail, main, and Footer meet the viewport frame. The text measure remains capped inside main.

Legacy container · do not use

max-w-7xl

Outer gutters make the border float. Keep the frame full-bleed and cap only the content that needs a readable line length.

04 / Assembly

Cellular primitives.

Assemble from Section, Cell, and GridRow, then let one square mark carry state. Change the viewport below to see the same rules recompose without changing vocabulary.

State 4 / 4 · responsive assembly

1280px. The Rail joins the frame and row dividers move to the left.

The specimen represents each target mode inside the available width; it does not force a literal 1280px canvas.

<Section>border-bA full-bleed band. Stack sections to continue the vertical lattice.

<Cell>24 / 32 / 48The canonical content rail; borders stay with the parent.

<GridRow>border-t → border-lOne responsive divider changes orientation when the cells form a row.

<StatusMark>gap / draft / shippedA square state marker: hollow, muted, or brand-filled.

gap

draft

shipped

Constraints this explicit let an interface grow without visual drift. Three primitives, one square mark, nine spacing steps. This page is assembled from exactly that set—nothing here is decoration.