Common gotchas

Use `fill` not `fillWidth fillHeight`; `center` not `horizontal="center" vertical="center"`; `Row`/`Column` not `Flex direction=`

Never write props equal to defaults: `position="relative"`, `direction` on Row/Column, `variant="primary"` on Button

Gap between page sections: 80–160 (typical 104). Inside sections: 24–40. Never 48 between major sections

`Card` is for interactive surfaces only (`href` or `onClick`). Static panels use the Column surface recipe

Colors are semantic tokens (`{scheme}-{weight}`), never hex/rgb

`*-background-weak` is nearly the page color — use alpha tokens (`brand-alpha-medium`) for glows

Every absolute decorative layer needs `top="0" left="0"` or it offsets by parent padding

Quarter-percent units: 400 = 100%. Soft glows use width 100–200, not 500

Delay is in **seconds** — stagger with `delay={index * 0.1}`, never `index * 80`

Number = rem. Use `translateY={1}` or token `"16"`; bare `16` means 16rem

No `trigger` prop — drive `value` from a `useInViewport` latch

Entry animation budget: hero + at most 1–2 key moments per page

Icon names must come from `IconName` in spec.json — never invent

Don't pass the same text as both `title` prop and children

Don't pass the same text as both `label` prop and children

`Fade` is an edge overlay strip on scroll containers, not a content wrapper

Always set `columns` and responsive overrides or logos stack in one column

Uses `color="green"` etc. — not variant or scheme names

Load `gotchas.json` entries for your task

Load `rules.compact.md` + task bundle + targeted gotchas