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%)
PNI CTA Gradient
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 | |
| rem | 16px (1rem) | |
| 1 | 2px (0.125rem) | |
| 2 | 4px (0.5rem) | |
| 3 | 6px (0.375rem) | |
| 4 | 8px (0.5rem) | |
| 5 | 10px (0.625rem) | |
| 6 | 12px (0.75rem) | |
| 7 | 14px (0.875rem) | |
| 8 | 16px (1rem) | |
| 9 | 18px (1.125rem) | |
| 10 | 20px (1.25rem) | |
| 12 | 24px (1.5rem) | |
| 14 | 28px (1.75rem) | |
| 16 | 32px (2rem) | |
| 18 | 36px (2.25rem) | |
| 20 | 40px (2.5rem) | |
| 22 | 44px (2.75rem) | |
| 24 | 48px (3rem) | |
| 28 | 56px (3.5rem) | |
| 32 | 64px (4rem) | |
| 40 | 80px (5rem) | |
| 48 | 96px (6rem) | |
| 56 | 112px (7rem) | |
| 64 | 128px (8rem) | |
| 72 | 144px (9rem) | |
| 80 | 160px (10rem) | |
| 88 | 176px (11rem) | |
| 96 | 192px (12rem) | |
| 104 | 208px (13rem) | |
| 112 | 224px (14rem) | |
| 120 | 240px (15rem) | |
| 128 | 256px (16rem) | |
| 144 | 288px (18rem) | |
| 160 | 320px (20rem) | |
| 192 | 384px (24rem) |
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
Buyer's Guide
The compnent will fill 100% of the parent width. Control the size through the parent.
There is a variation for "large" use cases with more padding and the image does not overlap. However, the large variant does not change the component size itself.
Normal variant
We all love the web. Join Mozilla in defending it.
We are proudly non-profit, non-corporate and non-compromised.
Without an icon should also work.
We are proudly non-profit, non-corporate and non-compromised.
Large variant
We all love the web. Join Mozilla in defending it.
We are proudly non-profit, non-corporate and non-compromised.
Without an icon should also work.
We are proudly non-profit, non-corporate and non-compromised.
Streamblocks
Callout Block
This is a callout block, used on Article pages.
paragraph
Styleguide