mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-11 21:57:14 +03:00
feat(skill): rename register from "editorial" to "brand"
"editorial" was doing semantic double duty — naming the strategic
distinction (design IS the product) AND a specific visual aesthetic
(editorial magazines, broadsheets, serif display, italic drop caps).
Models pattern-matched the aesthetic and defaulted to it on every
brand brief, producing magazine-shaped landing pages for hiking
brands, tech tools, restaurants.
The register name now describes the SURFACE KIND, not an aesthetic.
Brand covers every visual lane — tech-minimal, luxury, editorial-
magazine, consumer-warm, brutalist-grid, hand-drawn — each with
legitimate voice within the register.
## Changes
- `reference/editorial.md` → `reference/brand.md`. Content rewritten:
broadened typography guidance (pairing shapes per brand genre,
single-family commitment is valid), broadened color references
(Stripe, Vercel, Liquid Death alongside Klim, Condé Nast), added
a second slop test ("name your aesthetic lane") to prevent drift
into editorial-magazine defaults, added brand ban against the
drift itself.
- SKILL.md: register names brand/product; load brand.md.
- teach.md: register values brand/product; signals renamed; example
principles no longer use "editorial over marketing" phrasing.
- Six sub-commands (animate/bolder/colorize/delight/layout/quieter):
per-register subsections flipped Editorial: → Brand:.
- product.md: cross-references updated.
- live.md: register reference updated; density axis no longer uses
"editorial" as a synonym for "dense".
- typeset.md: per-register paragraph generalised beyond serif+sans
pairing.
- CLAUDE.md: architecture section rewritten; kept "editorial
wrapper" content-authoring term as-is (different meaning).
## Legacy handling
- `editorial` is accepted as an alias for `brand` on PRODUCT.md's
register field — agents treat it as `brand` without asking.
- Documented in SKILL.md setup section and CLAUDE.md.
## What's unchanged
- Register identification priority (task cue → surface → PRODUCT.md).
- Permission structure (brand can go big, product stays restrained).
- Shared design laws, absolute bans, color strategy vocabulary.
- Framework fixtures and tests.
Full build clean, test suite passes.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
99cccc2f9b
commit
562f7361c3
@@ -54,13 +54,15 @@ If DESIGN.md is missing: nudge once per session (*"Run `/impeccable document` fo
|
||||
|
||||
### 2. Register
|
||||
|
||||
Every design task is **editorial** (marketing, landing, brand, content — design IS the product) or **product** (app UI, admin, dashboard, tool — design SERVES the product).
|
||||
Every design task is **brand** (marketing, landing, campaign, long-form content, portfolio — design IS the product) or **product** (app UI, admin, dashboard, tool — design SERVES the product).
|
||||
|
||||
Identify before designing. Priority: (1) cue in the task itself ("landing page" vs "dashboard"); (2) the surface in focus (the page, file, or route being worked on); (3) `register` field in PRODUCT.md. First match wins.
|
||||
|
||||
If PRODUCT.md lacks the `register` field (legacy), infer it once from its "Users" and "Product Purpose" sections, then cache the inferred value for the session. Suggest the user run `/impeccable teach` to add the field explicitly.
|
||||
|
||||
Load the matching reference: [reference/editorial.md](reference/editorial.md) or [reference/product.md](reference/product.md). The shared design laws below apply to both.
|
||||
Legacy value: `editorial` is an accepted alias for `brand` (the register was renamed in a recent version). Treat `editorial` as `brand` without asking.
|
||||
|
||||
Load the matching reference: [reference/brand.md](reference/brand.md) or [reference/product.md](reference/product.md). The shared design laws below apply to both.
|
||||
|
||||
## Shared design laws
|
||||
|
||||
@@ -71,10 +73,10 @@ Apply to every design, both registers. Match implementation complexity to the ae
|
||||
- Use OKLCH. Reduce chroma as lightness approaches 0 or 100 — high chroma at extremes looks garish.
|
||||
- Never use `#000` or `#fff`. Tint every neutral toward the brand hue (chroma 0.005–0.01 is enough).
|
||||
- Pick a **color strategy** before picking colors. Four steps on the commitment axis:
|
||||
- **Restrained** — tinted neutrals + one accent ≤10%. Product default; editorial minimalism.
|
||||
- **Committed** — one saturated color carries 30–60% of the surface. Editorial default for brand-owned pages.
|
||||
- **Full palette** — 3–4 named roles, each used deliberately. Editorial campaigns; product data viz.
|
||||
- **Drenched** — the surface IS the color. Editorial heroes, campaign pages.
|
||||
- **Restrained** — tinted neutrals + one accent ≤10%. Product default; brand minimalism.
|
||||
- **Committed** — one saturated color carries 30–60% of the surface. Brand default for identity-driven pages.
|
||||
- **Full palette** — 3–4 named roles, each used deliberately. Brand campaigns; product data viz.
|
||||
- **Drenched** — the surface IS the color. Brand heroes, campaign pages.
|
||||
- The "one accent ≤10%" rule is Restrained only. Committed / Full palette / Drenched exceed it on purpose. Don't collapse every design to Restrained by reflex.
|
||||
|
||||
### Theme
|
||||
|
||||
@@ -6,7 +6,7 @@ Analyze a feature and strategically add animations and micro-interactions that e
|
||||
|
||||
## Register
|
||||
|
||||
Editorial: orchestrated page-load sequences, staggered reveals, scroll-driven animation. Motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions.
|
||||
Brand: orchestrated page-load sequences, staggered reveals, scroll-driven animation. Motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions.
|
||||
|
||||
Product: 150–250 ms on most transitions. Motion conveys state — feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ Increase visual impact and personality in designs that are too safe, generic, or
|
||||
|
||||
## Register
|
||||
|
||||
Editorial: "bolder" means distinctive. Extreme scale, unexpected color, typographic risk, committed POV.
|
||||
Brand: "bolder" means distinctive. Extreme scale, unexpected color, typographic risk, committed POV.
|
||||
|
||||
Product: "bolder" rarely means theatrics — those undermine trust. It means stronger hierarchy, clearer weight contrast, one sharper accent, more committed density. The amplification is in clarity, not drama.
|
||||
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
# Brand register
|
||||
|
||||
When design IS the product: brand sites, landing pages, marketing surfaces, campaign pages, portfolios, long-form content, about pages. The deliverable is the design itself — a visitor's impression is the thing being made.
|
||||
|
||||
The register spans every genre. A tech brand (Stripe, Linear, Vercel). A luxury brand (a hotel, a fashion house). A consumer product (a restaurant, a travel site, a CPG packaging page). A creative studio, an agency portfolio, a band's album page. They all share the stance — *communicate, not transact* — and diverge wildly in aesthetic. Don't collapse them into a single look.
|
||||
|
||||
## The brand slop test
|
||||
|
||||
If someone could look at this and say "AI made that" without hesitation, it's failed. The bar is distinctiveness — a visitor should ask "how was this made?", not "which AI made this?"
|
||||
|
||||
Brand isn't a neutral register. AI-generated landing pages have flooded the internet, and average is no longer findable. Restraint without intent now reads as mediocre, not refined. Brand surfaces need a POV, a specific audience, a willingness to risk strangeness. Go big or go home.
|
||||
|
||||
**The second slop test: aesthetic lane.** Before committing to moves, name the reference. A Klim-style specimen page is one lane; Stripe-minimal is another; Liquid-Death-acid-maximalism is another. Don't drift into editorial-magazine aesthetics on a brief that isn't editorial. A hiking brand with Cormorant italic drop caps has the wrong register within the register.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font selection procedure
|
||||
|
||||
Every project. Never skip.
|
||||
|
||||
1. Read the brief. Write three concrete brand-voice words — not "modern" or "elegant," but "warm and mechanical and opinionated" or "calm and clinical and careful." Physical-object words.
|
||||
2. List the three fonts you'd reach for by reflex. If any appear in the reflex-reject list below, reject them — they are training-data defaults and they create monoculture.
|
||||
3. Browse a real catalog (Google Fonts, Pangram Pangram, Future Fonts, Adobe Fonts, ABC Dinamo, Klim, Velvetyne) with the three words in mind. Find the font for the brand as a *physical object* — a museum caption, a 1970s terminal manual, a fabric label, a cheap-newsprint children's book, a concert poster, a receipt from a mid-century diner. Reject the first thing that "looks designy."
|
||||
4. Cross-check. "Elegant" is not necessarily serif. "Technical" is not necessarily sans. "Warm" is not Fraunces. If the final pick lines up with the original reflex, start over.
|
||||
|
||||
### Reflex-reject list
|
||||
|
||||
Training-data defaults. Ban list — look further:
|
||||
|
||||
Fraunces · Newsreader · Lora · Crimson · Crimson Pro · Crimson Text · Playfair Display · Cormorant · Cormorant Garamond · Syne · IBM Plex Mono · IBM Plex Sans · IBM Plex Serif · Space Mono · Space Grotesk · Inter · DM Sans · DM Serif Display · DM Serif Text · Outfit · Plus Jakarta Sans · Instrument Sans · Instrument Serif
|
||||
|
||||
### Pairing and voice
|
||||
|
||||
Distinctive + refined is the goal — the specific shape depends on the brand:
|
||||
|
||||
- **Editorial / long-form / luxury**: display serif + sans body (a magazine shape).
|
||||
- **Tech / dev tools / fintech**: one committed sans, usually; custom-tight tracking, strong weight contrast inside a single family.
|
||||
- **Consumer / food / travel**: warmer pairings, often a humanist sans plus a script or display serif.
|
||||
- **Creative studios / agencies**: rule-breaking welcome — mono-only, or display-only, or custom-drawn type as voice.
|
||||
|
||||
Two families minimum is the rule *only* when the voice needs it. A single well-chosen family with committed weight/size contrast is stronger than a timid display+body pair.
|
||||
|
||||
Vary across projects. If the last brief was a serif-display landing page, this one isn't.
|
||||
|
||||
### Scale
|
||||
|
||||
Modular scale, fluid `clamp()` for headings, ≥1.25 ratio between steps. Flat scales (1.1× apart) read as uncommitted.
|
||||
|
||||
Light text on dark backgrounds: add 0.05–0.1 to line-height. Light type reads as lighter weight and needs more breathing room.
|
||||
|
||||
## Color
|
||||
|
||||
Brand surfaces have permission for Committed, Full palette, and Drenched strategies. Use them. A single saturated color spread across a hero is not excess — it's voice. A beige-and-muted-slate landing page ignores the register.
|
||||
|
||||
- Name a real reference before picking a strategy. "Klim Type Foundry #ff4500 orange drench", "Stripe purple-on-white restraint", "Liquid Death acid-green full palette", "Mailchimp yellow full palette", "Condé Nast Traveler muted navy restraint", "Vercel pure black monochrome". Unnamed ambition becomes beige.
|
||||
- Palette IS voice. A calm brand and a restless brand should not share palette mechanics.
|
||||
- When the strategy is Committed or Drenched, the color is load-bearing. Don't hedge with neutrals around the edges — commit.
|
||||
- Don't converge across projects. If the last brand surface was restrained-on-cream, this one is not.
|
||||
|
||||
## Layout
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm — generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed" — the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
Brand surfaces lean on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
|
||||
|
||||
**When the brief implies imagery (restaurants, hotels, magazines, photography, hobbyist communities, food, travel, fashion, product), you must ship imagery.** Zero images is a bug, not a design choice. "Restraint" is not an excuse.
|
||||
|
||||
- **For greenfield work without local assets, use stock imagery** — Unsplash is the default. The URL shape is `https://images.unsplash.com/photo-{id}?auto=format&fit=crop&w=1600&q=80`. Pick real Unsplash photo IDs you're confident exist (`photo-1559339352-11d035aa65de`, `photo-1590490360182-c33d57733427`, etc.); if unsure, pick fewer photos but don't substitute colored `<div>` placeholders.
|
||||
- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
|
||||
- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
|
||||
- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
|
||||
|
||||
Tech / dev-tool brands are the exception where zero imagery can be correct — a developer landing page often carries its voice through typography, code samples, diagrams. Know which kind of brand you're working on.
|
||||
|
||||
## Motion
|
||||
|
||||
- One well-orchestrated page-load with staggered reveals beats scattered micro-interactions — when the brand invites it. Tech-minimal brands often skip entrance motion entirely; the restraint is the voice.
|
||||
- For collapsing/expanding sections, transition `grid-template-rows` rather than `height`.
|
||||
|
||||
## Brand bans (on top of the shared absolute bans)
|
||||
|
||||
- Monospace as lazy shorthand for "technical / developer." If the brand isn't technical, mono reads as costume.
|
||||
- Large rounded-corner icons above every heading. Screams template.
|
||||
- Single-family pages that picked the family by reflex, not voice. (A single family chosen deliberately is fine.)
|
||||
- All-caps body copy. Reserve caps for short labels and headings.
|
||||
- Timid palettes and average layouts. Safe = invisible.
|
||||
- Zero imagery on a brief that implies imagery (restaurant, hotel, food, travel, fashion, photography, hobbyist). Colored blocks where a hero photo belongs.
|
||||
- Defaulting to editorial-magazine aesthetics (display serif + italic + drop caps + broadsheet grid) on briefs that aren't magazine-shaped. Editorial is ONE aesthetic lane, not the default brand aesthetic.
|
||||
|
||||
## Brand permissions
|
||||
|
||||
Brand can afford things product can't. Take them.
|
||||
|
||||
- Ambitious first-load motion. Reveals, scroll-triggered transitions, typographic choreography.
|
||||
- Single-purpose viewports. One dominant idea per fold, long scroll, deliberate pacing.
|
||||
- Typographic risk. Enormous display type, unexpected italic cuts, mixed cases, hand-drawn headlines, a single oversize word as a hero.
|
||||
- Unexpected color strategies. Palette IS voice — a calm brand and a restless brand should not share palette mechanics.
|
||||
- Art direction per section. Different sections can have different visual worlds if the narrative demands it. Consistency of voice beats consistency of treatment.
|
||||
@@ -6,7 +6,7 @@ Strategically introduce color to designs that are too monochromatic, gray, or la
|
||||
|
||||
## Register
|
||||
|
||||
Editorial: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop.
|
||||
Brand: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop.
|
||||
|
||||
Product: semantic-first. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen.
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ Identify opportunities to add moments of joy, personality, and unexpected polish
|
||||
|
||||
## Register
|
||||
|
||||
Editorial: delight can be distributed — copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
|
||||
Brand: delight can be distributed — copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
|
||||
|
||||
Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
|
||||
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
# Editorial register
|
||||
|
||||
When design IS the product: marketing pages, landing pages, brand sites, editorial content, campaign pages, portfolios.
|
||||
|
||||
## The editorial slop test
|
||||
|
||||
If someone could look at this and say "AI made that" without hesitation, it's failed. The bar is distinctiveness — a reader should ask "how was this made?", not "which AI made this?"
|
||||
|
||||
Editorial isn't a neutral register. AI-generated landing pages have flooded the internet, and average is no longer findable. Restraint without intent now reads as mediocre, not refined. Editorial has to take a POV, commit to a specific audience, risk strangeness. Go big or go home.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font selection procedure
|
||||
|
||||
Every project. Never skip.
|
||||
|
||||
1. Read the brief. Write three concrete brand-voice words — not "modern" or "elegant," but "warm and mechanical and opinionated" or "calm and clinical and careful." Physical-object words.
|
||||
2. List the three fonts you'd reach for by reflex. If any appear in the reflex-reject list below, reject them — they are training-data defaults and they create monoculture.
|
||||
3. Browse a real catalog (Google Fonts, Pangram Pangram, Future Fonts, Adobe Fonts, ABC Dinamo, Klim, Velvetyne) with the three words in mind. Find the font for the brand as a *physical object* — a museum caption, a 1970s terminal manual, a fabric label, a cheap-newsprint children's book. Reject the first thing that "looks designy."
|
||||
4. Cross-check. "Elegant" is not necessarily serif. "Technical" is not necessarily sans. "Warm" is not Fraunces. If the final pick lines up with the original reflex, start over.
|
||||
|
||||
### Reflex-reject list
|
||||
|
||||
Training-data defaults. Ban list — look further:
|
||||
|
||||
Fraunces · Newsreader · Lora · Crimson · Crimson Pro · Crimson Text · Playfair Display · Cormorant · Cormorant Garamond · Syne · IBM Plex Mono · IBM Plex Sans · IBM Plex Serif · Space Mono · Space Grotesk · Inter · DM Sans · DM Serif Display · DM Serif Text · Outfit · Plus Jakarta Sans · Instrument Sans · Instrument Serif
|
||||
|
||||
### Pairing
|
||||
|
||||
Distinctive display font + refined body font. Two families minimum. Vary across projects — if the last one was a serif display, this one isn't.
|
||||
|
||||
### Scale
|
||||
|
||||
Modular scale, fluid `clamp()` for headings, ≥1.25 ratio between steps. Flat scales (1.1× apart) read as uncommitted.
|
||||
|
||||
Light text on dark backgrounds: add 0.05–0.1 to line-height. Light type reads as lighter weight and needs more breathing room.
|
||||
|
||||
## Color
|
||||
|
||||
Editorial has permission for Committed, Full palette, and Drenched strategies. Use them. A single saturated color spread across a hero is not excess — it's voice. A beige-and-muted-slate landing page ignores the register.
|
||||
|
||||
- Name a real reference before picking a strategy. "Klim Type Foundry #ff4500 orange drench", "Mailchimp yellow full palette", "Condé Nast Traveler muted navy restraint". Unnamed ambition becomes beige.
|
||||
- Palette IS voice. A calm site and a restless site should not share palette mechanics.
|
||||
- When the strategy is Committed or Drenched, the color is load-bearing. Don't hedge with neutrals around the edges — commit.
|
||||
- Don't converge across projects. If the last editorial was restrained-on-cream, this one is not.
|
||||
|
||||
## Layout
|
||||
|
||||
- Asymmetric compositions. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm — generous separations, tight groupings.
|
||||
- Don't center everything. Left-aligned in asymmetric compositions feels more designed.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
Editorial register leans on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
|
||||
|
||||
**When the brief implies imagery (restaurants, hotels, magazines, photography, hobbyist communities, food, travel, fashion, product), you must ship imagery.** Zero images is a bug, not a design choice. "Restraint" is not an excuse.
|
||||
|
||||
- **For greenfield work without local assets, use stock imagery** — Unsplash is the default. The URL shape is `https://images.unsplash.com/photo-{id}?auto=format&fit=crop&w=1600&q=80`. Pick real Unsplash photo IDs you're confident exist (`photo-1559339352-11d035aa65de`, `photo-1590490360182-c33d57733427`, etc.); if unsure, pick fewer photos but don't substitute colored `<div>` placeholders.
|
||||
- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
|
||||
- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
|
||||
- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
|
||||
|
||||
## Motion
|
||||
|
||||
- One well-orchestrated page-load with staggered reveals beats scattered micro-interactions.
|
||||
- For collapsing/expanding sections, transition `grid-template-rows` rather than `height`.
|
||||
|
||||
## Editorial bans (on top of the shared absolute bans)
|
||||
|
||||
- Monospace as lazy shorthand for "technical / developer."
|
||||
- Large rounded-corner icons above every heading. Screams template.
|
||||
- Single-font-family pages.
|
||||
- All-caps body copy. Reserve caps for short labels and headings.
|
||||
- Timid palettes and average layouts. Safe = invisible.
|
||||
- Zero imagery on a brief that implies imagery (restaurant, hotel, food, travel, fashion, photography, hobbyist). Colored blocks where a hero photo belongs.
|
||||
|
||||
## Editorial permissions
|
||||
|
||||
Editorial can afford things product can't. Take them.
|
||||
|
||||
- Ambitious first-load motion. Reveals, scroll-triggered transitions, typographic choreography.
|
||||
- Single-purpose viewports. One dominant idea per fold, long scroll, deliberate pacing.
|
||||
- Typographic risk. Enormous display type, unexpected italic cuts, mixed cases, expressive pairings.
|
||||
- Unexpected color strategies. Palette IS voice — a calm site and a restless site should not share palette mechanics.
|
||||
- Art direction per section. Different sections can have different visual worlds if the narrative demands it. Consistency of voice beats consistency of treatment.
|
||||
@@ -4,7 +4,7 @@ Assess and improve layout and spacing that feels monotonous, crowded, or structu
|
||||
|
||||
## Register
|
||||
|
||||
Editorial: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast — tight groupings paired with generous separations.
|
||||
Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast — tight groupings paired with generous separations.
|
||||
|
||||
Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
|
||||
|
||||
|
||||
@@ -94,7 +94,7 @@ All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below.
|
||||
|
||||
### 3. Load the action's reference
|
||||
|
||||
If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`editorial.md` or `product.md`). Do not load a sub-command reference.
|
||||
If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference.
|
||||
|
||||
Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/<action>.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output.
|
||||
|
||||
@@ -116,7 +116,7 @@ Then commit each variant to a different **primary axis** of difference:
|
||||
2. **Layout topology** — stacked / side-by-side / grid / asymmetric / overlay
|
||||
3. **Typographic system** — pairing, scale ratio, case/weight strategy
|
||||
4. **Color strategy** — Restrained / Committed / Full palette / Drenched
|
||||
5. **Density** — minimal / dense / editorial
|
||||
5. **Density** — minimal / comfortable / dense
|
||||
6. **Structural decomposition** — merge, split, progressive disclosure
|
||||
|
||||
Three variants → three DIFFERENT primary axes, not three riffs on color.
|
||||
|
||||
@@ -13,7 +13,7 @@ Product UI's failure mode isn't flatness, it's strangeness without purpose: over
|
||||
- **System fonts are legitimate.** `-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif` gives you native feel on every platform. Inter is the common cross-platform default for a reason.
|
||||
- **One family is often right.** Product UIs don't need display/body pairing. A well-tuned sans carries headings, buttons, labels, body, data.
|
||||
- **Fixed rem scale, not fluid.** Clamp-sized headings don't serve product UI. Users view at consistent DPI, and a fluid h1 that shrinks in a sidebar looks worse, not better.
|
||||
- **Tighter scale ratio.** 1.125–1.2 between steps is typical. More type elements here than in editorial; exaggerated contrast creates noise.
|
||||
- **Tighter scale ratio.** 1.125–1.2 between steps is typical. More type elements here than on brand surfaces; exaggerated contrast creates noise.
|
||||
- **Line length still applies for prose** (65–75ch). Data and compact UI can run denser — tables at 120ch+ are fine.
|
||||
|
||||
## Color
|
||||
@@ -54,7 +54,7 @@ Every interactive component has: default, hover, focus, active, disabled, loadin
|
||||
|
||||
## Product permissions
|
||||
|
||||
Product can afford things editorial can't.
|
||||
Product can afford things brand surfaces can't.
|
||||
|
||||
- System fonts and familiar sans defaults (Inter, SF Pro, system-ui stacks).
|
||||
- Standard navigation patterns: top bar + side nav, breadcrumbs, tabs, command palettes.
|
||||
|
||||
@@ -4,7 +4,7 @@ Reduce visual intensity in designs that are too bold, aggressive, or overstimula
|
||||
|
||||
## Register
|
||||
|
||||
Editorial: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated — the POV stays intact.
|
||||
Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated — the POV stays intact.
|
||||
|
||||
Product: "quieter" means reducing visual noise — fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
|
||||
|
||||
|
||||
@@ -39,7 +39,7 @@ Before asking questions, thoroughly scan the project to discover what you can:
|
||||
|
||||
Also form a **register hypothesis** from what you find:
|
||||
|
||||
- Marketing / editorial signals: `/`, `/about`, `/pricing`, `/blog/*`, `/docs/*`, hero sections, big typography, scroll-driven sections, landing-page-shaped content.
|
||||
- Brand signals: `/`, `/about`, `/pricing`, `/blog/*`, `/docs/*`, hero sections, big typography, scroll-driven sections, landing-page-shaped content.
|
||||
- Product signals: `/app/*`, `/dashboard`, `/settings`, `/(auth)`, forms, data tables, side/top nav, app-shell components.
|
||||
|
||||
Register is a hypothesis at this point, not a decision — Step 3 confirms it.
|
||||
@@ -52,22 +52,22 @@ ask the user directly to clarify what you cannot infer. Focus only on what you c
|
||||
|
||||
### Register (ask first — it shapes everything below)
|
||||
|
||||
Every design task is either **editorial** (marketing, landing, brand, content — design IS the product) or **product** (app UI, admin, dashboards, tools — design SERVES the product).
|
||||
Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio — design IS the product) or **product** (app UI, admin, dashboards, tools — design SERVES the product).
|
||||
|
||||
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [product / editorial] surface — does that match your intent, or should we treat it differently?"*
|
||||
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface — does that match your intent, or should we treat it differently?"*
|
||||
|
||||
If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default.
|
||||
|
||||
### Users & Purpose
|
||||
- Who uses this? What's their context when using it?
|
||||
- What job are they trying to get done?
|
||||
- For editorial: what emotions should the interface evoke? (confidence, delight, calm, urgency)
|
||||
- For brand: what emotions should the interface evoke? (confidence, delight, calm, urgency)
|
||||
- For product: what workflow are they in? What's the primary task on any given screen?
|
||||
|
||||
### Brand & Personality
|
||||
- How would you describe the brand personality in 3 words?
|
||||
- Reference sites or apps that capture the right feel? What specifically about them?
|
||||
- For editorial, push for brand / magazine references.
|
||||
- For brand, push for real-world references in the right lane (tech-minimal, editorial-magazine, consumer-warm, brutalist-grid, etc.) — not generic "modern" adjectives.
|
||||
- For product, push for category best-tool references (Linear, Figma, Notion, Raycast, Stripe).
|
||||
- What should this explicitly NOT look like? Any anti-references?
|
||||
|
||||
@@ -101,13 +101,13 @@ product
|
||||
[What this should NOT look like. Specific bad-example sites or patterns to avoid.]
|
||||
|
||||
## Design Principles
|
||||
[3-5 strategic principles derived from the conversation. Principles like "practice what you preach", "editorial over marketing", "expert confidence" — NOT visual rules like "use OKLCH" or "magenta accent".]
|
||||
[3-5 strategic principles derived from the conversation. Principles like "practice what you preach", "show, don't tell", "expert confidence" — NOT visual rules like "use OKLCH" or "magenta accent".]
|
||||
|
||||
## Accessibility & Inclusion
|
||||
[WCAG level, known user needs, considerations]
|
||||
```
|
||||
|
||||
Register is either `editorial` or `product` as a bare value. No prose, no commentary.
|
||||
Register is either `brand` or `product` as a bare value. No prose, no commentary.
|
||||
|
||||
Write to `PROJECT_ROOT/PRODUCT.md`. If `.impeccable.md` existed, the loader already renamed it — merge into that content rather than starting from scratch.
|
||||
|
||||
@@ -125,7 +125,7 @@ If the user prefers to skip, mention they can run `/impeccable document` any tim
|
||||
## Step 6: Confirm and wrap up
|
||||
|
||||
Summarize:
|
||||
- Register captured (editorial / product)
|
||||
- Register captured (brand / product)
|
||||
- What was written (PRODUCT.md, DESIGN.md, or both)
|
||||
- The 3-5 strategic principles from PRODUCT.md that will guide future work
|
||||
- If DESIGN.md is pending, remind the user how to generate it later
|
||||
|
||||
@@ -4,7 +4,7 @@ Assess and improve typography that feels generic, inconsistent, or poorly struct
|
||||
|
||||
## Register
|
||||
|
||||
Editorial: run the font selection procedure in [editorial.md](editorial.md). Two-family pairing (display + body). Fluid `clamp()` scale, ≥1.25 ratio between steps.
|
||||
Brand: run the font selection procedure in [brand.md](brand.md). Pairing follows the brand's lane (display serif + sans body for editorial/luxury, one committed sans for tech, etc.). Fluid `clamp()` scale, ≥1.25 ratio between steps.
|
||||
|
||||
Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user