git:20260418.504684e to git:20260705.37f48d9

14 added, 16 removed. Audit A to A.

---

name: quieter

- description: "Tone down visual weight — fewer accents, softer type, less motion. Invoke when the user asks for quieter on their UI, or mentions 'quieter' alongside design / UI / frontend work."

+ description: "Tone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear. Use when the UI feels loud, busy, or over-designed, or when the user says "quieter", "more restrained", "simpler", or "tone it down". Invoke when the user asks for quieter on their UI, or mentions 'quieter' alongside design / UI / frontend work."

---

-

+

**Context:** this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

- Quiet the UI at the target the user described. Load the `ui-craft` skill.

+ Make the UI at `the target the user described` quieter. Load the `ui-craft` skill and read `references/craft-intent.md`.

- **Overlap flag**: `/quieter` is about visual *weight* (accents, type, shadows, motion). `/distill` is about *content and structure* (cutting sections, words, props). If the UI is shouting because there's too much of it, run `/distill` first.

+ **Reduce amplitude without gutting hierarchy.** Calm ≠ boring.

- **Pass in order:**

+ **Apply in order (edit code directly):**

- 1. **Count accents per viewport.** Cut to 1-3. The primary CTA keeps its accent; everything else goes neutral unless it's a true semantic state (success/warning/danger on a real status).

- 2. **Soften type.** Headings: weight 800 → 600, size 72 → 56, tracking -0.04em → -0.02em. Don't remove hierarchy — compress the range.

- 3. **Depth.** Replace hard drop shadows with subtle ambient + direct (see `references/modern-css.md`), or switch to 1px borders. Never both.

- 4. **Motion.** Remove any animation that isn't communicating state or hierarchy. Decorative scroll reveals, idle float/bob, mouse-tracking glows → gone.

- 5. **Color.** Mute any purely decorative color. Background patterns, tinted cards without meaning, colored left borders on every list item → gone.

- 6. **Density.** If every section is full-bleed and high-contrast, let some breathe — increase section padding, reduce contrast on secondary surfaces.

+ 1. **Declare an updated Craft Read** — one line: what softened.

+ 2. **Lower DESIGN_VARIANCE** by −1–2 (floor 2). Simplify asymmetric breaks; return to clearer grid rhythm where layout was experimental.

+ 3. **Lower MOTION_INTENSITY** by −1–2 (floor 2). Remove scroll reveals and stagger; keep hover/focus only.

+ 4. **Visual weight** — compress display sizes one step (e.g. 56→48px); reduce shadow depth to hairline or ambient-only; fewer bordered containers.

+ 5. **Color** — pull accent placements toward the 3 minimum; neutralize decorative tints; no new hues.

+ 6. **Cut decorative motion** — idle animations, parallax, floating elements with no job.

- **Knob awareness (MOTION_INTENSITY):**

- - `MOTION_INTENSITY 8+` → the user explicitly picked high motion. Warn: "user picked high motion; `/quieter` will conflict with intent." Ask before stripping motion.

- - `MOTION_INTENSITY ≤ 3` → motion is already minimal; focus on type and color.

+ **Preserve:** primary hierarchy, one CTA level, accessibility, states, signature detail only if it carries meaning (else simplify it).

- **References to read**: `references/color.md` (accent discipline), `references/typography.md` (weight + tracking), `references/animation.md` (Decision Ladder — remove what fails it).

+ **Overlap:** for structural cuts (sections, copy), also apply `/distill` logic. For color strategy, see `/colorize`.

- **Output**: edit code directly. Print the Review Format table. Flag anything you left loud on purpose and why.

+ **Output:** edit code. Print Review Format table. End with the updated Craft Read line.