Style guide
Typography
Global typography
h1 - Lorem ipsum dolor sit amet, consectetur.
h2 - Lorem ipsum dolor sit amet, consectetur.
h3 - Lorem ipsum dolor sit amet, consectetur.
h4 - Lorem ipsum dolor sit amet, consectetur.
h5 - Lorem ipsum dolor sit amet, consectetur.
h6 - Lorem ipsum dolor sit amet, consectetur.
All Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem justo, consectetur vitae iaculis a, dictum ac turpis. Vivamus condimentum, dolor quis hendrerit vehicula, leo dolor volutpat felis.
- List item
- List item
- List item
- Ordered list item
- Ordered list item
- Ordered list item
All Quotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem justo, consectetur vitae iaculis a, dictum ac turpis. Vivamus condimentum, dolor quis hendrerit vehicula, leo dolor volutpat felis.
Heading classes
- heading-xl Desktop: 4.209rem, Mobile: 2.5rem
- heading-lg Desktop: 3.175rem, Mobile: 2.25rem
- heading-md Desktop: 2.369rem, Mobile: 2rem
- heading-sm Desktop: 1.777rem, Mobile: 1.5rem
- heading-xs Desktop: 1.333rem, Mobile: 1.25rem
- heading-xxs Desktop: 1rem, Mobile: 1rem
- overline
- subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem justo, consectetur vitae iaculis a, dictum ac turpis. Vivamus condimentum, dolor quis hendrerit vehicula, leo dolor volutpat felis.
Brand
- Name:accent-1
- Hexcode:#101826
- Name:primary
- Hexcode:#992b2b
- Name:primary-dark
- Hexcode:#802424
- Name:secondary
- Hexcode:#25334c
- Name:secondary-dark
- Hexcode:#161e2d
Brand utility
- Name:danger
- Hexcode:#9e1010
- Name:success
- Hexcode:#0a814f
- Name:warning
- Hexcode:#fa9d2a
Site global
- Name:text-dark
- Hexcode:#333
- Name:text-light
- Hexcode:#fcfcfc
Social media
- Name:facebook
- Hexcode:#3b5998
- Name:instagram
- Hexcode:#517fa3
- Name:linked-in
- Hexcode:#0072b1
- Name:pinterest
- Hexcode:#cb2027
- Name:tiktok
- Hexcode:#fe2c55
- Name:twitter
- Hexcode:#00aced
- Name:youtube
- Hexcode:#ff0000
Grays
- Name:gray-100
- Hexcode:#e0e0e0
- Name:gray-200
- Hexcode:#cecece
- Name:gray-300
- Hexcode:#bcbcbc
- Name:gray-400
- Hexcode:#a9a9a9
- Name:gray-500
- Hexcode:#979797
- Name:gray-600
- Hexcode:#858585
- Name:gray-700
- Hexcode:#737373
- Name:gray-800
- Hexcode:#616161
- Name:gray-900
- Hexcode:#4f4f4f
Transparencies - Black
- Name:black-05
- RGBA:0, 0, 0, 0.05
- Name:black-10
- RGBA:0, 0, 0, 0.1
- Name:black-15
- RGBA:0, 0, 0, 0.15
- Name:black-20
- RGBA:0, 0, 0, 0.2
- Name:black-25
- RGBA:0, 0, 0, 0.25
- Name:black-30
- RGBA:0, 0, 0, 0.3
- Name:black-35
- RGBA:0, 0, 0, 0.35
- Name:black-40
- RGBA:0, 0, 0, 0.4
- Name:black-45
- RGBA:0, 0, 0, 0.45
- Name:black-50
- RGBA:0, 0, 0, 0.5
- Name:black-55
- RGBA:0, 0, 0, 0.55
- Name:black-60
- RGBA:0, 0, 0, 0.6
- Name:black-65
- RGBA:0, 0, 0, 0.65
- Name:black-70
- RGBA:0, 0, 0, 0.7
- Name:black-75
- RGBA:0, 0, 0, 0.75
- Name:black-80
- RGBA:0, 0, 0, 0.8
- Name:black-85
- RGBA:0, 0, 0, 0.85
- Name:black-90
- RGBA:0, 0, 0, 0.9
- Name:black-95
- RGBA:0, 0, 0, 0.95
Transparencies - White
- Name:white-05
- RGBA:255, 255, 255, 0.05
- Name:white-10
- RGBA:255, 255, 255, 0.1
- Name:white-15
- RGBA:255, 255, 255, 0.15
- Name:white-20
- RGBA:255, 255, 255, 0.20
- Name:white-25
- RGBA:255, 255, 255, 0.25
- Name:white-30
- RGBA:255, 255, 255, 0.30
- Name:white-35
- RGBA:255, 255, 255, 0.35
- Name:white-40
- RGBA:255, 255, 255, 0.40
- Name:white-45
- RGBA:255, 255, 255, 0.45
- Name:white-50
- RGBA:255, 255, 255, 0.50
- Name:white-55
- RGBA:255, 255, 255, 0.55
- Name:white-60
- RGBA:255, 255, 255, 0.60
- Name:white-65
- RGBA:255, 255, 255, 0.65
- Name:white-70
- RGBA:255, 255, 255, 0.70
- Name:white-75
- RGBA:255, 255, 255, 0.75
- Name:white-80
- RGBA:255, 255, 255, 0.80
- Name:white-85
- RGBA:255, 255, 255, 0.85
- Name:white-90
- RGBA:255, 255, 255, 0.90
- Name:white-95
- RGBA:255, 255, 255, 0.95
Buttons
Solid
Outline
Text utilities
Sizing
- text-size-xl
Font-size: 1.5 rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem justo, consectetur vitae iaculis a, dictum ac turpis. Vivamus condimentum, dolor quis hendrerit vehicula, leo dolor volutpat felis. - text-size-lg
Font-size: 1.25 rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem justo, consectetur vitae iaculis a, dictum ac turpis. Vivamus condimentum, dolor quis hendrerit vehicula, leo dolor volutpat felis. - text-size-md
Font-size: 1 rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem justo, consectetur vitae iaculis a, dictum ac turpis. Vivamus condimentum, dolor quis hendrerit vehicula, leo dolor volutpat felis. - text-size-sm
Font-size: 0.875 rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem justo, consectetur vitae iaculis a, dictum ac turpis. Vivamus condimentum, dolor quis hendrerit vehicula, leo dolor volutpat felis. - text-size-xs
Font-size: 0.75 rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem justo, consectetur vitae iaculis a, dictum ac turpis. Vivamus condimentum, dolor quis hendrerit vehicula, leo dolor volutpat felis.
Alignment
- text-align-start
- text-align-left
- text-align-center
- text-align-end
- text-align-right
Weight
- text-weight-700
- text-weight-600
- text-weight-400
Visibility
Hide
- hidden - Currently visible
- hidden-tablet-down - Currently visible
- hidden-mobile-landscape-down - Currently visible
- hidden-mobile - Currently visible
Spacing
Margin bottom
- mb-xl - 2rem
- mb-lg - 1.5rem
- mb-md - 1.25rem
- mb-sm - 1rem
- mb-xs - 0.5rem
- mb-none - 0
Custom components
Accordion
Add toggle text to override field
Add accordion content with the override field
Add toggle text to override field
Add accordion content with the override field