Templates
Page-level objects that place components into a layout
Templates are page-level objects that place components into a layout and articulate the design's underlying content structure. They provide the skeletal framework that organisms and molecules are placed into to form complete page designs.
Templates Coming Soon
This section will showcase page templates and layout patterns that combine organisms, molecules, and atoms into complete page structures.
Planned Templates
Homepage
Hero + services + resources
Content Page
Header + content + sidebar
Contact Page
Header + form + info
Services Grid
Header + grid + footer
Article Page
Header + article + related
Landing Page
Hero + features + CTA
Template Design Principles
Layout Structure
- • Define content hierarchy
- • Establish grid systems
- • Set spacing relationships
- • Plan responsive behavior
Content Strategy
- • Content-first approach
- • Flexible content areas
- • Consistent navigation patterns
- • Scalable layout systems
Common Template Layouts
Homepage Template
Stacked organisms with full-width layout
Content Page Template
Two-column layout with sidebar
Landing Page Template
Conversion-focused layout
Grid System Foundation
12-Column Grid
All templates are built on a flexible 12-column grid system that adapts to different screen sizes.