Layout Foundation

Our layout system provides a responsive grid, semantic utilities, and consistent spacing for building accessible, mobile-first interfaces.

1/8/12 Column Grid 8px Base Unit 48px Touch Targets

Responsive Grid System

Our grid adapts from 1 column on mobile to 8 columns on tablet to 12 columns on desktop.

Mobile Grid

Columns

Breakpoint

< 768px

Gutter

24px (1.5rem)

Margin

16px (1rem)

Tablet Grid

Columns

Breakpoint

768px - 1023px

Gutter

24px (1.5rem)

Margin

24px (1.5rem)

Desktop Grid

Columns

Breakpoint

≥ 1024px

Gutter

32px (2rem)

Margin

32px (2rem)

Spacing Scale

Based on an 8px grid system for consistent, harmonious spacing throughout the application.

0

0px

0.5

2px

1

4px

1.5

6px

2

8px

2.5

10px

3

12px

4

16px

5

20px

6

24px

8

32px

10

40px

12

48px

16

64px

20

80px

24

96px

Layout Utilities

Semantic utility classes for consistent app structure and layout patterns.


                                .layout-app

Full-height app container with background color


                                .layout-shell

Flex column container for app structure


                                .layout-app-bar

Fixed-height header with padding


                                .layout-body

Flexible main content area


                                .layout-body-container

Centered content with max-width


                                .layout-footer

Footer with border and padding


                                .grid-body

Responsive grid (1/8/12 columns)


                                .col-span-full

Full-width column across all breakpoints


                                .col-span-main

Main content column (6/8 or 8/12)


                                .col-span-aside

Sidebar column (2/8 or 4/12)

Responsive Breakpoints

xs

360px

sm

480px

md

768px

lg

1024px

xl

1280px

2xl

1536px

Mobile-First: All styles apply to mobile by default. Use breakpoint prefixes (md:, lg:, etc.) to apply styles at larger screen sizes.

Grid Layout Examples

Full Width Layout

Full width content spans all columns

Main Content + Sidebar

Main content area (6/8 or 8/12 columns)

Sidebar (2/8 or 4/12 columns)

Three Column Layout

Column 1

Column 2

Column 3

Four Column Layout

Column 1

Column 2

Column 3

Column 4

Touch Target Sizes

All interactive elements meet WCAG 2.1 AA requirements with minimum 48x48dp touch targets for accessibility and ease of use.

Minimum Touch Target (48x48px)

Icon Buttons

Layout Guidelines

✓

Do: Use Semantic Utilities

Use layout-app, layout-shell, and grid-body utilities for consistent structure.

<div class="layout-app">
  <div class="layout-shell">
    <main class="layout-body">
      <div class="grid-body">
        ...
      </div>
    </main>
  </div>
</div>

✓

Do: Follow 8px Grid

Use spacing tokens (4, 6, 8, 12, 16, 24, etc.) for consistent rhythm.

<div class="p-4 mb-6">
  <h2 class="mb-4">Title</h2>
  <p class="mb-3">Content</p>
</div>

Don't: Use Arbitrary Values

Avoid custom spacing values that don't align with the 8px grid system.

Don't: Ignore Touch Targets

All interactive elements must meet the 48x48px minimum for accessibility.