Please update your browser. Why?

Styleguide

Globals | Objects | Modules

1. Globals

Globally defined styles such as colors, typography (links, headings, font families).

The site's colours

.color-block--primary

Primary color (black)

.color-block--secondary

Secondary color (yellow)

.color-block--white

White color (sometimes over colored background boxes)

.color-block--grey-lite

Light grey over white bg

.color-block--grey

Standard grey over white bg

.color-block--grey-dark

Dark grey over white bg

.color-block--grey-dark-on-yellow

Dark grey over yellow bg

.color-block--red

Red color used in the editor

.color-block--yellow--lite

Yellow variation used in textfields in the editor

Small and greyed text.

Some small copy and a link.

.small-copy

Gray on white, changes with themes.

Some small copy and a link.

.small-copy--on-white

Force white theme colors.

Some small copy and a link.

.small-copy--on-yellow

Force yellow theme colors.

Some small copy and a link.

.small-copy--on-black

Force black theme colors.

The site's typography

New meets old meets technic, FF Mark is not an average geometric sans. Designed with versatility in mind, it breaks tradition with its family of 10 weights ranging from Hairline to Black, with the extreme weights “engineered” to shine bright in large sizes and middle weights optimized for body copy.

.copy

Body copy. Yoga, 16px size.

A new geometric sans

.as-h1

Headings 1. Sero Thin, 96px size.

A new geometric sans

.as-h2

Headings 2. Sero Light, 40px size.

A new geometric sans

.as-h3

Headings 3. Yoga, 36px size.

A new geometric sans

.as-h4

Headings 4. Yoga, 21px size.

A new geometric sans

.as-h5

Headings 5. Yoga, 16px size, bold.

A new geometric sans

.as-h6

Headings 6. Yoga, 16px size.