Playground

Every dial the system has, on a real page. Turn them, break nothing, copy the attributes when you like the look.

The landing template

DesktopTabletPhone

Open on its own

Setting the type

A fictional studio site, Pebblepath, printed at 1280 px. Scroll inside the frame.

The mini sheet

Fresh by noon

Email (optional)

Only for replies.

Case study

Fernlight: from five taps to two

Jordan Reyes wanted fewer calls about prices and more about gardens.

Built to be tested.

Taking projects

These attributes

<html 
  data-mk-colourway="process"
  data-mk-volume="studio"
  data-mk-theme="bone"
  data-mk-contrast="normal"
  data-mk-voice="standard"
  data-mk-second-ink="rest"
>

Put them on the root element of a layout and the page prints this look. Contrast and motion only work on the root; the others also work on any section.