Grid
How every screen in Coffer is laid out: a twelve-column grid that collapses to one column on a phone, and a set of gaps that never change.
Twelve columns
the unit everything else is measured in
1
1
1
1
1
1
1
1
1
1
1
1
6
6
4
4
4
3
3
3
3
8
4
9
3
How it collapses
resize the window and watch — one column on a phone, two on a tablet, four on a desktop
Cash at bank
$—
Receivables
$—
Payables
$—
Net this month
$—
Coffer never sets a column count without a breakpoint in front of it. A four-column row on a desktop is a one-column stack on a phone, and nothing is ever made to fit by shrinking the text.
The gaps
four sizes, and nothing between them
gap-2
gap-3
gap-4
gap-6
A page, in full
the shape almost every screen takes
Page head — title, description, the one action that matters
Figure
Figure
Figure
Figure
The table, or the chart
What is next