/ss-dial

name: ss-dial
description: Turn ONE design axis up or down as a coordinated, deterministic transform — "denser", "sharper corners", "more muted", "bolder", "flatter", "livelier". Not a vibe the model reinterprets each time; a defined ramp that moves many tokens together, respects the guardrails (8px grid, a11y floors, single accent, nested-radius), updates the lock, and re-runs the gate. Use this when a human saying "more X" would otherwise get an inconsistent one-off.
argument-hint: "<axis> <direction>  — e.g. \"density denser\", \"radius sharper\", \"color more-muted\", \"weight bolder\""
allowed-tools: Read, Write, Edit, Grep, Glob, Bash

Dial an axis

Registry-first artifact boundary

When `.styleseed/project.json` and `.styleseed/artifacts/index.json` exist, resolve the requested artifact ID first, then read only `.styleseed/bundles/<artifact-id>.md` and `.styleseed/manifests/<artifact-id>.json`. Never fall back to the global legacy bundle for a registry project. Legacy projects may use `.styleseed/effective-rules.md` only when no registry exists.

"Make it more minimal" is something you can just *say* — the model already reads plain language. A skill only earns its place where **one word must move many tokens at once, in a coordinated way, without breaking a rule** — and where doing it by hand gives an inconsistent result (some tokens changed, the grid broken, a second accent introduced). That's what `/ss-dial` is: **not interpretation, but a deterministic ramp + guardrails + re-gate.**

If the request is a *mood word* ("more premium", "more editorial", "more playful"), that's not one axis — it's a *combination* of positions across several axes. Use **`/ss-restyle <preset>`** for those. `/ss-dial` moves exactly one axis.

When NOT to use

• A vague vibe the model can just apply from words ("cleaner", "nicer") → don't wrap it in a

skill; say it.

• A named aesthetic (Swiss / editorial / brutalist) → `/ss-restyle` (a preset of dial positions).
• Changing the accent *hue itself* (rebrand) → edit the lock's Key color directly, then re-derive.
• No `STYLESEED.md` lock yet → run `/ss-build` or `/ss-setup` first; there's nothing to dial from.

The mechanic (every axis)

1. **Read `STYLESEED.md`** — find the axis's current position (Mood/Density/Radius/Elevation/ Type scale/Font weight/Motion fields). If the lock doesn't record it, infer it from the code. 2. **Move ONE position** in the requested direction on that axis's ramp (below). "more X" = one step; an explicit target ("density: dense") jumps straight there. **Clamp at the ends** — you cannot dial past `dense` or below `airy`. If already at the end, say so and stop (this is why "each use makes it *more*" is bounded, not runaway). 3. **Apply the whole coordinated token set** for the new position across every file that uses those tokens — not just the one component in view. This is the point: system-wide, consistent. 4. **Respect the guardrails** (each axis lists its own). Never break a Golden Rule to satisfy a dial — if "denser" would push a touch control below 44px, stop at the floor and note it. 5. **Update `STYLESEED.md`** with the new position (so it persists and the next prompt obeys it). 6. **Re-run the Quality Gate** (`/ss-score`, loop to ≥ 80). A dial that drops the score below 80 is reverted or fixed, not shipped. Report: axis, old → new position, score.

---

The axes

1. Density — spacing rhythm + internal padding + type/line-height, together

Ramp: `airy → comfortable → compact → dense`. The page gutter stays `px-6`/`mx-6` always (fixed rule); density moves the *vertical rhythm, card interior, and reading scale*.

| Position | Section `space-y` | Card padding | Grid `gap` | Body line-height | Type scale | |---|---|---|---|---|---| | **airy** | `space-y-10` | `p-8` | `gap-8` | `leading-relaxed` | one step up (desktop-larger) | | **comfortable** | `space-y-6` | `p-6` | `gap-6` | `leading-normal` | surface default | | **compact** | `space-y-4` | `p-4` | `gap-4` | `leading-normal` | surface default, tighter headings | | **dense** | `space-y-4` | `p-4` | `gap-3` (12px half-step) | `leading-snug` on data | data-table scale |

**Guardrails:** stay on the 8px grid (only `p-2/4/6/8`, `gap-*` on grid or the 4px half-step — never invent `p-5`/`gap-2.5`); **touch controls stay ≥ 44px even at `dense`** (shrink padding, not tap targets); body never drops below the surface floor (desktop 16px). Dense is for data-heavy surfaces; don't dense-ify a marketing landing.

2. Hierarchy contrast — the size/weight gap between levels

Ramp: `subtle → balanced → strong → dramatic`. Moves the ratio between the hero and the body, plus display tracking.

| Position | Hero : body size ratio | Display weight | Display tracking | |---|---|---|---| | **subtle** | ~2:1 | 600 | `-0.01em` | | **balanced** | ~2.5:1 | 700 | `-0.02em` | | **strong** | ~3.2:1 | 700–800 | `-0.02em` | | **dramatic** | ~4:1 | 800 | `-0.03em` |

**Guardrails:** pick sizes from the Font Size table only (don't invent); body stays at the surface floor regardless; keep the number-to-unit 2:1 pairing intact; one focal element still dominates (dialing contrast up must not create two competing heroes).

3. Radius — the corner personality (categorical swap, not a slider)

Ramp: `sharp ↔ soft ↔ pill`. Swaps the **whole mapping table** as one set, never one component.

| Position | Controls (btn/input/chip) | Cards | Inner panels | |---|---|---|---| | **sharp** | 2–4px | 6–8px | 4–6px | | **soft** | 8–10px | 12–16px | 10–12px | | **pill** | full (9999px) | 20–24px | 14–16px |

**Guardrails:** one personality *everywhere* (sharp cards + pill buttons is the exact mixed-personality tell we ban); nested elements still follow `inner = outer − padding`.

4. Elevation / depth — how surfaces separate

Ramp: `flat → subtle → layered → lifted`. **Light and dark speak different languages** — apply the one that matches the theme.

| Position | Lig