MedExpress Pattern Library

Fonts & Sizes

Text in Use

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0 ! @ # $ % & *

The main font is Lato. This is body copy. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Some strong text and bold text. Some italic and emphasised text. Some text with 2^nd and o₂. Some text that is a link.

Arthure C. Clarke said, Any sufficiently advanced technology is indistinguishable from magic.

This is a blockquote.

MedExpress Icon Font Test

Light / Regular

There are errors in the Light set. Icons do not match names (see professional)

Standard size (16px):

Larger (H6 - 20px):

Larger (H4 - 30px):

Larger (H2 - 58px):

Font Map
Element / Class	Sample	Font Size
`h1 .h1 .alpha`	Heading 1	92px/90
`h2 .h2 .beta`	Heading 2	58px/normal
`h3 .h3 .gamma`	Heading 3	50px/60
`h4 .h4 .delta`	Heading 4	30px/36
`h5 .h5 .epsilon`	Heading 5	30px
`h6 .h6 .zeta`	Heading 6	24px/30
`.h7`	Heading .h7	20px/25
`.h8`	Heading .h8	18px/20
Default `body .body-text`	This is body copy; set in Lato, 18px.	18px
`.detail-copy .subhead .caption figcaption`	This is detail copy; set in Lato, 16px.	16px
`small .small .milli`	This is small copy; set in Lato, 15px.	15px

Font Family Variables
Font Name:	Less Variable:	Class:
Font Light is Lato 300	`@fontWeightLight`	`.font-light` (as class, extend, or mixin)
Main font is Lato		`.body-text`
Font Bold is Lato 700	`@fontWeightBold`	`<b>` or `<strong>`
Font Black is Lato 900	`@fontWeightExtraBold`	`.font-black` (as class, extend, or mixin)

Colors

MedExpress Primary Colors

Demin

@denim

Terra Cotta

@terracotta

Olive

@olive

Dark Demin

@denim-dark

Secondary Colors

Yellow

@yellow

Purple

@purple

Blue

@blue

Orange

@orange

Tertiary Colors

Tin

@tin

Denim 20%

@denim-20

Denim 5%

@denim-5

Khaki

@khaki

Khaki 30%

@khaki-30

Khaki 15%

@khaki-15

Khaki 5%

@khaki-5

Cream - out dated

~~@cream~~

Core Colors

Main DMP color mappings.

Undefined

@undefined-color

White

@white

Off White (trans)

@off-white-transparent

Off White

@off-white

Gray Lighter

@gray-lighter

Gray Light

@gray-light

Gray

@gray

Gray Dark

@gray-dark

Gray Dark

@gray-dark

Off Black

@off-black

Black

@black

Control Colors

@link-color

@error-color

@success-color

@warning-color

@info-color

Buttons

All buttons start with a basic default styling with the class of .button, and are extended using the BEM naming convention. Use multiple classes together to alter both size and color, as well as to disable a button.

Examples include both links (<a>) styled as buttons and native buttons (<button>). In general, a link should be used when the click action leads to a new destination; a button should be used if an action is performed (e.g. submit a form, open/close an accordion).

Sample code for a button: <button class="button button--denim">button--denim</button>

Class name	Example
`.button`	a.button
`.button--reverse`	a.button--reverse
`.button--white`	This is a white border and text with transparent background.
`.button--denim`
`.button--terracotta`
`.button--olive`
`.button--denim-dark`
`.button--yellow`
`.button--purple`
`.button--blue`
`.button--orange`
`.button--disabled`	a.button--disabled
`.button--small`	a.button--small
`.button--large`	a.button--large
`.button--full-width`	a.button--full-width

Top