The style guide

Every piece the app and the site are drawn with, from the same stylesheet the app uses. Tappable things are round; information is square.

Buttons

.btn.btn-primary (one per screen) · .btn.btn-secondary · .btn.btn-quiet · .btn.btn-icon · disabled

Choices

.seg (one of a few) · .chip (entities and filters) - one selected look

Main bed

Badges and the evidence grade

.badge (soft / outline / solid) x tone · .grade (s p h d f, and no letter)

Won’t fit Fits Recommended Draft Late by 3 days
Well established Promising A good hunch Contested Refuted Estimated

Cards

.card · a.card (a row you tap) · .card-flat · .card-rail · .card-callout · .notice

This ground's climate
Last spring frost ~Apr 24
Open your garden
The plan, the map, the beds
Three Sisters
needs 43.1 ft²
A rule's claim, de-boxed: the tone rides the rail.
This is an example garden.
A notice stays until it is dealt with.

No beds yet. Draw or size one on the Plan, and it shows up here.

Plan a bed ›

Disclosure and field

How we know

One marker, drawn by the stylesheet, turning over when open.

Type

--fs-xs 13 · --fs-sm 14 · --fs-md 16 · --fs-read 17 · --fs-lg 20 · --fs-xl 24 · --fs-2xl 40 (the page h1) · Fraunces for headings, Newsreader for reading, Hanken for the interface

A kicker - the one small caps label

Caption, badge, kicker

Controls, chips, meta

Interface body

Long-form reading, in the text face.

A section heading

Colour

the semantic layer - every skin and scheme re-points these

--bg
--surface
--card
--ink
--ink-muted
--action
--link
--soft
--positive
--caution
--danger

Space and shape

--space-0 to --space-7 (2 4 8 12 16 24 32 48px) · radii --r-0 --r-xs --r-md --r-lg --r-pill

Back to the app