Skip to main content
Festa Design Studio

The Story of Festa's Layout

A System of Purpose

Layout and spacing form the core of effective design communication. Our system builds clear hierarchies and intuitive navigation to create impactful digital experiences that guide users through transformative journeys.

Every grid decision, every spacing token, every container width serves a greater purpose: to create digital spaces where social impact organizations can share their mission with clarity, dignity, and power.

Responsive Breakpoints

Festa uses Tailwind's default breakpoint system, which follows a mobile-first approach. Styles apply from the smallest screen up, and breakpoint prefixes apply styles at that size and larger.

Breakpoint Tokens

Name Min Width Usage
sm 640px Small tablets, large phones (portrait)
md 768px Tablets (portrait), small desktops
lg 1024px Desktops, tablets (landscape)
xl 1280px Large desktops, wide screens
2xl 1536px Extra-large desktops, ultrawide screens

Mobile-First Approach: Styles without a breakpoint prefix apply to all screen sizes. Use breakpoint prefixes (sm:, md:, lg:) to override styles at specific sizes and above. Example: text-sm md:text-base lg:text-lg

Universal Access Through Responsive Design

Our mobile-first approach ensures your message reaches everyone, everywhere. From smartphones in underserved communities to wide-screen displays in corporate offices, our responsive grid adapts seamlessly to serve all audiences with equal dignity and clarity.

Container Widths

Containers constrain content width and center it horizontally. Festa uses Tailwind's default max-width scale plus two custom values (7xl, wide) for specific layout needs.

Name Max Width Class Note
sm 640px max-w-sm —
md 768px max-w-md —
lg 1024px max-w-lg —
xl 1280px max-w-xl —
2xl 1536px max-w-2xl —
3xl 1728px max-w-3xl —
4xl 1920px max-w-4xl —
5xl 2048px max-w-5xl —
6xl 2304px max-w-6xl —
7xl 1280px max-w-7xl Festa custom
wide 1440px max-w-wide Festa custom

Common Container Pattern:

max-w-4xl mx-auto px-4 sm:px-6 lg:px-8

This pattern centers content (mx-auto), limits width (max-w-4xl), and adds responsive horizontal padding.

Container Patterns

These patterns are commonly used throughout Festa interfaces. They combine max-width, centering, and responsive padding.

Narrow Content

768px
max-w-3xl mx-auto px-4 sm:px-6 lg:px-8

Article text, centered lead paragraphs

Standard Content

896px
max-w-4xl mx-auto px-4 sm:px-6 lg:px-8

Default content sections, forms, documentation

Wide Content

1280px
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8

Multi-column layouts, wide sections, landing pages

Extra Wide

1440px
max-w-wide mx-auto px-4 sm:px-6 lg:px-8 xl:px-16

Hero sections, full-width features, showcase areas

Grid Column Patterns

These responsive grid patterns cover the majority of layout needs. They stack on mobile and expand to multiple columns on larger screens.

Building Visual Hierarchy

Our 12-column grid system doesn't just organize content—it creates meaning through spatial relationships. By establishing clear hierarchies and intentional white space, we help users navigate complex information while maintaining focus on what matters most: your mission and impact.

Single Column

grid grid-cols-1

Article content, forms, narrow content

Example: Blog posts, documentation, legal pages

Live Preview:

Item 1

Two Column

grid grid-cols-1 md:grid-cols-2

Feature comparison, testimonials, image + text

Example: Service features, case study cards, team members

Live Preview:

Item 1
Item 2

Three Column

grid grid-cols-1 md:grid-cols-3

Service cards, process steps, icon grids

Example: Plan/Build/Activate services, pricing tiers, benefits

Live Preview:

Item 1
Item 2
Item 3

Four Column

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4

Small cards, metrics, icon features

Example: Statistics, feature highlights, social proof

Live Preview:

Item 1
Item 2
Item 3
Item 4

Asymmetric (2:1)

grid grid-cols-1 lg:grid-cols-3

Sidebar layouts, content + metadata

