Skip to main content

Basics

The foundations every page builds on: colours and surfaces from the Skin, gradients, the radius ladder, lists, images, forms and the page header. Each sub-page shows a live example, the code and the available options.

Colour Tokens

Brand colours, the six surfaces, functional colours, the gradient palette and the radius ladder, all defined in the Skin.

Open

Radius Tokens

Why corners are rounded and how much: the golden radius ladder and the rules for cards, images and controls.

Open

Form Elements

Sitewide form styling and the button classes, including the pill button.

Open

Buttons

Every button kind at a glance: DCK button variants and sizes, frame, navigation, pill, round icon and form buttons.

Open

Lists

Gradient lists: circles, numbered, timeline, arrows, checks, bars, dashes and rings.

Open

Images

One figure component for every picture: caption styles, alignment, fade-in, and the same shape options as cards.

Open

Header

Header variants per page: scroll shrink, parallax and background images.

Open