Colors

Site-wide Palette

White ($white)
#ffffff
Gray 05 ($gray-05)
#f2f2f2
Gray 20 ($gray-20)
#cccccc
Gray 40 ($gray-40)
#999999
Gray 60 ($gray-60)
#666666
Gray 80 ($gray-80)
#333333
Black ($black)
#000000
Light Red ($light-red)
#ffe6e8
Red ($red)
#ff4f5e
Dark Red ($dark-red)
#cc0011
Lightest Blue ($lightest-blue)
#e7e7fc
Light Blue ($light-blue)
#b7b9fa
Blue ($blue)
#595cf3
Dark Blue ($dark-blue)
#0d10bf

Privacy Not Included Palette

PNI Lilac ($pni-lilac)
#d3d5fc
PNI Blue ($pni-blue)
#1808f2
PNI Blue Purple ($pni-blue-purple)
#4a17d4
PNI Purple ($pni-purple)
#7f28b7
PNI Purple Pink ($pni-purple-pink)
#b0379b
PNI Pink ($pni-pink)
#e4487d
PNI Gradient ($pni-gradient)
linear-gradient(to right, #1808f2 0%, #e4487d 100%)

Festival Palette

Festival Dark Blue ($festival-dark-blue)
#0e11bf
Festival Purple ($festival-purple)
#8f14fb
Festival Gradient ($festival-gradient)
linear-gradient(120deg, #0e11bf 0%, #8f14fb 100%)

Spacing

Name Units Example
0 0px
px 1px
1 4px (0.25rem)
2 8px (0.5rem)
3 12px (0.75rem)
4 16px (1rem)
5 24px (1.5rem)
6 32px (2rem)
7 48px (3rem)

Grid

Breakpoints

Extra small Small Medium Large Extra large
Breakpoint None 576px 768px 992px 1200px
Max container width None (auto) 540px 720px 960px 1140px
Design alias mobile (potrait) mobile (landscape) tablet desktop wide desktop

Columns

1

1

1

1

1

1

1

1

1

1

1

1

2

2

2

2

2

2

3

3

3

3

4

4

4

6

6

5

7

4

8

3

9

2

10

1

11

12

Typography

Headers

.h1-heading

.h2-heading

.h3-heading

.h4-heading

.h5-heading
.h6-heading

.h1-heading with link

.h2-heading with link

.h3-heading with link

.h4-heading with link

.h5-heading with link
.h6-heading with link

Paragraphs

.body-large with bold and strong and italic text

.body with bold and strong and italic text

.body-small with bold and strong and italic text

.quote

.type-accent

.body-large with link

.body with link

.body-small with link

Lists

Default <ol> style

  1. I'm a list item <li> style
  2. I'm a list item <li> style with a link

Default <ul> style

  • I'm a list item <li> style
  • I'm a list item <li> style with a link

Anchors

.cta-link

Dark Theme Headers

.h1-heading

.h2-heading

.h3-heading

.h4-heading

.h5-heading
.h6-heading

.h1-heading with link

.h2-heading with link

.h3-heading with link

.h4-heading with link

.h5-heading with link
.h6-heading with link

Dark Theme Paragraphs

.body-large with bold and strong and italic text

.body with bold and strong and italic text

.body-small with bold and strong and italic text

.quote

.type-accent

.body with link

.body-large with link

.body-small with link

Dark Theme Lists

Default <ol> style

  1. I'm a list item <li> style
  2. I'm a list item <li> style with a link

Default <ul> style

  • I'm a list item <li> style
  • I'm a list item <li> style with a link

Dark Theme Anchors

.cta-link
link

Buttons

Default

.btn-primary on <a> disabled .btn-primary on <a>
.btn-secondary on <a> disabled .btn-secondary on <a>
.btn-secondary on <a> with external link disabled .btn-secondary on <a> with external link
.btn-pop on <a> disabled .btn-pop on <a>

Dark Theme

.btn-primary on <a> disabled .btn-primary on <a>
.btn-secondary on <a> disabled .btn-secondary on <a>
.btn-secondary on <a> with external link disabled .btn-secondary on <a> with external link
.btn-pop on <a> disabled .btn-pop on <a>

Share Button Group

Full version

Full Version & Stacked

Full Version & Stacked

Mini Version & Stacked

Regular

Large

Regular

Large

Icons

Streamblocks

Callout Block

This is a callout block, used on Article pages.

paragraph

Styleguide