All 180 rules.

Body text clears 4.5:1 against what it actually renders on. Large text and any control that carries meaning clear 3:1.

Any state encoded in color carries a second signal: a label, an icon, a pattern, or a position.

Hold hue, cut chroma, raise tone until it measures. Never invert lightness and call it done.

Never reason about contrast in HSL.

Use CIELAB or OKLCH for color difference; use luminance for contrast. They answer different questions.

One neutral ramp, one accent ramp, and only the status ramps the product actually renders.

Even perceived steps, constant hue, vividness peaking in the middle, and neither end reaching pure black or white.

A component never references a primitive.

Never borrow a token because its value happens to be right today.

Treat anything within 15° of hue as the same color, and give it one job across the whole interface.

The color goes on the background, not on the label.

Start at the middle, fix the ends, then fill in.

If the hierarchy fails in grey, color will not rescue it.

The accent works because it is rare.

Avoid a 50/50 warm/cool split at similar luminance.

Backgrounds calm, controls moderate, calls to action loud.

Test brand colors on the surfaces they will actually sit on, never in isolation.

Check the palette under warm light before shipping it.

Treat color meaning as a Western market convention you are choosing to use, not a constant you can rely on.

The space is a look, not a correctness setting.

CMYK without a named profile is undefined.

Pick one ratio, generate every size from it, and never skip a heading level.

max-width: 65ch on anything anyone will read a paragraph of.

Bigger text, tighter leading. Set it unitless.

Anything that wraps to three lines or more gets at least 1.4, whatever the row height wants.

Body copy is left-aligned in LTR. Centered text stops at three lines. Numbers go right.

Body 400, headings 600 or above. Adjacent weights do not read as rank.

Nothing under 400 below 18px. Nothing under 300 outside display.

Two faces at the same point size are not the same size.

Similar x-heights, clearly different jobs. Two faces, rarely three.

The layout does not break when someone zooms to 200% or overrides spacing.

Opens with a table. See Typography in the skill.

Negative on large headings, positive on small caps labels, nothing on body.

Short labels, tags, single-line headings. Never a paragraph.

Below 16px, iOS Safari zooms the entire page on focus.

Below three weights, a subsetted static file is usually smaller.

A typeface is the design; a font is one instance of it. CSS matches on the family name and picks the instance.

Ship the cuts the design uses. Do not let the browser invent them.

If a CSS property exists for it, use the property.

Store text in natural case; control presentation in CSS.

Take position and thickness from the face's own metrics.

font-variant-caps: small-caps, plus tracking. Verify the face has smcp.

Standard ligatures stay on. Discretionary and historical stay off. Both are already the browser default.

Set smoothing once on the root. Never per component.

Equal spacing everywhere means no hierarchy anywhere.

Container padding ≥ 1.5× the gap to its siblings, at every nesting level.

Space groups. Background shapes group. Lines group only when space cannot.

Multiples of 8 for spacing and sizing. Line heights use 4.

8pt for structure, 4pt for type and detail.

Line heights are multiples of 4: 16, 20, 24, 28, 32.

Space placed to direct attention is design. Space left over is not.

Every interactive element gets a background, a border, or a consistent placement zone.

Pick alignment edges and hold them. Every stray edge reads as noise.

Content hidden with no cue may as well not exist.

Breakpoints come from the layout failing, not from device presets.

No fixed width or height on a text container. A one-word button is the riskiest label on the screen.

Backgrounds reach the edge. Controls and text do not.

Text-primary layouts need an explicit max-width or the measure runs away.

The advantage is arithmetic and interoperability, not perception.

For layouts needing vertical and horizontal control at once.

The layout works at 320px, in both orientations, without a mouse, at 24px minimum targets.

24×24 is the floor. 44×44 on touch and 40×40 on desktop is the target. Padding counts.

A button with three states is a button that feels broken in the other three.

Symmetric padding centres geometry, not visual weight.

Inline links are underlined. Removing it on hover is backwards.

Opens with a table. See Controls & forms in the skill.

Opens with a table. See Controls & forms in the skill.

The alternative serves the same purpose. For a control, that is the action.

Nothing flashes more than three times a second. Non-essential motion is disableable.

outerRadius = innerRadius + padding

Where a border exists only to create depth, replace it with a layered transparent shadow.

1px at 0.1 opacity. Pure black in light, pure white in dark.

Tactile confirmation that the interface registered the press.

Inject transition: none, force a reflow, then remove it on the next frame.

You should barely notice the system working.

If borders are the first thing you see, they are too strong.

Opens with a table. See System craft in the skill.

Every color traces to a primitive. No literal hex in a component.

default · hover · active · focus · disabled, plus loading · empty · error for anything rendering data.

font-variant-numeric: tabular-nums on tables, totals, counters, timers, badges and prices.

If removing the icon loses no meaning, remove it.

Ordinary is decided. Generic is undecided. They look different.

Shadows point down. Depth starts at the edge, not at the shadow.

Higher elevation means larger blur and offset, softer and lighter, because the light is further away.

Raised: shadow below, light top edge. Inset: shadow above, light bottom edge.

Icon weight is a function of the label beside it, not an independent choice.

Fixed frame across the set; padding varies by optical weight.

Offset 1–3px toward the lighter side. No formula covers every shape.

Not the baseline, and not the em box.

Never ship separate assets for hover, selected and disabled.

An icon that reads at 48px can be mush at 16px.

Opens with a table. See Depth & icons in the skill.

