43 lines
3.7 KiB
Markdown
43 lines
3.7 KiB
Markdown
# Craft floor
|
||
|
||
Load this after the direction is settled, and build without announcing the checklist. A pinned brief or the committed visual world overrides anything here; your own habit does not. When the design hook is active it already enforces the mechanical checks below as you edit: act on its findings instead of re-auditing each rule.
|
||
|
||
## Verify
|
||
|
||
Each of these is a check on the built result, not an intention. Run them together in the batched inspection rounds, not as separate screenshot trips; the checks share one render.
|
||
|
||
- **Contrast:** body and placeholder text ≥4.5:1, large text ≥3:1. On colored surfaces tint secondary text from that hue or the foreground; never gray.
|
||
- **Depth:** shadows carry an offset and a soft blur. A zero-offset colored halo is decoration.
|
||
- **Spacing:** tight groups, generous separation, more space above a heading than below it. Read the computed values.
|
||
- **Type:** body measure 65–75ch, display max 6rem, tracking floor -0.04em, balanced headings, obvious scale and weight steps. Run the real copy at every breakpoint and fix what overflows.
|
||
- **Motion:** one authored moment, not scattered effects and not one identical entrance on every section. Exponential ease-out from an already-visible default. Reach past transform and opacity: blur, backdrop-filter, clip-path, mask, and shadow belong to the palette when they stay smooth.
|
||
- **States:** hover, disabled, loading, error, empty. Plus real content, working controls, responsive composition, keyboard focus.
|
||
- **Copy:** the product's own language. Controls name their action; errors name the problem and the recovery.
|
||
- **Coverage:** every brief requirement present and findable within seconds.
|
||
|
||
## Refuse
|
||
|
||
These are the category's defaults, not bans: the brief's own words can earn any of them. Reaching for one when the axis is free means you were not deciding; recognizing that means rewriting the element, not softening it.
|
||
|
||
Page scaffolds:
|
||
|
||
- Same-size cards of icon plus heading plus text as the page structure. Cards are the lazy container; nested cards are always wrong.
|
||
- The hero-metric template: big number, small label, supporting stats, accent.
|
||
- A kicker or eyebrow above a heading. This one is a ban, not a default: no brief earns it back. The heading carries its own weight; delete the label and let the heading speak.
|
||
- Section numbers (01 / 02 / 03) unless the sequence itself carries information the reader needs.
|
||
- A modal for a task that needs neither interruption nor protected focus.
|
||
|
||
Surface habits:
|
||
|
||
- Gradient text. Emphasis comes from weight or size.
|
||
- Glass and blur as decoration rather than as a specific effect.
|
||
- A colored `border-left` or `border-right` above 1px on cards, list items, callouts, or alerts.
|
||
- Hard offset shadows (`box-shadow: 4px 4px 0`) outside a world that is actually neobrutalist. The zero-blur block shadow is a costume, not a depth system; a world that did not choose it never earns it as a default.
|
||
- Sparklines, progress rings, and soft-shadowed rounded rectangles standing in for content.
|
||
- Monospace as a costume for "technical" rather than for code, data, or measurement.
|
||
- A system display face (Impact, Arial Black, the platform sans) as the display voice of an own-world page. Source and self-host a face whose character matches the approved lettering; the closest installed font is a failure, not a fallback.
|
||
- Unicode glyphs or emoji standing in for an icon system. Icons are drawn, from a real library or authored SVG, in one consistent stroke and weight.
|
||
- Light or dark picked by category. Pick it from the use scene: who, where, under what ambient light.
|
||
|
||
The floor holds the mechanics; it never picks the direction. With every check green, spend the page on the committed world, and when torn between refined and committed, commit.
|