cami-design-layoutlisted

# Cami — Layout ## Required reading Before proceeding, load `../cami-design/references/review-protocol.md` for the shared **Context Gathering Protocol**, **Design System Protocol**, severity scale, and **Review Output Format**, then continue here. --- Compose layouts that feel intentional: clear hierarchy, consistent spacing, optical alignment, harmonious proportions. ## When to Use This Mode - "Something feels off" about spacing or alignment - Grids feel monotonous or misaligned - Visual hierarchy is unclear (no primary action, competing elements) - Elements don't snap to a scale — random 13px gaps, mixed units - Nested rounded surfaces look wrong - Need to bring a feature back in line with the design system ## Preparation 1. Identify the spacing scale in use (Tailwind default, custom tokens, etc.). 2. Identify the typographic scale and line-height conventions. 3. Note the grid / breakpoints. 4. Read `../cami-design/references/spacing-layout.md` for the deep material. ## Review Dimensions Work through these systematically. For each, use the `Before | After | Why` table format. ### Spacing & Rhythm - All gaps use the scale — no arbitrary values - Consistent rhythm between repeated elements - Negative space is intentional, not leftover ### Alignment - Pixel-perfect to grid - Optical alignment over geometric where visual weight differs (icons, play triangles, asymmetric shapes) - Elements on the same axis share a baseline ### Sizing & Proportions - Components sized