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


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


Buttons


Default


Dark Theme


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