Paralympics New Zealand
Style Guide
This page outlines the current styles and standards for the Paralympics New Zealand website.
Colors
An overview of this site's brand colors.
Action
Action
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Primary
Primary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Base
Base
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Shade
Shade
Ultra Light
Light
Medium
Dark
Ultra Dark
Action
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Primary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Secondary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Accent
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Base
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Shade
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Success
Success
Success Light
Success Dark
Success Hover
Danger
Danger
Danger Light
Danger Dark
Danger Hover
Warning
Warning
Warning Light
Warning Dark
Warning Hover
info
Info
Info Light
Info Dark
Info Hover
Buttons
Solid and outline buttons are available across all color sets including black and white.
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.
Headings
H1 (--xxl)
Heading 1 Bold
H2 (--xl)
Heading 2 Bold
H2 - Custom Class (heading__box)
Heading 2 Semi-Bold
H2 - Custom Class (heading__large)
Heading 2 Semi-Bold
H3 (--l)
Heading 3 Bold
H4 (--m)
Heading 4 Bold
Body Text
BODY TEXT (--m) - (This is meant for grid's excerpt - need to add it on class)
Text m Regular
SMALL TEXT (--s) - (This is meant for out regulat body text)
Text s Medium
Examples
Heading 1 (H1)
This is large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 2 (H2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 3 (H3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 4 (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Widths
There are six values you can use to control element width. They're automatically responsive.
Section Padding
Padding for sections is responsive and based on a multiplier of the core spacing system.
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 L padding. It has extra breathing room.
Card
This is a card with XL padding. It has significant breathing room.
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