Templates
2 templates
Swiss Grid
Pre-composed page layouts and tools that combine functionally-organized components. Templates demonstrate Swiss Grid Design principles and provide opinionated structure for common patterns.
What are Templates?
Templates compose functionally-organized components into complete page layouts. They provide opinionated structure and best practices for common page patterns, combining components from across all categories.
- •Compose multiple patterns and components into coherent page structures
- •Enforce consistent spacing and layout principles
- •Provide sensible defaults while allowing customization
- •Demonstrate Swiss Grid Design principles in practice
Swiss Grid Design Principles
Our templates are built on foundational design principles that create clean, structured, and functional layouts.
Structured Spacing
48-96px between major sections for clear visual hierarchy
Typography Hierarchy
36-48px titles, 18px subtitles, consistent ratios
Grid-Based Alignment
12-column Tailwind grid with consistent content widths
Generous Whitespace
Breathing room for content to shine