ROAR Media Styleguide
Browse the information below to see ROAR Media's styleguide. You'll find colors, typography, icons, buttons, and more.
Colors
Primary Color
Secondary Colors
Neutral Colors
Typography
Rich Text
Heading H1 - Aa Bb Cc Dd
Font: Plus Jakarta Display | Weight: 700 - Bold | Size: 48 px | Height 1.292em | Color: #1f2559 | Letter Spacing: -0.02em
Heading H2 - Aa Bb Cc Dd
Font: Plus Jakarta Display | Weight: 700 - Bold | Size: 38px | Height: 1.292em | Color: #1f2559 | Letter Spacing: -0.02em
Heading H3 - Aa Bb Cc Dd
Font: Plus Jakarta Display | Weight: 500 - Medium | Size: 24px | Height: 1.375em | Color: #1f2559 | Letter Spacing: -0.02em
Heading H4 - Aa Bb Cc Dd
Font: Plus Jakarta Display | Weight: 500 - Medium | Size: 20px | Height: 1.400em | Color: #1f2559 | Letter Spacing: -0.02em
Heading H5 - Aa Bb Cc Dd
Font: Plus Jakarta Display | Weight: 500 - Medium | Size: 18px | Height: 1.333em | Color: #1f2559 | Letter Spacing: -0.02em
Heading H6 - Aa Bb Cc Dd
Font: Plus Jakarta Display | Weight: 500 - Medium | Size: 16px | Height: 1.125em | Color: #1f2559 | Letter Spacing: -0.02em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Font: Plus Jakarta Display | Weight: 400 - Normal | Size: 16px | Height: 1.688em | Color: #62668a | Letter Spacing: -0.01em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Font: Plus Jakarta Display | Weight: 400 - Normal | Size: 20px | Height: 1.700em | Color: #62668a | Letter Spacing: -0.01em
Bold - Lorem ipsum dolor sit amet
Italic - Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id ullamcorper nunc diam. Amet a ac ut pharetra. Amet, accumsan, nisl in elementum volutpat integer. Cursus est elementum maecenas ut.
- Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Lectus quam.
- Placerat vestibulum lectus mauris ultrices eros in cursus.
- Convallis aenean et tortor at. Convallis tellus id interdum velit laoreet idon.
- Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Lectus quam.
- Placerat vestibulum lectus mauris ultrices eros in cursus.
- Convallis aenean et tortor at. Convallis tellus id interdum velit laoreet idon.
Icons
