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
Headers with links
.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
Paragraphs with links
.tw-body-large with link
.tw-body with link
.tw-body-small with link
Lists
Default <ol> style
- I'm a list item
<li> style - 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
Dark Theme Headers with links
.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
Dark Theme Paragraphs with links
Dark Theme Lists
Default <ol> style
- I'm a list item
<li> style - 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
Dropdown Field
Default
Regular
Large
Dark Theme
Regular
Large
Icons
Streamblocks
Callout Block
This is a callout block, used on Article pages.
paragraph
Styleguide