System

The tokens the site is made of. This page is live: it reads the same variables as the rest of the product, so it cannot lie about what is actually in effect.

Colour

Near-neutral greys, so the accent is the only warm thing on the page. One accent, across the whole site, in both themes.

Neutrals

--paper

Page background

--sunken

Sunken surfaces: grid gutters, tracks

--raised

Raised surfaces: controls, panels

--rule

Structural rules

--rule-strong

Stronger rules, control borders

--ink-3

Tertiary text, labels

--ink-2

Secondary text, long copy

--ink

Primary text

Accent

--accent

Solid fills, graphic marks

--accent-ink

Accent at text size, AA contrast

--accent-wash

Faintly tinted background

--accent-contrast

Text on a solid accent fill

The accent comes in two values because a vermilion legible as a solid fill is no longer legible as body text. This text uses accent-ink and clears AA on both backgrounds.

Typography

Instrument Sans for the voice, IBM Plex Mono for the data. No serif: this subject is neither a book nor a period piece.

Display

14 Sol

Section title

Thirteen months of twenty-eight days

Subtitle

Every month begins on a Monday and ends on a Sunday.

Body

Kodak ran its factories on this calendar from 1928 to 1989.

Body small

A lunation lasts 29.53 days. A fixed month lasts 28.

Numerals

The product is a grid of numbers that change every second. So they are all tabular: a clock that jitters is a broken clock.

Plex Mono, fixed width

11 : 08 : 41

11 : 08 : 42

Sans, proportional width

11 : 08 : 41

11 : 08 : 42

Shape

An instrument has corners. Three radii, each with one job, and no pill radii anywhere.

--r-0 0 px

Calendar cells, rules, full-bleed blocks

--r-1 3 px

Controls: buttons, fields, chips

--r-2 6 px

Floating surfaces: panels, dialogs

Motion

Three curves, six durations. Nothing animates without a reason: hierarchy, story, feedback or a change of state.

ease-outcubic-bezier(0.23, 1, 0.32, 1)

Entrances and exits. The motion starts immediately, so the interface answers.

ease-in-outcubic-bezier(0.77, 0, 0.175, 1)

Movement or morphing on screen, when both ends have to settle.

ease-drawercubic-bezier(0.32, 0.72, 0, 1)

Drawer travel, iOS style. A long glide, a soft landing.

Durations

--t-pressThe press itself

--t-releaseThe release: the interface answering

--t-hintTooltips, small popovers

--t-menuMenus, selects, theme swap

--t-panelDialogs, drawers

--t-storyExplanatory motion: the grid morph

Anything that answers the finger stays under a quarter of a second. A surface that travels a real distance takes longer. Only explanatory motion passes half a second, because it is telling you something rather than reacting.

Layers

The only z-index values allowed. Any other value in the code is a bug.

base0

raised10

sticky30

nav40

modal50

grain60