Design System
Here is an overview of all styles and components for Samson Pumps
Headings
Font: Inter SemiBold | Color: Primary | Weight: 600 | Line-height: 1.44
Display Large
Font-size: clamp(2rem, 0.5000rem + 4.0000vw, 4.25rem)
Display
Font-size: clamp(2rem, 0.82rem + 2.43vw, 3.25rem)
Headline 1
Font-size: clamp(2rem, 1.5867rem + 1.1022vw, 2.62rem)
Headline 2
Font-size: clamp(1.5rem, 1.1667rem + 0.8889vw, 2rem)
Headline 3
Font-size: clamp(1.12rem, 0.8667rem + 0.6756vw, 1.5rem)
Headline 4
Font-size: clamp(1rem, 0.9200rem + 0.2133vw, 1.12rem)
Headline 5
Font-size: clamp(0.87rem, 0.7833rem + 0.2311vw, 1rem)
Headline 6
Font-size: clamp(0.75rem, 0.6700rem + 0.2133vw, 0.87rem)
Text
Font: Inter Regular | Color: Primary | Weight: 400 | Line-height: 1.2
Text 1
Font-size: 18px | calc(var(–font-body-scale) * 0.9rem)
Text 2
Font-size: clamp(14px, 0.875rem + ((1vw – 3.2px) * 0.2), 16px)
Text 3
Font-size: 14px
Text 4
Font-size: 12px
Text 5
Font-size: 10px
Theme colors
Primary | Secondary | Custom
Primary color
The primary color is used for text and headings
Primary
#111111
Secondary colors
Secondary colors are used as supporting colors in backgrounds, text colors, separators and across all the interactive elements such as CTA, Links, Inputs, Active states etc..
Contrast
#0f6ab1
Secondary
#8ed8f8
Contrast Accent
#32645a
Tertiary
#beb4aa
Base
#ffffff
Primary Accent
#50aa78
Custom colors
These custom colors are used to expand the possibilities of the Secondary colors
Transparent Tertiary
#bfb5aa30
Transparent Contrast
#0e6ab033
Transparent
#00000000
Samson Pumps | Background grey
#f2f2f2
Icons
Font: Inter Regular | Color: Base | Weight: 400 | Line-height: 1.2
Text 1
Font-size: 18px
Icons
Font: Inter | Color: Primary/Secondary | Weight: 400 | Line-height: 1.2
icons are on the way!
Font-size: 10px Color: #8ed8f8 | Transition: all .2s ease-in-out:
Platforms
