This skill guides the creation of spatial systems that balance mathematical precision with artistic composition, ensuring interfaces are both systematically organized and visually compelling.

The user provides a layout challenge: building spacing systems, establishing grids, improving visual hierarchy, fixing composition issues, or implementing responsive layouts. They may include design system constraints, aesthetic goals, or specific spatial problems to solve.

## Spatial Design Thinking

Before arranging elements, understand the compositional strategy:

- **Content Priority**: What's most important? What should users see first, second, third? Hierarchy starts here.
- **Visual Weight Distribution**: Where should the eye go? Balanced or intentionally unbalanced? Symmetrical or asymmetric?
- **Density vs Breathing Room**: Controlled density (information-rich) or generous space (editorial)? Match context and audience.
- **Reading Patterns**: Z-pattern (scanning), F-pattern (text-heavy), focal point (marketing), free-form (experimental)?

**CRITICAL**: Space is not empty - it's an active design element. Negative space gives positive elements room to breathe and meaning.

Then build layout systems that are:
- Systematically consistent with clear spacing rules
- Visually balanced with intentional hierarchy
- Responsive and adaptive across viewports
- Compositionally strong with clear focal points

## Classic Composition Principles

### Visual Hierarchy Fundamentals

[TO BE DEVELOPED: Size, weight, color, position, contrast as hierarchy tools, Gestalt principles (proximity, similarity, closure)]

### Balance & Symmetry

[TO BE DEVELOPED: Symmetrical vs asymmetrical balance, visual weight calculation, creating tension and resolution]

### The Rule of Thirds & Golden Ratio

[TO BE DEVELOPED: Classic composition grids, golden ratio applications, when to follow vs break rules]

### Focal Points & Eye Movement

[TO BE DEVELOPED: Creating focal points, directing eye flow, Z/F/circular patterns, intentional disruption]

## Spacing Systems

### Spacing Scales

[TO BE DEVELOPED: 4pt/8pt systems, modular scales, mathematical progressions (linear, exponential, Fibonacci)]

### Vertical Rhythm

[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, spacing ratios, rhythm across components]

### Micro vs Macro Space

[TO BE DEVELOPED: Component-internal spacing, between-component spacing, section spacing, page-level breathing room]

### Spacing Token Architecture

[TO BE DEVELOPED: Primitive spacing tokens, semantic spacing (component gaps, section padding), contextual spacing]

## Grid Systems & Layout Patterns

### Grid Fundamentals

[TO BE DEVELOPED: Column grids, modular grids, baseline grids, grid anatomy (columns, gutters, margins)]

### Classic Layout Patterns

[TO BE DEVELOPED: Sidebar layouts, holy grail, card grids, masonry, magazine layouts, asymmetric layouts]

### Modern CSS Layout

[TO BE DEVELOPED: CSS Grid (explicit placement, auto-placement, grid areas), Flexbox (direction, alignment, distribution), Container Queries]

## Creating Visual Hierarchy

### Hierarchy Through Scale

[TO BE DEVELOPED: Size relationships, proportional scaling, meaningful jumps vs gradual progression]

### Hierarchy Through Weight & Color

[TO BE DEVELOPED: Visual weight calculation, using color for emphasis, combining multiple hierarchy tools]

### Hierarchy Through Position

[TO BE DEVELOPED: Placement importance, reading order, visual flow direction, breaking the grid for emphasis]

## Responsive Spatial Design

### Breakpoint Strategy

[TO BE DEVELOPED: Mobile-first vs desktop-first, breakpoint values, in-between states, content-driven breakpoints]

### Layout Adaptation

[TO BE DEVELOPED: Reflow patterns, navigation transformation, content prioritization, progressive disclosure]

### Fluid Spacing & Layout

[TO BE DEVELOPED: clamp() for spacing, viewport units, fluid grids, container-relative spacing]

## Depth & Layering

### Creating Depth

[TO BE DEVELOPED: Layering, shadows, elevation systems, z-index scales, parallax effects]

### Overlap & Intersection

[TO BE DEVELOPED: Intentional overlap, breaking containers, elements that cross boundaries]

---

**IMPORTANT**: Systematic spacing doesn't mean boring. Use the system as a foundation, then break it intentionally for impact.

**NEVER**:
- Use arbitrary spacing values outside your scale (unless intentionally breaking the system)
- Create layouts that ignore natural reading patterns without good reason
- Forget that white space is a design element, not wasted space
- Make all spacing equal (variety creates hierarchy)
- Build responsive layouts that only work at breakpoint edges
- Create hierarchy through size alone (combine multiple tools)

Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally.