Spacing System

Consistent spacing creates visual rhythm, improves scannability, and maintains alignment across interfaces. AHTG uses an 8px base grid system for all layout spacing.

straighten Spacing Scale

Base Unit: 8px is the fundamental spacing unit. All layout spacing uses multiples of 8px.

spacing.none 0px None Adjacent
spacing.xs 4px XS Icon ↔ label
spacing.sm 8px SM · Base Tight related
spacing.mid 12px MID Component internals
spacing.md 16px MD Form fields · gutters
spacing.lg 24px LG Form spacing · large components
spacing.xl 32px XL Section breaks
spacing.xxl 40px XXL Page margins · modals
grid_on 8px Grid Rule
All layout spacing must be a multiple of 8px — creating consistent vertical and horizontal rhythm across the entire application.
16px between fields 24px card padding 40px page margins
warning_amber 4px Exception
4px is allowed only for related content within a single component — never for layout spacing between components or sections.
icon → label gap label → value gap between sections ✗

grid_view Layout Grid System

AHTG uses a 12-column flexbox grid with 16px gutters and 16px page margins. The fixed navigation sidebar sits outside the grid. All content containers are expressed as column spans within the main content area.

Columns
12
Gutter
16px
Page Margin
16px
Nav Sidebar
Fixed — outside grid
12-Column Reference
1
2
3
4
5
6
7
8
9
10
11
12
Page Layout Hierarchy
localhost:8888 / dashboard
Dashboard
Workers
Timecards
Projects
Reports
Settings
Page Header / Toolbar 12 cols
Breadcrumb & Page Title 12 cols
Metric Card 3 cols
Metric Card 3 cols
Metric Card 3 cols
Metric Card 3 cols
Primary Content (Data Table / Chart) 8 cols
Secondary Panel 4 cols
Section A 6 cols
Section B 6 cols
16px margins left & right of content area 16px gutter between every column 8px gap between content rows
Toolbar / Header (12 cols)
Metric Cards (3 cols each)
Primary Content (8 cols)
Secondary Panel (4 cols)
Equal Sections (6 + 6 cols)
Column guides (overlay)
Header Navigation — Full Page Width Layout
localhost:8888 / projects
A
AHTG
Dashboard
Projects
Workers
Timecards
Reports
🔔
JD
GLOBAL HEADER NAV — FULL VIEWPORT WIDTH (outside 12-col grid)
Page Title & Breadcrumb
+ Add
12 cols
Metric Card 3 cols
Metric Card 3 cols
Metric Card 3 cols
Metric Card 3 cols
Filter / Tab Bar 12 cols
Full-Width Data Table / Primary Content 12 cols
Summary Panel A 6 cols
Summary Panel B 6 cols
Full width global header nav sits outside & above the 12-col grid at full viewport width 16px grid margins begin below the header for all page content 12 cols content now fills the full available width (no sidebar offset)
Common Column Span Patterns
Full Width — 12/12
Page headers, toolbars, data tables, breadcrumbs
12 cols
Two Equal — 6 + 6
Side-by-side form sections, two-panel layouts
6
6
Main + Side — 8 + 4
Content area with supporting sidebar or filter panel
8 cols
4
Three Equal — 4 + 4 + 4
Three-up card rows, form field triads
4
4
4
Four Equal — 3 + 3 + 3 + 3
Metric card rows (primary dashboard pattern)
3
3
3
3
Asymmetric — 9 + 3
Wide content with narrow supporting info column
9 cols
3

open_in_new Modal Layout

Modals come in two fixed widths — 900px (large) and 500px (small). Both use 40px internal padding on all sides and a 16px gutter between content areas. The grid inside a modal follows the same 12-column structure scaled to the modal's content width.

Large Modal
900px
Small Modal
500px
Internal Padding
40px all sides
Internal Gutter
16px
Modal Size Comparison
Large — 900px
Modal Title
×
40px
40px
40px
40px
Cancel
Save
Complex forms, multi-section content, data entry
Small — 500px
Confirm Action
×
40px
40px
40px
40px
Cancel
Confirm
Confirmations, simple forms, single-field entry
Large Modal — Internal Grid Hierarchy
localhost:8888 / workers/add
Add Worker
×
Section Header 12 cols
First Name 6
Last Name 6
Email Address 8
Role 4
Department 4
Start Date 4
Pay Rate 4
Notes / Description 12 cols
Cancel
Save Worker
40px modal internal padding (all sides) 16px gutter between form field columns 6px gap between field rows
12 cols full-width: section headers, textareas, notes 6 + 6 paired fields (name, date ranges) 8 + 4 primary field + short select 4+4+4 three short fields in a row

apps Application Examples

Form Layouts:

  • Between form fields: 16px (md)
  • Between form sections: 32px (xl)
  • Form padding: 24px (lg)
  • Label to input: 8px (sm)

Cards & Containers:

  • Card padding: 24px (lg)
  • Between cards: 16px (md)
  • Card title to content: 16px (md)

Lists & Tables:

  • List item height: 48px (minimum)
  • List item padding: 16px (md)
  • Between list items: 0px or 8px (sm)
  • Table cell padding: 16px (md)

Page Layout:

  • Page margins: 40px (xxl)
  • Section spacing: 32px (xl)
  • Content max-width: 1200-1400px