Web54 Design System
A comprehensive style guide showcasing our Pacific Northwest-inspired design language.
Color Palette
Evergreen Greens
Primary brand colors inspired by PNW forests
Dark #0F2B1C
Medium #1A4D3A
Light #2D6B4F
Coastal Blues
Secondary colors reflecting PNW waters
Dark #1E3A5F
Medium #2B5A87
Light #3B82B5
Sunset Accents
Warm accents for highlights and CTAs
Amber #F59E0B
Rose #EC4899
Violet #8B5CF6
Typography
Heading 1
Font: Inter Bold, 48px / 3rem
Heading 2
Font: Inter Bold, 36px / 2.25rem
Heading 3
Font: Inter Semibold, 24px / 1.5rem
Large Body Text
Font: Inter Regular, 18px / 1.125rem
Regular Body Text
Font: Inter Regular, 16px / 1rem
Small Text
Font: Inter Regular, 14px / 0.875rem
UI Components
Buttons
Various button styles and states
Badges
Status indicators and labels
Default
Secondary
Outline
Error
Card Example
Standard card component with header and content
This is an example of our card component with proper spacing, shadows, and responsive design.
Animations
Smooth transitions and micro-interactions
Spacing System
8px Base System
Consistent spacing using 8px increments
8px / 0.5rem
16px / 1rem
32px / 2rem
48px / 3rem
64px / 4rem
96px / 6rem
128px / 8rem
192px / 12rem