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.2
Display Large
Font size: 68px
Display
Font size: 52px
Headline 1
Font size: 42px
Headline 2
Font size: 32px
Headline 3
Font size: 24px
Headline 4
Font size: 18px
Headline 5
Font size: 16px
Headline 6
Font size: 14px
Text
Font: Inter Regular | Color: Primary | Weight: 400 | Line-height: 1.2
Text 1
Font size: 18px
Text 2
Font size: 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
Platforms
