Style guide

Typography
Color
Buttons
Utilities
Custom components

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
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item

All Links

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
  • 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 accordion content with the override field

Add accordion content with the override field