Skip to main content

Grid System v2

The Grid System v2 governs all TED OS UI. It repeals the earlier golden-ratio (φ-based) model: spacing, typography, and proportions are now base-8, no φ. The full directives (G1–G20) live in the repo (knowledge/grid-system.md) and the project's Paper deck; this page is the orientation.

The X axis — variable columns, anti-stretch​

  • Variable columns by target width, not breakpoints. The column count is computed from the available width (clamped between 4 and 20). Reference: phone 4 · tablet 6 · laptop 10 · desktop 12 · ultra-wide / TV 20.
  • Anti-stretch. More screen = more columns and more widgets, never inflated widgets. The canvas is never centered or capped.
  • overflow-x is forbidden (overflow-x: clip on the page chrome).

The Y axis — growth​

  • The canvas grows downward; scroll-y is allowed, the top origin never moves.
  • Bands by volatility — constant (origin) → live → fresh (bottom edge). A band's height is its tallest group.

Groups — context always​

  • No widget floats loose. Every widget lives in a group (a cohesive 2D subgrid aligned to the main grid) and renders by groups at any size.
  • Each group declares a contract: its column/row span (and max), priority, and hue, plus a flex widget that absorbs extra width and a vbottom widget that absorbs extra height.

2D packing + bounded expansion​

  • Greedy packing by priority + balancing — never a last band with one group when the previous band has three or more.
  • Bounded expansion — distribute remaining width up to each group's max (absorbed by flex); stretch height to the band (absorbed by flex + vbottom); the extreme remainder stays as editorial air. No repeat(auto-fit, minmax(...)) uniform stretching.

The unit, radius, and type​

  • Square unit — a cell is a true square at 1×1, portrait at 1×2, landscape at 2×1.
  • Radii by hierarchy (R1–R5), concentric: an inner radius = the outer minus its padding.
  • Base-8 typography — a fixed step scale with clamp() by density; Geist for display, Geist Mono (tabular) for UI/data.

Carried-over rules​

  • Everything in rem, one scale knob; icons in em.
  • Drag snaps to the grid (keyboard too); the group contract survives the drop.
  • Animate only transform and opacity — never width/height/top/left; transition: all is banned.
  • Accessibility is a gate, not polish — AA contrast, visible focus, state by tone + label + shape, reduced-motion respected.

Relationship to the other rules​

The grid complements the foundation conventions and the engineering guardrails; on a spacing / layout conflict, the grid wins. See Foundations and Color scope.