Design Tokens

Base tokens

Typography

Element heading levels

Heading h1

Heading h2

Heading h3

Heading h4

Element text

Body Copy with some small text

Class based heading levels

Heading class .h1

Heading class .h2

Heading class .h3

Heading class .h4

Element text

Body Copy with some small text

Body copy (containing an inline linque text with) and some punctuation: ~, £, “, ”, ‘, ’, «, and ». some more body copy with .u-caption-copy and some more text.

Character set

1234567890qwertyuiopa sdfghjklzxcvbnm,.; /'[]QWERTY UIOPASDFGHJKLZXCVBNM' < >

Ut id nisl quis enim dignissim sagittis. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Mauris sollicitudin fermentum libero. Aenean imperdiet. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor.

Nam eget dui. Donec id justo. Curabitur at lacus ac velit ornare lobortis. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Curabitur turpis.

Fusce fermentum. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Ut varius tincidunt libero. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.

Morbi vestibulum volutpat enim. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. In hac habitasse platea dictumst. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Ut non enim eleifend felis pretium feugiat.

• Unordered list
• Unordered list

1. Ordered list
2. Ordered list

Definition list title

Definition list data

Colour Pallette

Spacing

Icons

Layouts

Stack

Also comes in a variety of sizes see spacing variables

Auto grid @TODO

Blockquote