variant

Topics in the source

• Variants
• Different answers, not different tints
• The floor every variant clears
• 1. Scope one piece
• 2. Learn the ground
• 3. Name the axis before writing code
• 4. Build it into the real page
• 5. Present the tradeoffs and stop

This skill takes one described piece of UI and builds three versions that differ on purpose. They go behind a picker in the real page, so you can flip between them and choose. It produces candidates and never ranks them. Reviewing existing UI is interface-review and better-interface, stress testing one component is break and working through a component's states is state-machine. Each variant is a different answer to the same brief, on an axis this collection owns: | Axis | Owner | What varies | | --- | --- | --- | | Structure | better-layout | Grouping, order, column count, what collapses | | Density | better-layout | Spacing scale, how much fits | | Emphasis | better-colors | Where filled color goes, what recedes | | Type | better-typography | Scale steps, weight contrast, measure | | Voice | better-writing | Labels, tone, how much copy | Pick one primary axis and give each variant a different position on it. The axis names the picker's group heading. Secondary choices follow from it rather than varying on their own. A dense variant may need a smaller type step, and that is coherence, not a second axis. Before a variant enters the picker it clears better-interface's escalation tri

This is an excerpt. Refer to the complete source and its current requirements.