Frequency decides. The first question is never the easing curve.

Opens with a table. See Motion in the skill.

Opens with a table. See Motion in the skill.

Exit is faster than enter. The user has already committed.

Small fixed translateY, around −12px. Never the full container height.

Start at scale(0.95) with opacity: 0.

Opens with a table. See Motion in the skill.

30–80ms between items [convention], capped at about 6 items / 180ms. Everything after lands at once.

For an infrequent staged entrance where sequence communicates hierarchy.

Animate opacity, scale and blur. Never toggle visibility.

Springs maintain velocity when interrupted. CSS animations restart from zero. That is the entire reason to reach for one.

Opens with a table. See Motion in the skill.

They skip layout and paint and run on the GPU. Everything else triggers all three rendering steps.

Never transition: all, and never Tailwind's transition-all.

Only transform, opacity and filter. Never all. Add it when you observe first-frame stutter, not before.

Opens with a table. See Motion in the skill.

Every animated state change also carries a static cue: color, an icon, or a label.

prefers-reduced-motion: reduce means fewer and gentler. Never no feedback.

Three ways to handle a cut, in order of preference.

The staircase is the most common smoothness failure in an otherwise well-built page.

Opens with a table. See Motion in the skill.

Opens with a table. See Motion in the skill.

A missing state and a state you decided against look identical in a codebase. The difference is that one was a decision.

All three render zero rows, which is why they get one screen. That screen is wrong for two of them.

Not by taste, and not by what the component library ships.

Null fields, 404 images, no avatar, a blank optional bio. All of these render.

Opens with a table. See Non-happy states in the skill.

An invisible revert means the user believes their change stuck.

Cheap to test, and it is what breaks in production.

For every value: if this is thirty minutes old, can the user act on it and be wrong?

Revealing that a record exists to someone not allowed to see it is a leak.

Opens with a table. See Non-happy states in the skill.

The first rule of ARIA is not to use ARIA when a native element exists.

:focus-visible, not bare :focus. Prefer the browser's own indicator.

Opens with a table. See Accessibility in the skill.

Opens with a table. See Accessibility in the skill.

Opens with a table. See Accessibility in the skill.

Opens with a table. See Accessibility in the skill.

Opens with a table. See Accessibility in the skill.

Opens with a table. See Accessibility in the skill.

Opens with a table. See Accessibility in the skill.

The product has one voice, established by its existing copy. A local edit does not get to invent a new one.

If the empty state says "projects", the summary says "workspaces" and the button says "boards", the product has three mental models.

"Send", "Save draft", "Delete project". Never "OK!", "Let's go!", or a bare "Yes" on a consequential action.

Screen reader users navigate by a list of the page's links, stripped of surrounding prose.

An error is an instruction, and it belongs beside the field that failed.

Say what this place is, how to fill it, and offer one clear action.

"Send read receipts", not "Don't send read receipts".

Pick title case or sentence case per element type, then apply it to every instance of that type.

Opens with a table. See Interface copy in the skill.

One primary focal point per functional layout. Everything else supports it.

Size, saturation, luminance contrast, position, isolation, shape.

Combine size, weight and letter-spacing. Never rely on size alone.

Try it, then try centred, then decide. It is not a law and it has no normative backing.

61.8 / 38.2 is a reasonable place to begin a two-column split. That is the whole claim.

Three is the smallest group that establishes a hierarchy.

Opens with a table. See Hierarchy in the skill.

Angle and arc are near the bottom of the perceptual accuracy ranking. Use a bar chart on a shared baseline.

Neither is better. Context decides which one earns trust.

People spend nearly all their time in other products. Yours is judged against the habits those built.

Structure beats count. Ten organised items beat five chaotic ones.

Three to five per group, and a gap between groups at least 1.5× the gap within.

Doubling the options adds a constant, not a doubling.

Keep anything meant to be grasped at a glance at four or fewer.

A second highlight cancels the first.

The shape and position get filtered, not the content.

Salience is necessary and not sufficient. Match the alert to the task's features.

Defaults are a design decision with a legal boundary.

A third option that is clearly worse than the target makes the target win the comparison.

Design those two moments. The average is not remembered.

An image beats a word when the image is distinctive and relevant. Otherwise it does not.

Success is green, error is red, warning is amber. Do not recolor them for the palette.

Uncertainty before an outcome drives engagement. That is a reason to be careful with it, not a licence to use it.

Keep sibling elements the same size when their size means something.

align-items: center reads as sagging.

Put the primary call to action at 45–48% of height, not 50%.

Keep arrow and chevron caps consistent across elements meant to compare.

Reversed type and icons may need marginally less weight. Judge it visually.

Round reads approachable, angular reads precise, until color and weight say otherwise.

The distance a medium is read from determines its type size, contrast and detail density.

Perceived size is physical size divided by viewing distance. Size on the page means nothing without a stated distance.

Opens with a table. See Beyond the screen in the skill.

Minimum 1× on all four sides, expressed as a ratio so it scales with the mark.

Opens with a table. See Beyond the screen in the skill.

Crop through the middle of a limb segment, roughly 10% of its length from the nearest joint [convention].

A dieline is a vector 2D document defining every cut, crease, perforation and glue line in the flat unfolded state. Not a mockup, not a render.

A PMS-only spec on a 4-color press forces an uncontrolled conversion.

Every A-series sheet is 1:√2, so halving along the long edge yields the next size at identical proportions.