agent-skills/sn-infographic/references/layouts/hard-alignment.md

hard-alignment

All element edges are perfectly aligned, creating razor-sharp order.

Structure

• Every element edge aligns to a shared grid line
• No floating or loosely placed elements
• Alignment is the primary design principle
• Creates a sense of precision and control

Best For

• Technical or engineering documentation
• Data-heavy reference materials
• Corporate or institutional content
• Designs where precision signals credibility

Visual Elements

• Strict edge alignment across all elements
• Consistent spacing multiples (e.g., 8px grid)
• Minimal decoration; alignment is the aesthetic
• Optional subtle grid lines as background

Text Placement

• All text aligned to the same grid
• Consistent left or center alignment
• No orphaned or misaligned text elements

Recommended Pairings

• technical-schematic: Engineering precision
• ui-wireframe: Interface alignment grids
• corporate-memphis: Swiss-style strict alignment