Example: Article + TOC, product + specs, form + help text

Live Preview:

Main (2 cols)
Sidebar (1 col)
Item 3

Layout Grid in Action

See how Festa's layout grid system creates responsive, accessible layouts in real production contexts. These examples demonstrate mobile-first design with semantic breakpoints.

Responsive 3-Column Grid (grid-cols-1 md:grid-cols-3)

Mobile: 1 column → Tablet: 2 columns → Desktop: 3 columns with gap-6 (24px) spacing.

Security

Built-in protection and data privacy for all users

Learn more

Performance

Fast loading times and optimized experiences

Learn more

Flexibility

Adaptable components for any use case

Learn more

Content Container (max-w-4xl)

Using max-w-4xl mx-auto creates a 56rem (896px) centered content container for optimal reading length.

Creating Accessible Digital Experiences

Optimal content width (45-75 characters per line) ensures comfortable reading and prevents eye strain across all devices.

This container maintains perfect line length for body text, making long-form content comfortable to read. The max-w-4xl utility creates a 56rem width that adapts to screen size while preventing lines from becoming too long on ultra-wide displays.

This is the recommended container for blog posts, case studies, documentation pages, and any content-focused layouts where readability is paramount.

Asymmetric 2:1 Layout (grid-cols-1 lg:grid-cols-3)

Main content spans 2 columns, sidebar spans 1 column using lg:col-span-2 and lg:col-span-1.

Main Content Area

This content area spans 2 columns on large screens, providing ample space for detailed content, images, and complex layouts.

On mobile and tablet, this collapses to full width, ensuring content remains readable and accessible on smaller devices. The asymmetric ratio creates visual hierarchy and guides user attention to primary content.

Feature A

Primary feature description

Feature B

Secondary feature details

Quick Links

Resources

Sidebar content for navigation, resources, or supplementary information that complements the main content.

Full-Width Hero with Nested Container

Full-bleed background with max-w-7xl mx-auto inner container for content.

Transform Your Impact

Full-width sections create impact while the nested container maintains readable content width and proper grid alignment with the rest of your page.

Responsive Grid Gaps (gap-4 md:gap-6 lg:gap-8)

Grid gaps adapt to viewport: 16px mobile → 24px tablet → 32px desktop for proportional spacing at all sizes.

16px

24px

32px

Gap

Adapts

Best Practices

1. Start Mobile-First

Design for the smallest screen first, then use breakpoint prefixes to enhance for larger screens. This ensures content is accessible on all devices.

2. Use Semantic Containers

Choose container widths based on content type: narrow (max-w-3xl) for articles, standard (max-w-4xl) for general content, wide (max-w-7xl) for multi-column layouts.

3. Maintain Consistent Gaps

Use consistent gap values (gap-4, gap-6, gap-8) throughout your layout. Increase gaps on larger screens for better breathing room: gap-6 lg:gap-8

4. Use 12-Column Grid for Complex Layouts

For precise control over column widths, use the 12-column grid system with grid-cols-12 and col-span-* utilities.

5. Add Responsive Padding to Containers

Always include responsive horizontal padding on containers: px-4 sm:px-6 lg:px-8. This ensures content doesn't touch screen edges on mobile.

6. Test Breakpoint Transitions

Always test layouts at each breakpoint and in-between sizes. Grid columns should stack gracefully on mobile and expand smoothly on larger screens.

Trauma-Informed Grid Design

Predictable layout structures reduce cognitive stress. Our grid system prioritizes clarity and consistency, ensuring users always know where to find content and how interfaces will behave.

  • Use consistent grid patterns across similar content types (e.g., always 3 columns for service cards)
  • Avoid asymmetric layouts for critical tasks like forms or checkout flows—stick to single-column layouts
  • Increase gap sizes (gap-6, gap-8) to prevent visual crowding and overwhelm
  • Use narrow containers (max-w-3xl, max-w-4xl) for reading content to maintain optimal line length
  • Ensure smooth stacking on mobile—content should never feel cramped or force horizontal scrolling
Back to Foundations