Joe Mallory-Skinner

Product designer and design systems specialist

Based in London, UK – I have 7 years of experience and a knack for making the complex simple.

Currently working on the Avios Design System

Layout

Core layout to structure pages and components.

.page
.main
.section
.padding-global
.section-padding-vertical-small
.section-padding-vertical-medium
.section-padding-vertical-large
.container-small
.container-medium
.container-large
.max-width-full
.max-width-xxxLarge
.max-width-xxLarge
.max-width-xLarge
.max-width-large
.max-width-medium
.max-width-small
.max-width-xSmall
.max-width-xxSmall
.padding-bottom
.padding-top
.padding-right
.padding-left
.padding-vertical
.padding-horizontal
.padding-zero
.padding-xxxSmall
.padding-xxSmall
.padding-xSmall
.padding-small
.padding-medium
.padding-large
.padding-xLarge
.padding-xxLarge
.padding-xxxLarge

HTML heading tags

HTML tags define default heading styles.

h1

The quick brown fox jumps over the lazy dog

h2

The quick brown fox jumps over the lazy dog

h3

The quick brown fox jumps over the lazy dog

h4

The quick brown fox jumps over the lazy dog

h5
The quick brown fox jumps over the lazy dog
h6
The quick brown fox jumps over the lazy dog

Other HTMLΒ tags

HTML tags define default text styles.

p

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 imperdiet. Nunc ut sem vitae risus tristique posuere.

a
Text Link
blockquote
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 imperdiet. Nunc ut sem vitae risus tristique posuere.
ul
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
ol
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.

Text styles

Text styles to decouple style from html tags

.text-body-small

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 imperdiet. Nunc ut sem vitae risus tristique posuere.

.text-body-medium

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 imperdiet. Nunc ut sem vitae risus tristique posuere.

.text-body-large

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 imperdiet. Nunc ut sem vitae risus tristique posuere.

.text-label-small

Label

.text-label-medium

Label

.text-label-large

Label

.text-heading-small

The quick brown fox jumps over the lazy dog

.text-heading-medium

The quick brown fox jumps over the lazy dog

.text-heading-large

The quick brown fox jumps over the lazy dog

.text-heading-xLarge

The quick brown fox jumps over the lazy dog

.text-heading-xxLarge

The quick brown fox jumps over the lazy dog

.text-heading-xxxLarge

The quick brown fox jumps over the lazy dog

.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
  1. Item 1
  2. Item 2
  3. Item 3
  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript