Mission Zero

Website Style Kit

This page outlines the current colours, styles and design standards for the Mission Zero website.

Colours

Pick a colour to see it's variants

Primary colour variants

Hover

Light

Ultra Light

Medium

Dark

Ultra Dark

trans-90

trans-80

trans-60

trans-40

trans-20

trans-10

Complimentary

Secondary colour variants

Hover

Light

Ultra Light

Medium

Dark

Ultra Dark

trans-90

trans-80

trans-60

trans-40

trans-20

trans-10

Complimentary

Accent colour variants

Hover

Light

Ultra Light

Medium

Dark

Ultra Dark

trans-90

trans-80

trans-60

trans-40

trans-20

trans-10

Complimentary

Base colour variants

Hover

Light

Ultra Light

Medium

Dark

Ultra Dark

trans-90

trans-80

trans-60

trans-40

trans-20

trans-10

Complimentary

Shade colour variants

Light

Ultra Light

Medium

Dark

Ultra Dark

trans-90

trans-80

trans-60

trans-40

trans-20

trans-10

Buttons

Solid and outline buttons are available across all color sets including black and white.

BUTTONS ON LIGHT BACKGROUND

PrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineBaseBase Outline

BUTTONS ON DARK BACKGROUND

PrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineWhiteWhite Outline

Button scale

Button XS

btn--primary / btn--xs

Button S

btn--primary / btn--s

Button M

btn--primary / btn--m

Button L

btn--primary / btn--l

Button XL

btn--primary / btn--xl

Button XXL

btn--primary / btn--xxl

Typography

Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.

Heading h1

Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Bulleted list item
Bulleted list item

Numbered list item
Numbered list item

A blockquote style for quoted text

Heading h2

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Heading h3

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Heading h4

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Heading h5

Text–s -> Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Heading h6

Text–xs -> Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading 3 Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)

Heading 5 Regular

Heading 5 Medium

Heading 5 Bold

H6 (--xs)

Heading 6 Regular

Heading 6 Medium

Heading 6 Bold

BODY TEXT (--m)

Text m Regular

Text m Medium

Text m Bold

SMALL TEXT (--s)

Text s Regular

Text s Medium

Text s Bold

XTRA SMALL TEXT (--xs)

Text xs Regular

Text xs Medium

Text xs Bold

Primary heading

This is primary paragraph text

Accent heading

This is accent paragraph text

White heading

This is white paragraph text

Headings: Inter (700)

Source: Google Fonts

Body copy: Inter (300)

Source: Google Fonts

Alternative: Source Serif (600)

Source: Google Fonts

Widths

There are six values you can use to control element width. They're automatically responsive.

--width-xs

--width-s

--width-m

--width-l

--width-xl

--width-xxl

Section Padding

Padding for sections is responsive and based on a multiplier of the core spacing system.

None

XXL

Spacing

There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.

--space-xs

--space-s

--space-m

--space-l

--space-xl

--space-xxl

Element Padding

Here are the six levels of spacing visualized as padding.

Card

This is a card with XS padding. Its content is pretty close to the edges.

Card

This is a card with S padding. It has a little bit tighter padding.

Card

This is a card with M padding. It has standard breathing room.

Card

This is a card with L padding. It has extra breathing room.

Card

This is a card with XL padding. It has significant breathing room.

Card

This is a card with XXL padding. Avoid using this in a confined space.

Shadows

There are three multi-layer box shadows to choose from.

Box shadow M

Box shadow L

Box shadow XL

Border radius

There are six border radius values calculated from a base size and a mathematical scale.

Rounded XS

Rounded S

Rounded M

Rounded L

Rounded XL

Rounded XXL