Tyography
Buttons
Spacing
Icons
Cards
Forms
Navigation
Footer
Animations
Shadows
Border Radius
Border Radius
Heading 1 (H1).
Protecting Concrete.
Preserving Investments.
Heading 2 (H2)
Concrete Preservation Starts Here
Heading 3 (H3)
Expansion Joint Sealing
Heading 4 (H4)
Residential Properties
Heading 5 (H5)
Long-Term Protection
Heading 6 (H6)
Joint Cleaning
Body Large
Sealico helps homeowners, businesses,
and municipalities protect concrete before
damage becomes expensive.
Body
Sealico helps homeowners, businesses,
and municipalities protect concrete before
damage becomes expensive.
Spacing System
XS — 8px
Use for:
Icon next to text
Checkbox spacing
Tiny labels
S — 16px
Use for:
Text under a heading
List items
Buttons next to each other
M — 24px
Use for:
Padding inside cards
Between paragraphs
Between images and captions
L — 32px
Use for:
Space after H2 headings
Medium-sized content blocks
XL — 48px
Use for:
Between groups of content
2XL — 64px
Use between major website sections.
Example:
Hero
↓
Process
↓
Projects
↓
Testimonials
L — 32px
Use for:
Space after H2 headings
Medium-sized content blocks
XL — 48px
Use for:
Between groups of content
2XL — 64px
Use between major website sections.
Example:
Hero
↓
Process
↓
Projects
↓
Testimonials
Small Text
Sealico helps homeowners, businesses,
and municipalities protect concrete before
damage becomes expensive.
3XL — 96px
Use when you want the page to breathe.
Luxury brands love this.
More empty space = more confidence.
4XL — 128px
Reserved for:
Hero sections
Major transitions
Premium layouts
Don't overuse it.
Layout Grid
Every page
↓
Sections
↓
Containers
↓
Content
Every page
↓
Sections
↓
Containers
↓
Content
Content Width - 1280px
Desktop
80px
Tablet
48px
Mobile
24px
Content Width 1280px
Desktop Padding 80px
Tablet Padding 48px
Mobile Padding 24px
Section Spacing 96px
Large Section Spacing 128px
Everything aligns to the grid.
Whitespace is intentional.
Every section has one focal point.