Layout & Typography
Typography scale, grid system, hero sections, spacing utilities, and image handling.
Typography Scale
Heading 1 — text-5xl
Heading 2 — text-4xl
Heading 3 — text-3xl
Heading 4 — text-2xl
Heading 5 — text-xl
Heading 6 — text-lg
Body text — text-base (default)
Small text — text-sm
Extra small text — text-xs
Grid System
2 Columns
Column 1
Column 2
3 Columns
Column 1
Column 2
Column 3
4 Columns
Column 1
Column 2
Column 3
Column 4
Jumbo / Hero Sections
Default Jumbo
Welcome to the Platform
A hero section for announcements and landing pages
Primary Jumbo
Get Started Today
With a branded background color for emphasis
Spacing Utilities
Padding
p-2
p-4
p-6
Margin Bottom
mb-2
mb-4
mb-6
Last element
Directional Padding
px-4 py-2
px-6 py-3
Image Component
Object-Fit Modes (wide image in square container)
cover (crops, no distortion)
contain (letterbox)
fill (stretches)
Aspect Ratios (tall image)
aspect-square
aspect-video (16:9)
contain + aspect-video