4.8 KiB
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.