Brand Manual

Colours

$c--primary1-1
$c--primary1-2
$c--primary1-3
$c--primary2-1
$c--primary2-2
$c--primary2-3
$c--primary3-1
$c--primary3-2
$c--primary3-3
$c--primary4-1
$c--primary4-2
$c--primary4-3
$c--primary5-1
$c--primary5-2
$c--primary5-3
$c--primary6-1
$c--primary6-2
$c--primary6-3

Font families

(excludes font weights and styles)
AbBbCcDdEeFfGg
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!?)(][\/-:;,.'_
$ff--primary1-1
AbBbCcDdEeFfGg
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!?)(][\/-:;,.'_
$ff--primary2-1
AbBbCcDdEeFfGg
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!?)(][\/-:;,.'_
$ff--primary3-1

Headings

Header one

h1

Header two

h2

Header three

h3

Header four

h4
Header five
h5
Header six
h6

Text styles

Elements

The a element example

The abbr element and an abbr element with title examples

The b element example

The strong element example

The cite element example

The code element example

The em element example

The del element example

The dfn element and dfn element with title examples

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The sub element example

The sup element example

The u element example

The var element example


Paragraph

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore manumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo dubum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Buttons

Primary

Secondary

Forms

Form Fields

Lists

Un-ordered list

  • list item 1
  • list item 1
    • list item 2
    • list item 2
      • list item 3
      • list item 3
    • list item 2
    • list item 2
  • list item 1
  • list item 1

Ordered list

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

Data list

Description name
Description value
Description name
Description value
Description value
Description name
Description name
Description value

Tables

Default table

thead th thead th thead th
tbody td tbody td tbody td
tbody td tbody td tbody td
tbody td tbody td tbody td
tfoot td tfoot td tfoot td