Skill Tracer
Skills › Compound Engineering › ce-prototype › craft-floor.md

craft-floor.md

43 lines · skills/ce-prototype/references/craft-floor.md at 3449230

Open on GitHub
1# Craft floor
2
3Load this when the question is settled by seeing. It carries the floor the render has to clear and the rule for how avenues differ. A question settled by driving does not load it.
4
5The floor exists because a variant judged through a broken render is a false negative. Text the user cannot read, a control with no visible focus, copy that overflows at the width they are looking at — each of those gets read as "that direction is worse" when the direction was never the problem. Clearing the floor is what makes their judgment about the idea.
6

Craft floor

Load this when the question is settled by seeing. It carries the floor the render has to clear and the rule for how avenues differ. A question settled by driving does not load it.

The floor exists because a variant judged through a broken render is a false negative. Text the user cannot read, a control with no visible focus, copy that overflows at the width they are looking at — each of those gets read as "that direction is worse" when the direction was never the problem. Clearing the floor is what makes their judgment about the idea.

Raw lines 1 to 6
7## Apply only what the question puts in play
8
9Take the items the question's dimensions reach and leave the rest. A placement question does not acquire a motion moment or an empty state because they are listed here; a typographic direction does not need a loading state to be judged. Adding items the question does not turn on inflates the build past the dimension under test, which the rule against faking or overbuilding the dimension being tested already forbids.

Apply only what the question puts in play

Take the items the question's dimensions reach and leave the rest. A placement question does not acquire a motion moment or an empty state because they are listed here; a typographic direction does not need a loading state to be judged. Adding items the question does not turn on inflates the build past the dimension under test, which the rule against faking or overbuilding the dimension being tested already forbids.

Raw lines 7 to 10
11## The floor
13- **Contrast.** Body text at 4.5:1 against its background, large text (roughly 24px, or 19px bold and up) at 3:1. Controls, focus rings, and any graphic carrying meaning at 3:1. Tint secondary text from the surface it sits on rather than dropping it to gray.
14- **Measure.** Body text 65 to 75 characters a line. Wider reads as a wall; much narrower breaks the rhythm of reading.
15- **Spacing.** One rhythm across the surface, not per-component guesses. Group related things tightly and separate unrelated ones generously; a heading sits closer to the text it introduces than to the block above it.
16- **Type scale.** Steps that are obvious at a glance in size or weight. Two sizes four pixels apart read as a mistake rather than a hierarchy.
17- **States.** Whatever states the surface actually has: hover, focus, disabled, loading, error, empty. Show them with real content, at the shortest and longest values the product plausibly holds — not with placeholder text sized to fit.
18- **Keyboard focus.** Visible on every interactive element, and never removed without a replacement that is at least as clear.
19- **Motion.** At most one authored moment, and content is legible without it. Motion changes what is on screen; it does not reveal it for the first time. Scattered hover effects are not a motion decision.
20- **Copy.** Controls name the action they perform. Errors name what went wrong and what to do next. Placeholder copy is for placeholders, not for labels.
22Read the rendered result before handing it over — measured, not assumed. A stylesheet that should produce 4.5:1 and a screen that does are different claims.

The floor

  • Contrast. Body text at 4.5:1 against its background, large text (roughly 24px, or 19px bold and up) at 3:1. Controls, focus rings, and any graphic carrying meaning at 3:1. Tint secondary text from the surface it sits on rather than dropping it to gray.
  • Measure. Body text 65 to 75 characters a line. Wider reads as a wall; much narrower breaks the rhythm of reading.
  • Spacing. One rhythm across the surface, not per-component guesses. Group related things tightly and separate unrelated ones generously; a heading sits closer to the text it introduces than to the block above it.
  • Type scale. Steps that are obvious at a glance in size or weight. Two sizes four pixels apart read as a mistake rather than a hierarchy.
  • States. Whatever states the surface actually has: hover, focus, disabled, loading, error, empty. Show them with real content, at the shortest and longest values the product plausibly holds — not with placeholder text sized to fit.
  • Keyboard focus. Visible on every interactive element, and never removed without a replacement that is at least as clear.
  • Motion. At most one authored moment, and content is legible without it. Motion changes what is on screen; it does not reveal it for the first time. Scattered hover effects are not a motion decision.
  • Copy. Controls name the action they perform. Errors name what went wrong and what to do next. Placeholder copy is for placeholders, not for labels.

Read the rendered result before handing it over — measured, not assumed. A stylesheet that should produce 4.5:1 and a screen that does are different claims.

Raw lines 11 to 23
24## Make it specific, not only clean
26A surface can clear every item above and still be a template — the arrangement any product would get for any subject. That is the failure this floor exists to catch, so judge specificity as well as cleanliness.
28Treat these as evidence the arrangement was reached for rather than chosen, and rework rather than soften:
30- A full-width opening block with a centered headline, a subhead, and two buttons.
31- A row of equal cards, each an icon in a circle above a heading and a line of text.
32- A gradient behind headline text.
33- Small uppercase letter-spaced labels above every section.
34- One corner radius applied to every surface regardless of what the surface is.
35- A numbered sequence over things that are not a sequence.
37The test: with the product's name and copy removed, could a reader tell which product this is? If the honest answer is no, the direction has not been decided yet.

Make it specific, not only clean

A surface can clear every item above and still be a template — the arrangement any product would get for any subject. That is the failure this floor exists to catch, so judge specificity as well as cleanliness.

Treat these as evidence the arrangement was reached for rather than chosen, and rework rather than soften:

  • A full-width opening block with a centered headline, a subhead, and two buttons.
  • A row of equal cards, each an icon in a circle above a heading and a line of text.
  • A gradient behind headline text.
  • Small uppercase letter-spaced labels above every section.
  • One corner radius applied to every surface regardless of what the surface is.
  • A numbered sequence over things that are not a sequence.

The test: with the product's name and copy removed, could a reader tell which product this is? If the honest answer is no, the direction has not been decided yet.

Raw lines 24 to 38
39## How avenues differ
41The wide-run rule in `references/scoping.md` already requires distinct mechanisms rather than tweaks of one idea. On a seeing question that means the avenues differ by organizing principle — what governs the arrangement, what the eye is meant to do first, what the surface is behaving like. A palette swap or a typeface swap over one arrangement is one avenue shown twice.
43Say what each avenue's principle is before building it. If two of them resolve to the same sentence, one of them is not a separate avenue, and building both spends the run to give the user a choice they do not actually have.

How avenues differ

The wide-run rule in references/scoping.md already requires distinct mechanisms rather than tweaks of one idea. On a seeing question that means the avenues differ by organizing principle — what governs the arrangement, what the eye is meant to do first, what the surface is behaving like. A palette swap or a typeface swap over one arrangement is one avenue shown twice.

Say what each avenue's principle is before building it. If two of them resolve to the same sentence, one of them is not a separate avenue, and building both spends the run to give the user a choice they do not actually have.

Raw lines 39 to 43