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
Red 05
#ffe6e8
Red 10
#ffb4ba
Red 20
#ff818c
Red 40
#ff4f5e
Red 60
#e62434
Red 80
#cc0011
Red 100
#9a000e
Blue 05
#e7e7fc
Blue 10
#d3d5fc
Blue 20
#b7b9fa
Blue 40
#595cf3
Blue 60
#3032d9
Blue 80
#0d10bf
Blue 100
#0003a6
Cyan 05
#e6ffff
Cyan 10
#acffff
Cyan 20
#73ffff
Cyan 40
#00ffff
Cyan 60
#00c9c9
Cyan 80
#009494
Cyan 100
#005e5e
Green 05
#d8fff0
Green 10
#acffe0
Green 20
#80ffce
Green 40
#54ffbd
Green 60
#2cc98e
Green 80
#109462
Green 100
#005e3a
Yellow 05
#fffcd9
Yellow 10
#fff9ab
Yellow 20
#fff67d
Yellow 40
#fff44f
Yellow 60
#e5d92f
Yellow 80
#ccbf15
Yellow 100
#b2a600
Purple 05
#ecd8fe
Purple 10
#deb8fe
Purple 20
#cd97fd
Purple 40
#8f14fb
Purple 60
#760bd4
Purple 80
#5e05ac
Purple 100
#470085
Pink 05
#ecd8fe
Pink 10
#deb8fe
Pink 20
#cd97fd
Pink 40
#8f14fb
Pink 60
#760bd4
Pink 80
#5e05ac
Pink 100
#470085

Privacy Not Included Palette


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 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


.tw-h1-heading

.tw-h2-heading

.tw-h3-heading

.tw-h4-heading

.tw-h5-heading
.tw-h6-heading

.tw-h1-heading with link

.tw-h2-heading with link

.tw-h3-heading with link

.tw-h4-heading with link

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

Paragraphs


.tw-body-large with bold and strong and italic text

.tw-body with bold and strong and italic text

.tw-body-small with bold and strong and italic text

.tw-quote

.tw-type-accent


.tw-body-large with link

.tw-body with link

.tw-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


.tw-h1-heading

.tw-h2-heading

.tw-h3-heading

.tw-h4-heading

.tw-h5-heading
.tw-h6-heading

.tw-h1-heading with link

.tw-h2-heading with link

.tw-h3-heading with link

.tw-h4-heading with link

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

Dark Theme Paragraphs


.tw-body-large with bold and strong and italic text

.tw-body with bold and strong and italic text

.tw-body-small with bold and strong and italic text

.tw-quote

.tw-type-accent


.tw-body with link

.tw-body-large with link

.tw-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 (Tailwind)


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