The style guide.

The foundations used on this site. References to adapt to your project, adding only what becomes necessary.

Colours.

Brand, Neutral and Others form the Base palette. Theme variables assign these values to backgrounds, text and buttons.

Brand / blue--brand-blue

Brand / blue-dark--brand-blue-dark

Neutral / paper--neutral-paper

Neutral / ink--neutral-ink

Neutral / white--neutral-white

Neutral / gray--neutral-gray

Others / green--other-green

Others / purple--other-purple

Typography.

Inter Variable, loaded locally. Headings use text-wrap: balance, descriptions use text-wrap: pretty.

Display

A clear foundation.

Section

Every element
in its place.

Component

Details make the system.

Description

Consistent styles to build pages, share the same foundations and keep reading comfortable at every screen size.

Spacing.

A simple scale in rem. Page gutters increase from 1.25rem to 2.5rem; sections increase from 4.5rem to 7rem at 48rem.

tiny

small

medium

large

xlarge

Buttons.

One primary action and a quieter alternative. Try keyboard navigation to see the focus state.

Try the variables Return to the site

Light variant

Components.

Horizontal scrolling with faded edges. Controls stay outside the mask.

Clear actions

A primary button, a secondary link and visible focus.

Balanced headings

One family, one scale and grouped text styles.

Shared spacing

Values in rem, adapted to small and large screens.

Colours with a purpose

Each role refers to the project palette.

Simple components

A section and container shared across pages.