| name | ss-restyle |
| description | Re-style a project to a named aesthetic — swiss, editorial, technical, warm-dtc, minimal-mono, brutalist-lite. A preset is a *coordinate* across the dial axes (radius + density + color + weight + motion) plus a font, accent family, and one signature move — applied coherently as a single identity, written to the lock, and re-gated. This is for mood words ("more editorial") that aren't one axis; for a single axis use /ss-dial. |
| argument-hint | <preset> — swiss | editorial | technical | warm-dtc | minimal-mono | brutalist-lite |
| allowed-tools | Read, Write, Edit, Grep, Glob, Bash |
Re-style to a preset
A mood word — "make it more editorial", "give it a Swiss feel" — is not one axis. It's a
defined position across several (this radius and that density and that color
temperature and that weight and that motion), tied together with a font and one
signature move. Left to plain language, the model resolves it differently every time and half
the axes drift. /ss-restyle pins the whole coordinate at once, coherently, and re-gates.
Each preset below is a full identity, not a filter you stack on top of another. Applying two
presets = the mixed-personality tell we ban. Pick one; it replaces the look.
When NOT to use
- Moving a single axis ("denser", "sharper", "more muted") →
/ss-dial.
- No
STYLESEED.md yet → /ss-build / /ss-setup first (a restyle rewrites a lock; it needs one).
- A brand with a fixed hex → keep the accent, use
/ss-dial for feel; don't let a preset
overwrite a real brand color (presets suggest an accent family — honor an existing lock's hue).
The mechanic
- Read
STYLESEED.md. Keep anything the user has explicitly locked (a real brand hex, a
required font) — a preset fills the unopinionated axes, it doesn't overrule a deliberate choice.
- Set the preset's coordinate — apply each field below via the same coordinated token sets
/ss-dial uses (radius mapping table, density ramp, color HSL + tint re-derive, weight ramp,
motion seed), plus the font and elevation language. System-wide, every file — grep the tokens.
- Hold the modern floor (§CC-9d). Distinctive must not read dated: white/fresh base, serif
as seasoning (one display moment, never body), keep the air. A preset that turns into a beige
serif brochure has failed, not succeeded.
- Rewrite the lock — Skin/Mood/Accent/Font/Radius/Elevation/Motion/Type + a one-line
Signature move. This is now the source of truth for every later prompt.
- Re-run the Quality Gate (
/ss-score, loop to ≥ 80). Report: preset applied, the coordinate,
the score. A restyle that scores < 80 is fixed before presenting — a named look is no excuse
for incoherence.
The presets (coordinate = radius · density · color · weight · motion)
swiss — grid honesty, typographic confidence
sharp · compact · muted-cool · bold · calm
- Font: a neutral grotesk (Inter / Helvetica Now feel), tight tracking on display.
- Accent: restrained — near-neutral, or a single strong signal (classic Swiss red
#D6291E)
used sparingly. One accent, lots of black/white/grey.
- Elevation: flat — hairline borders and whitespace do the separating, not shadows.
- Signature: a strong asymmetric grid, oversized left-aligned headline, generous but
structured space. Numbers and labels align to the grid. No ornament.
editorial — magazine, serif as seasoning
soft · airy · warm-muted · regular · calm
- Font: a serif display (Fraunces / Newsreader) for headlines only, Inter/neutral sans for body.
- Accent: a warm muted ink — oxblood
#7B2D26, forest #2F4A3C, or deep amber. Muted, not loud.
- Elevation: subtle; content leads, chrome recedes.
- Signature: one oversized serif headline moment, a wide reading measure (
max-w-2xl/3xl),
strong first-paragraph emphasis. Modern floor: white base, serif is the seasoning — body
stays sans, don't tip into a paper-and-serif pamphlet (§CC-9d).
technical — dark, dense, instrument-panel
sharp · dense · cool · regular · still (dark-first)
- Font: Geist / IBM Plex Sans; mono (Plex Mono / Geist Mono) for IDs, SHAs, timestamps, metrics.
- Accent: one signal hue on dark — teal
#2DD4BF, lime, or amber — used for state, not decoration.
- Elevation: the dark tonal ramp — page < card < raised by surface lightness + hairline
borders. No drop shadows.
- Signature: high data density (dense dial), mono numerics with
tabular-nums, tonal
surfaces, minimal motion (still). Chrome scale: h1 22–24px, KPI 48–64px.
warm-dtc — consumer, friendly, product-forward
pill · airy · warm-vivid · bold · lively
- Font: a rounded/friendly grotesk; large, confident.
- Accent: warm and vivid — terracotta
#C14E24, coral, or amber-brown. (Cool blues read
corporate here — avoid.)
- Elevation: subtle → layered; soft, inviting depth.
- Signature: big product imagery, pill controls, generous space,
lively/Spring micro-motion
on CTAs. One warm accent; if it collides with the success green, resolve per the lock's
Semantic resolve.
minimal-mono — whitespace and restraint
soft · airy · muted · light · calm
- Font: one neutral sans; weight and size do all the work (no second family).
- Accent: near-monochrome — a single restrained accent used rarely (one CTA, one active state).
- Elevation: flat → subtle; mostly hairlines and air.
- Signature: dominant whitespace, light weights, a single small accent moment, one clear
focal element. The discipline is the design — resist adding anything.
brutalist-lite — raw, high-contrast, but still coherent
sharp · comfortable · vivid · bold · snap
- Font: a bold grotesk, oversized headlines; can go heavier than usual.
- Accent: one loud hue against black/white. Still one accent — loud ≠ rainbow.
- Elevation: flat with hard 1–2px borders as the personality (borders do separation here,
which is allowed as the deliberate style — no soft shadows mixed in).
- Signature: heavy borders, blocky high-contrast sections, snappy instant motion, exposed
structure. "lite" = still coherent: one accent, one border weight, states and a11y intact,
gate ≥ 80. Raw is the look; broken is not.
Rules
- One preset replaces the look — never stack two (that's the mixed-personality tell). To
nudge from a preset, use
/ss-dial on a single axis afterward.
- Honor deliberate locks. A real brand hex or a user-chosen font survives a restyle; the
preset fills the rest. Say what you kept.
- System-wide. Apply the coordinate across every file, not the screen in view.
- Modern floor always (§CC-9d). Distinctive must not cost freshness — white/fresh base, serif
as seasoning, keep the air. Dated ≠ distinctive.
- Persist + re-gate. Rewrite
STYLESEED.md to the new coordinate, then /ss-score to ≥ 80.
Report the preset, the coordinate, and the score.