Sealico Design System
Logo
Color System
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.
PRIMARY Sealico Emerald
Main Buttons, Links, Icons, Highlights
■■■■■■
SECONDARY Graphite
Hover effects, Background sections, supporting buttons
■■■■■■
ACCENT Electric Cyan
Use very little.
■■■■■■
BACKGROUND Porcelain
The color people see most.
■■■■■■
SURFACE Cloud
Slightly different background.
■■■■■■
TEXT PRIMARY Carbon
the main reading color.
■■■■■■
TEXT SECONDARY
Lighter than your main text.
■■■■■■
BORDER
Every line on the website should use this.
■■■■■■
SUCCESS
Used when something works.
■■■■■■
WARNING
Used when something needs attention.
■■■■■■
ERROR
Only used when something is wrong.
■■■■■■
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.