# Ss Restyle > 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. - Skill: `majiayu000/ss-restyle-2` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds add majiayu000/ss-restyle-2` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ss-restyle-2/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/ss-restyle-2 --- # 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 1. **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. 2. **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. 3. **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. 4. **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. 5. **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.