Patterns

A responsive system to support designers, developers and teams to begin the build of products, apps and services based on a core collection of flexible consistent elements.

 

5 Colour

Colour any object foreground or background with pre-defined css classes based on our palette.

5.1 Primary Colours

Blue
Hex 327c9c
CSS .blue, bg-blue, .primary-color, bg-primary-color
Green
Hex 97cb3f
CSS .green, bg-green, .secondary-color, bg-secondary-color
Diesel
Hex 4f6177
CSS .Diesel, bg-diesel
Beige
Hex f0e5dc
CSS .beige, .bg-beige

5.2 Secondary Colours

A palette of neutral greys

Dark grey 3
CSS .dark-grey-3, .bg-dark-grey-3
Dark grey 2
CSS .dark-grey-2, .bg-dark-grey-2
Dark grey 1
CSS .dark-grey-1, .bg-dark-grey-1
Mid grey 3
CSS .mid-grey-3, .bg-mid-grey-3
Mid grey 2
CSS .mid-grey-2, .bg-mid-grey-2
Mid grey 1
CSS .mid-grey-1, .bg-mid-grey-1
Light grey 3
CSS .light-grey-3, .bg-light-grey-3
Light grey 2
CSS .light-grey-2, .bg-light-grey-2
Light grey 1
CSS .light-grey-1, .bg-light-grey-1

5.3 Border colours

Set a border colour

.{$modifiers}
.border--primary-color

Border primary color

.border--primary-color
.border--secondary-color

Border secondary color

.border--secondary-color
<div class="inline-block">
  <div class="bg-light-grey-1 soft dark-grey-3 border--top {$modifiers}">.{$modifiers}</div>
</div>

5.4 Border positions

Set a vertical border position

.{$modifiers}
.border

Border on all sides

.border
.border--top

Border top

.border--top
.border--bottom

Border bottom

.border--bottom
.border--ends

Border ends

.border--ends
<div class="inline-block">
  <div class="bg-light-grey-1 soft dark-grey-3 {$modifiers}">.{$modifiers}</div>
</div>

5.5 Border style

Set a border style

.{$modifiers}
.border--dotted

Border dotted

.border--dotted
<div class="inline-block">
  <div class="bg-light-grey-1 soft dark-grey-3 border--top {$modifiers}">.{$modifiers}</div>
</div>

5.6 Border size

Set a border size

.{$modifiers}
.border--4

Border 4px deep

.border--4
.border--6

Border 6px deep

.border--6
.border--8

Border 8px deep

.border--8
<div class="inline-block">
  <div class="bg-light-grey-1 soft dark-grey-3 border--top {$modifiers}">.{$modifiers}</div>
</div>