Nelson College

Website style kit

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

Brand Colours

Pick a colour to see it's variants

Primary colour variants

primary-5
primary-10
primary-20
primary-30
primary-40
primary-50
primary-60
primary-70
primary-80
primary-90
primary-l-4
primary-l-3
primary-l-2
primary-l-1
primary-d-1
primary-d-2
primary-d-3
primary-d-4

Secondary colour variants

secondary-5
secondary-10
secondary-20
secondary-30
secondary-40
secondary-50
secondary-60
secondary-70
secondary-80
secondary-90
secondary-l-4
secondary-l-3
secondary-l-2
secondary-l-1
secondary-d-1
secondary-d-2
secondary-d-3
secondary-d-4

Tertiary colour variants

Tertiary-5
Tertiary-10
tertiary-20
tertiary-30
tertiary-40
tertiary-50
tertiary-60
tertiary-70
tertiary-80
tertiary-90

Base colour variants

base-5
base-10
base-20
base-30
base-40
base-50
base-60
base-70
base-80
base-90
base-l-4
base-l-3
base-l-2
base-l-1
base-d-1
base-d-2
base-d-3
base-d-4
Light
Dark
Text
Headings

BG Site Light 1

.bg-site-l-1
var(–bg-site-l-1)

this is text on this BG colour

BG Site Light 2

.bg-site-l-2
var(–bg-site-l-2)

this is text on this BG colour

BG Site Dark 1

.bg-site-d-1
var(–bg-site-d-1)

this is text on this BG colour

BG Site Dark 2

.bg-site-d-2
var(–bg-site-d-2)

this is text on this BG colour

Button styles

Core Framework button styles

Buttons on dark (Bricks default buttons)

Typography

This block has the .smart-spacing class applied to get nicely formated spacing between text items. 

Heading h1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

Heading h2

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading h3

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading h4

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis

nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading 6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Forms

Lists

  • Bullet item
  • Bullet item
    • Indented bullet item
      • third level indent
  1. Ordered list item
  2. Ordered list item
    1. Indented ordered list item
      1. third level indent

Blockquote

This is the quote text

Figcaption text

Widths

Max width lengths. These are based on the site's page width
--max-width-text
--max-width-quarter
--max-width-third
--max-width-half
--max-width-10
--max-width-20
--max-width-30
--max-width-40
--max-width-50
--max-width-60
--max-width-70
--max-width-80
--max-width-90

Breakout

Breakout Max

Breakout full (Safe)

Breakout full

Custom Breakout (Content / breakout)

Custom Breakout (Content / breakout-max)

Custom Breakout (Content / full)

Section Padding

Padding for sections is responsive and based on a multiplier of the core spacing system.
None
XS
S
M
L
XL
2XL

Spacing

There various levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.
These range from 3xs to 4xl
--space-2xs
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-2xl
--space-2xl

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.

Border radius & Shadow

There are six border radius values calculated from a base size and a mathematical scale.
Radius XS
Radius S
Radius M
Radius L
Radius XL
Radius Full