Meridian — layout.md

Spatial system for application + cinema. Influences ranked in influences.md.
Primary absorb: Fluent 2 layout (4px grid, proximity, breakpoints) + Cursor inverted-L chrome + Polaris task density.

1. Laws

1. 4px base unit — all pads, gaps, and control heights snap to multiples of 4 (Fluent spacing ramp).
2. Proximity = meaning — space groups related information; prefer space over extra dividers (Fluent, Polaris).
3. Density follows task — indexes dense; detail/forms breathe; marketing stages use theater, not app density.
4. Chrome is quiet — inverted-L (sidebar + top bar) recedes; content owns hierarchy (Linear, Cursor app).
5. One layout vocabulary — never fork components per surface; remap via data-surface.
6. Stroke before shadow — pane separation = 1px border-border / edge (Fluent stroke).
7. Control ≠ layer radius — controls rounded-lg; panels rounded-2xl; shells rounded-3xl.

2. Spacing ramp (Fluent → Meridian)

CSS knobs (app/globals.css):

--surface-pad
--surface-gap
--control-h*
--row-h*

Rule: if you need a one-off p-[13px], stop — pick the nearest ramp step.

3. Application shell (Cursor + Linear)

Canonical anatomy:

┌──────────────────────────────────────────────────────────┐
│ topbar h-8…h-11  search · filters · kbd                  │
├────────────┬─────────────────────────────┬───────────────┤
│ sidebar    │ main content                │ optional rail │
│ w-40…14rem │ index | detail | editor     │ AI / meta     │
│ quiet nav  │ scroll: one port            │ object-bound  │
├────────────┴─────────────────────────────┴───────────────┤
│ status h-6 mono                                          │
└──────────────────────────────────────────────────────────┘

Proofs: components/surfaces/workbench.tsx, composer-shell.tsx.

Alignment checklist (Linear discipline)

• Icon + label share one vertical centerline in sidebar rows
• Tab labels share baseline with toolbar controls
• Table cells: ID mono left, title truncate, meta right
• Avoid “icon soup” — one leading icon max per row

4. Grid & breakpoints

Fluent size classes (Layout):

Techniques (Fluent): reposition · resize · reflow · show/hide · re-architect.
Meridian default: responsive one layout (not adaptive forks), with progressive disclosure of rails.

Column guidance

5. Surface matrix (layout implications)

6. Pane composition patterns

Index + detail (Polaris density)

[ filters h-8 ]
[ table rows h-8…h-10 ]
     └ selected → opens rail OR navigates detail

Composer (Cursor)

[ explorer | tabs + editor | agent ]

Marketing stage

[ theater svh ]
  copy (one idea)
  ProductFrame → app proof (rounded-2xl edge)

7. Shape on layout edges

8. Dividers

Prefer space → then 1px stroke → then elevation.
Never double: thick border + heavy shadow + loud background.

9. Reading layouts

Demo bands under prose: reading-demo-break / DocsDemoSection — not full-bleed text-sm paragraphs.

10. Anti-patterns

11. Implementation map

12. Agent checklist

• Spacing on 4px ramp
• Correct data-surface
• Control vs layer radius
• Single scroll owner in demos
• Sidebar/topbar quiet; brand only on selected/CTA
• npm run check:design

Sources

• Fluent 2 Layout
• Fluent 2 Shapes
• Polaris Pro design language
• Linear UI redesign