rules
86 rules, numbered, each with its reason and the page where it lives.
how to use the rulebook
86 rules
every rule in the system in one place, numbered so it can be cited: c3 is the third color rule, p6 the sixth component rule.
each one has a reason
every rule traces to one of the seven principles. a rule that cannot name its principle is deleted at the next release.
each one has a home
the page where the rule is shown working. the rulebook is the index; the pages are the proof.
brand
- b1the mark is three shapes of one size.circle, square and triangle, 18 units each, on a 40 by 26 field. never recolored, rotated, outlined, stretched or placed on red.brand: the mark
- b2clear space equals the square.18 units on every side, with nothing inside it.brand: lockups
- b3minimum size is 24 px tall.below that, use the mark alone; the wordmark needs the room.brand: lockups
- b4the wordmark is ink on light grounds and white on dark ones.the mark keeps its three colors on every ground it is allowed on.brand: lockups
- b5lowercase on the outside.product name, headlines, section titles and poster type are lowercase.brand: voice and tone
- b6sentence case on the inside.buttons, labels, fields, messages and long reading use sentence case.brand: voice and tone
- b7plain verbs, short sentences, no exclamation marks.a message says what happened and what to do next.brand: voice and tone
- b8names keep their capitals.except in display lines, where bauhaus and poppins are parts of the design.why the headlines are lowercase
color
- c1six values in the interface.red, yellow, blue, ink, paper, white. the twelve-step studio wheel is for illustration only.color: the core palette
- c2build with roles, not hex.action, emphasis, structure, text, border, background, surface. a component never reads a raw value.color: semantic roles
- c3red is for the one thing to do.one red button per screen; a second one means neither is primary.color: rules
- c4yellow marks state.hover, selected, current, highlighted. it is the only color that changes on interaction.color: rules
- c5blue is structure.focus rings, progress, information panels and the ground under media.color: rules
- c6ink is text and rules; paper is the ground; white is a surface.on paper, a white card stands; on white it would vanish.color: semantic roles
- c7no gradients, tints or opacity in the interface.depth is overlap and a border. illustration may use the studio wheel.color: rules
- c8two primaries never meet along a text edge.ink or white goes between them, or the edge vibrates.color is structure
- c9text on color meets 4.5 to 1.red and blue are never body text on paper; display type may use 3 to 1.color: contrast
- c10the usage ratio of a screen is half paper, a fifth ink, a tenth red.yellow and blue share the rest. more red means more than one call to action.color: usage ratio
type
- t1one family.poppins, with jost, futura, century gothic and avenir next behind it.type: the typeface
- t2seven sizes.96, 56, 32, 24, 18, 15, 13. nothing in between, and skip a step to show hierarchy.type: the scale
- t3two weights per view.one heavy for display or headings, one light for body.type: rules
- t4tracking tightens with size.minus three percent at 96, minus one at 32, zero at body, plus one at 13.type: rules
- t5left aligned, ragged right.centered text only for a single mark or a single number.type: rules
- t6lines under 60 characters.66 in articles, where reading is continuous.type: rules
- t7no italics; no underlines except on links.emphasis is weight or a yellow highlight.type: rules
- t8never letterspace lowercase at small sizes.it falls apart into letters.why the headlines are lowercase
layout
- l1twelve columns on desktop, eight on tablet, four on phone.gutters 24, 20 and 16; margins 40, 24 and 16.layout: the grid
- l2content stops at 1200 px and stays left.pages do not center on wide screens.layout: breakpoints
- l3spacing comes from the 8-point scale.8, 16, 24, 32, 48, 64, 96. skip a step to show hierarchy; 16 next to 24 is invisible.layout: space
- l4corners are square.radius is zero everywhere. circles are circles, not rounded squares.layout: surfaces
- l5borders are 3 px ink.2 px for rows inside lists and tables, 1 px only for inline code.layout: surfaces
- l6no shadows.nothing floats. a layer that must stand out gets a border and a paper backdrop.layout: surfaces
- l7one dominant block per screen, off center.counterweight with something small and saturated on the far side.layout: composition
- l8blocks touch with a rule between them.gaps live inside groups, not between them.layout: composition
- l9the interface is orthogonal.diagonals and rotated type belong to posters and illustration.the grid and the diagonal
motion
- m1only color, opacity and position move.never scale, blur, rotation or shadow.motion: rules
- m2three durations.120 ms for color and state, 200 for short movement, 320 for arrival.motion: three durations, one curve
- m3color changes are linear; movement eases.cubic-bezier(.2, 0, 0, 1), and nothing bounces or overshoots.motion: three durations, one curve
- m4movement is short.12 px for a nudge, 42 for a toggle, the element's height for an arrival.motion: rules
- m5one thing at a time.no staggered lists, no cascades.motion: rules
- m6reduced motion is honored.every transition is removed and the loader stops; nothing depends on an animation finishing.motion: rules
parts
- p1a component ships with every state.rest, hover, focus, pressed, disabled, and error where it applies.states, or what a control is doing
- p2hover is yellow, pressed is ink, focus is blue, disabled is paper.the assignment never changes between components.components: buttons
- p3buttons are 48 px tall and name an action.a verb and a noun in sentence case: save design, not submit.components: buttons
- p4fields have a visible label above them.bound with for and id. placeholders are examples, not labels.components: text fields and selects
- p5errors stay with the field.red border and underline, a message that says what to fix, aria-invalid and aria-describedby.components: text fields and selects
- p6native elements first.dialog, details, radio, checkbox, range, select and progress, restyled.controls
- p7the current item is yellow and carries an attribute.aria-current for navigation, aria-selected for tabs, aria-pressed for toggles, checked for inputs.controls: tabs
- p8one action per row, card or list item.or none, and the whole thing is the link.components: cards
- p9alerts pair a color with a shape.triangle warns, circle informs, square errs, a check confirms.components: alerts and progress
- p10toasts confirm and vanish in four seconds.errors stay where they happened and never toast.controls: toast
- p11class names are ws-block, ws-block__part and ws-block--variant.state is read from attributes, never from an is-active class.start: naming
sections and pages
- s1a page is a column of full width sections separated by rules.not nested boxes, not floating cards.templates: rules for assembling a page
- s2a header has three to five links and one dark button.it wraps on a phone; there is no hamburger until there are more than five.patterns: site header
- s3the hero holds the one red button.a call to action band near the end may hold a second, yellow on red.patterns: hero
- s4a feature grid has three to six cells, one shape each.cells are joined by 3 px rules over ink.patterns: feature grid
- s5stats are three or four numbers on yellow.two is a sentence; five is a table.patterns: stats band
- s6one quote per page.blue for people, ink for the school.patterns: quote
- s7the recommended plan is yellow and gets the red button.bullets are red squares, not ticks.patterns: pricing
- s8forms are one column.the submit is the red button; the alternative is a text link.patterns: newsletter and sign-up forms
- s9the full footer appears once per site.everything else uses the slim footer.patterns: footer
- s10a 404 says what happened and offers two buttons.red to the most useful place, white to home. no apology.patterns: 404 and empty pages
words
- w1headlines are sentences in lowercase.twelve words or fewer, no full stop unless it is the slogan.patterns: hero
- w2buttons name the result.save design, not submit; start, not go.components: buttons
- w3messages say what happened, then what to do.couldn't save. check your connection and try again.brand: voice and tone
- w4questions are in the person's words.how long is an exercise, not exercise duration.patterns: faq
- w5empty states are invitations.what will appear, and the one button that makes it appear.controls: empty, loading and done
- w6no apologies, no jokes, no exclamation marks.warm, not loud.brand: voice and tone
- w7numbers are figures; units live in the label.14 days, not fourteen; 5 min, not 5m.patterns: stats band
- w8a word beats an icon.an icon beside a word is hidden; an icon alone is labeled.icons: usage
accessibility
- a1every control shows focus.3 px blue, 2 px outside; fields use a 5 px blue underline.accessibility: how the system is accessible
- a2text contrast is at least 4.5 to 1.large display type may use 3 to 1; grey is never text.accessibility: contrast
- a3targets are 48 px, never under 44.with 8 px between neighbors.accessibility: how the system is accessible
- a4color is never the only signal.states have a shape, a word or an attribute as well.accessibility: how the system is accessible
- a5every icon is hidden or named.aria-hidden beside a word; aria-label when alone.icons: usage
- a6reading order matches visual order.the skip link comes first and headings make an outline.accessibility: keyboard
- a7layouts survive 200 percent zoom.only tables scroll sideways.accessibility: test it
- a8reduced motion is honored.and nothing depends on an animation finishing.motion: rules
icons
- i1a 100 unit square with a 10 unit margin.the inner 80 hold the drawing.icons: construction
- i2four primitives only.circle, square, triangle and bar. no freehand paths.icons: construction
- i3lines are 8 to 16 units.thinner vanishes at 24 px; thicker is a block.icons: construction
- i4ink is the body, red the active part, yellow or blue a surface.three colors at most.an icon in four moves
- i5only triangles point.arrows are a bar plus a triangle; there are no chevrons.an icon in four moves
- i6center by centroid, not by bounding box.the play icon sits slightly left of center so it looks centered.an icon in four moves
- i7name icons by what the person does.add, close, done. not plus, x, check.icons: usage
- i8scale the whole icon.never redraw it thinner for a smaller size.icons: construction