layout
a twelve column grid, an 8-point rhythm, square corners and a 3 px rule.
the grid
blocks snap to the columns. the weights are unequal and the balance is off center, which is the bauhaus way of filling a page. one dominant shape, then supporting ones.
breakpoints
| breakpoint | from | columns | gutter | margin |
|---|---|---|---|---|
| phone | 0 | 4 | 16 px | 16 px |
| tablet | 720 px | 8 | 20 px | 24 px |
| desktop | 1100 px | 12 | 24 px | 40 px |
content stops growing at 1200 px. pages stay left aligned inside that box; they do not center on very wide screens.
space
an 8-point scale in seven steps.
- s1 and s2 inside components.the gap between an icon and its label, padding inside a chip.
- s3 and s4 between components.card padding, gaps in a row of buttons.
- s5 to s7 between sections.a section gets s6 above and below on desktop, s5 on phone.
surfaces
radius: 0
every corner is square. this is the single most recognizable trait of the system, so there are no exceptions, not even on avatars. circles are circles, squares are squares.
border: 3 px ink
the rule that outlines every surface. 2 px for rows inside tables and lists. 1 px only for inline code.
shadow: none
depth comes from overlap and from borders. if a layer needs to float, give it a border and a paper backdrop.
composition
- one dominant shape.each screen or poster has one big element. everything else supports it.
- weight off center.put the heavy block in a corner or on a diagonal, then balance with smaller ones.
- align left, rag right.text and blocks share a left edge. nothing is centered unless it is a single mark.
- edges touch.blocks butt against each other with a rule between them, not floating gaps. use gap only inside a group.
- diagonals are for posters.the interface stays orthogonal. a tilted bar or rotated headline belongs in print and illustration.