RootSystem 2.1

Style Guide

Typography

H1 Heading

Element

H2 Heading

Element

H3 Heading

Element

H4 Heading

Element

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem.

heading-lg

Class

heading-md

Class

heading-sm

Class

heading-xs

Class

mono-xl

Class

mono-lg

Class

mono-md

Class

mono-sm

Class

mono-xs

Class

mono-lg

Class

paragraph-lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et.

paragraph-sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et.

u-text-bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id.

link-lg
Class
link-sm
Class

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3
  4. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Colour

white
u-bg-white
Light blue
u-bg-light-blue
Dark Blue
u-bg-dark-blue
Light Green
u-bg-light-green
Dark Green
u-bg-neutral-deep
Dark
u-bg-neutral-dark
black
u-bg-neutral-black

Buttons

Button
Primary
Button
Secondary
Button
Tertiary

Images

Letterbox
image-letterbox
Wide
image-wide
Landscape
image-landscape
Square
image-square
Portrait
image-portrait
Tall
image-tall

Structure

grid
grid
grid / large gap
grid
c-gap-lg
grid / small gap
grid
c-gap-sm
grid / one column
grid
c-col-1
grid / two columns
grid
c-col-2
grid / three columns
grid
c-col-3
grid / four columns
grid
c-col-4
grid / five columns
grid
c-col-5
grid / six columns
grid
c-col-6
flexible layout
flex
flexible layout / large gap
flex
c-gap-lg
flexible layout / small gap
flex
c-gap-sm
column
column
column / large gap
column
c-gap-lg
column / small gap
column
c-gap-sm

Padding

extra large padding
u-p-xl
large padding
u-p-lg
medium padding
u-p-md
small padding
u-p-sm
extra large padding top
u-pt-xl
large padding top
u-pt-lg
medium padding top
u-pt-md
small padding top
u-pt-sm
no padding top
u-pt-0
extra large padding bottom
u-pb-xl
large padding bottom
u-pb-lg
medium padding bottom
u-pb-md
small padding bottom
u-pb-sm
no padding bottom
u-pb-0

Utilities

hide item
u-hide
hide item on desktop
u-hide-des
hide item on devices
u-hide-dev
hide item on tablet
u-hide-tab
hide item on mobile
u-hide-mob

Combinations

align top
c-align-top
align middle
c-align-mid
align bottom
c-align-btm