finesse builds two kinds of interface and routes by register (§0):

• brand — design IS the product: landing pages, brand sites, launches, portfolios, hero pages. Optimize for spectacle + soul + first impression — a real visual engine, an opinionated personality.
• product — design SERVES the product: dashboards, admin panels, analytics, data tables, app shells, settings. Optimize for clarity + density + usability — and still never cheap.

The through-line is identical: high craft, zero AI-slop. What applies to both is the universal craft floor (tinted neutrals, no

#fff

/

#000

, translucent/hairline borders, tinted shadows, contrast floors), the cheapness blacklist (§6), and the pre-flight (§8). What forks is the substrate above that floor and the middle: brand lays the §3 brand substrate (

design-dna.md

— grain, vignette, display type) and reaches for a hero engine (§4); product lays its own substrate (

product-ui.md

§0 — surfaces, cards, KPI tiles, density) and reaches for a component system + data viz. A dashboard is a different design language, not a brand page with charts — it does not inherit grain / vignette / giant hero type / dark-default / a hero engine.

Two more registers sit alongside them, and they work differently from each other. commerce (PDP/PLP/cart/checkout) is a hybrid — route it to brand or product by what the specific page is doing. h5 (phone-only screens: app UI, 活动页, mobile PDP, report H5) is a container: it fixes the frame, the safe areas, the thumb hierarchy, and the OS furniture, then wraps one of the other three for the content grammar underneath. A mobile PDP is

h5

+

commerce

; an app dashboard screen is

h5

+

product

. h5 never replaces a content register — it wraps one.

Every rule below is contextual. Nothing fires automatically. Read the brief, set the register, then pull only what fits. A skill that produces the same page for every brief has failed.

1. Check the scope before anything else. If the brief is a single element — a button, an input, a card, a modal, a toast — go to

   references/component-scope.md

   and follow it instead; steps 1–6 below are page apparatus and are wrong for one component. Detection and the ambiguity question live in that file.
2. Run §0 Brand Read — read

   .finesse/log.json

   (the rotation memory,

   divergence.md

   §4), then infer register (brand vs product) + soul before touching code. Output the Design Read: the coordinate line, a plain

   You'll see:

   line the user can actually veto, the

   Images:

   line naming every slot a picture would carry and where it would come from, its two most likely objections, and the rotation as a sentence (§0.B). Before writing that

   Images:

   line, check this session's actual tool list — an image-gen tool, an MCP image tool, a network fetch, or none — because it decides what you can honestly offer (

   asset-sourcing.md

   §1), and prove the one you're about to name actually runs here before naming it (§1.1 — listed is not usable; a generator with no credential is not Path A). Offer it and wait; never generate or download off your own inference.
3. Set the §1 Three Dials (SOUL · SPECTACLE · DENSITY). Product register pins SPECTACLE low, DENSITY high.
4. Lay the substrate — the right one for the register. All share the universal craft floor (tinted neutrals, no

   #fff

   /

   #000

   , translucent/hairline borders, tinted shadows, contrast floors —

   references/design-dna.md

   §1). Above that floor the substrate forks:
   • brand → the §3 brand substrate (

     references/design-dna.md

     ): grain, vignette,

     clamp()

     display type, dark-default, layered hero depth.
   • product → the product substrate (

     references/product-ui.md

     §0): premium surfaces/cards, KPI tiles, floating panels, fixed type scale, feedback-only motion. Never pour grain / vignette / giant hero type / dark-default / a hero engine into a dashboard — that's brand grammar, not product grammar.
   • h5 → the frame comes first (

     references/h5-mobile.md

     §1): the viewport contract, the locked

     body

     + scrolling

     #app

     , the 560px desktop phone frame, then the safe-area math (§2). Only after the frame is standing do you lay the substrate of the register it wraps.
5. Then the paths fork further:
   • brand → pick a §2 Soul (

     references/style-personas.md

     ) and build one §4 Hero Engine (

     references/hero-engines.md

     ).
   • product → pick a palette from

     references/product-palettes.md

     first (the neutral ramp is 80% of the pixels; skipping this step is how every dashboard comes out blue). Then split by the page's job:
     • pages you read — dashboards, analytics, monitoring →

       references/product-ui.md

       (density, tables, charts, interaction states). Before writing, open the closest dashboard in

       examples/

       (index:

       examples/EXAMPLES.md

       ) to see

       product-ui.md

       §0 applied in shipped code — lift patterns, not whole files.
     • pages you operate — publish/create wizards, merchant & admin consoles, config, settings, review queues →

       references/workflow-ui.md

       on top of

       product-ui.md

       (workflow shell, numbered sections, radio-card choices, live preview, pre-submit check, derived totals, draft/commit). There is no form-workflow page in

       examples/

       — build from the reference, and do not force-fit a dashboard example onto a form.
     • pages you delegate on — AI 工作台, agent consoles, copilot UI, anything where something other than the user does work over a duration →

       references/ai-console.md

       on top of

       product-ui.md

       (three tenses on one screen, the run stream, nine run states, a resident stop, the in-stream approval card, cost as a receipt). Open

       examples/relay-agent-console.html

       . A dashboard fails by being unreadable and a console by being unfinishable; this one fails by being untrustworthy, and none of the dashboard parts address that.
   • h5 → pick one of the six morphologies (

     h5-mobile.md

     §4: app shell · paged deck · snap narrative · commerce stack · longform site · ambient screen), then load the content register it wraps and follow that bullet above. Build the native furniture from

     h5-mobile.md

     §5 rather than inventing it — a TabBar is a convention, not a design opportunity.
6. Assemble the skeleton — again, the right one for the register. brand → pick one of the four §5 brand skeletons (landing · portfolio · lookbook · studio) by what the page has to do. product → the skeleton is the shell morphology in

   product-ui.md

   §1 (sidebar · floating panel · bento · triptych …), not §5. h5 → the skeleton is the frame (§1) plus the chosen morphology (§4); §5's brand skeletons and

   product-ui.md

   §1's desktop shells are both wrong inside 390px. Motion-motivated only, in all three.
7. Run the §6 Cheapness Blacklist (

   references/anti-cheap.md

   ), the mobile floor (

   references/mobile-floor.md

   ), and §8 Pre-Flight (

   references/preflight.md

   ) before shipping. h5 builds run

   h5-mobile.md

   §9–§10 instead of the mobile floor — the notch/frame/scroll/touch gates, which are a different set of failures from "a desktop page reaching a phone". Then record the build — append to

   .finesse/log.json

   and stamp the CSS (

   divergence.md

   §4.3). An unrecorded build is one the next run will collide with.

references/*.md

component-scope.md

divergence.md

.finesse/log.json

design-dna.md

product-ui.md

theming.md

motion.md

brand

hero-engines.md

hero-engines.md

motion.md

page-crafting.md

chart-crafting.md

dataviz.md

REDUCE

FINE

mask-image

clip-path

h5-mobile.md

body

#app

passive

pointercancel

mobile-floor.md

mobile-floor.md

overflow-x: clip

hidden

hidden

minmax(0,1fr)

overflow-wrap: anywhere

top:0

line-height

.86–.95

preflight.md

3d-effects.md

style-personas.md

inspiration-catalog.md

plain-words.md

audit

register

SPECTACLE

grain

scrim

eyebrow

hairline

anti-cheap.md

product-ui.md

workflow-ui.md

ai-console.md

product-ui.md

partial

stopped

--auto

--needs

product-palettes.md

design-dna.md

examples/EXAMPLES.md

dataviz.md

chart-crafting.md

div height:value/max%

commerce-ui.md

asset-sourcing.md

preflight.md

design-model.md

redesign-mode.md

audit.md

init.md

PRODUCT.md

document.md

design-model.yaml

1. First word matches a command → load that command's reference and follow it. Everything after the command name is the target. Lay the §3 substrate and run the relevant §6/§8 checks, but skip the parts of §0–§5 that don't apply to that single action (e.g.

   quieter

   doesn't re-pick a soul).
2. First word doesn't match, but intent clearly maps to one command ("too plain / boring" →

   bolder

   ; "too flashy" →

   quieter

   ; "wrong vibe for this page" →

   soul

   ; "feels generic / every page looks the same / 每次都差不多" →

   diverge

   ; "make it pop" →

   animate

   ; "动效 / 炫酷 / 加点动画 / 让它动起来 / 太静了" →

   animate

   (load

   motion.md

   first — these words select nothing on their own, so §4's beat sheet is what turns them into a decision the user can veto); "add depth / make it 3D / tilt / parallax" →

   depth

   ; "too sparse / too dense" →

   densify

   ; "improve / fix this page" →

   redesign

   ) → route to that command and proceed as if invoked. If two fit, ask once which.
3. No argument at all (bare

   /finesse

   ) → the user is asking "what should I do here?" Don't dump the static menu. Read a few cheap signals and lead with the 2-3 highest-value commands, each with a one-line reason, then offer the full table as fallback. Never auto-run — recommend, the user confirms. Signal → pick:
   • no

     PRODUCT.md

     and there's real code/pages → lead with

     document

     (capture what's built) and/or

     init

     (write the brief). Brand-new empty project →

     init

     then

     craft

     .

   • PRODUCT.md

     exists, has built pages, never audited → lead with

     audit <surface>

     (read-only health check).
   • git working tree points at one page/file → scope

     audit

     or

     redesign

     to those files, naming them.
   • a recent

     audit

     found P0/P1 → lead with

     redesign

     (fix the backlog) or the specific refine verb the findings point to (gradient-text/eyebrows →

     quieter

     /

     soul

     ; flat motion →

     animate

     ).
   • nothing built yet, clear brief →

     craft

     . Keep it to 2-3 pointed picks with the exact command to type. The menu is the fallback, not the lede.
4. A target but no command, building something new → check the scope, then the surface. If the brief names a single element (a button, an input, a card, a modal), route to

   references/component-scope.md

   — the page flow's skeleton, engine, and rotation are all wrong for one component, and the thing that actually decides its quality (all eight states shipped) isn't checked anywhere in the page flow. If the brief names a phone-only page (H5 / 移动端页面 / 活动页 / 小程序页 / app 原型), load

   references/h5-mobile.md

   first and build the frame before anything else — a page assembled desktop-first and then squeezed into 406px is the failure mode that file exists to prevent. Otherwise run the full

   craft

   flow (§0 → §8) — the default for "build me a landing page / dashboard".

5. audit

   is read-only. It only reports findings; it never edits code. Every other command is allowed to modify the target.

Auto-trigger is unchanged: finesse still activates from natural language via its

description

. Commands are an added precision entry-point (

/finesse quieter page.html

), not a replacement — both routes lead to the same references.

Ask the surface question first: does this page have a desktop form at all? If the answer is no — it's an H5 / 移动端页面 / 活动页 / 小程序页 / app 原型, opened from a chat message or a QR code, looked at in a phone mock — then the register is h5, and it is a container: go to

references/h5-mobile.md

, build the frame, then come back here and pick the content register underneath it. h5 wraps one of the three below; it never replaces one. The one-question tiebreak when the brief just says "手机端的页面" is in

h5-mobile.md

§0: "这个页面只在手机上打开，还是电脑上也要好看？" — "both" means it's a brand/product page with

mobile-floor.md

applied, and building a phone frame for it would be wrong.

Ask the same question for 「工作台」, and ask it before anything else. 「工作台」 and 「后台」 are two different products, and defaulting the former to the latter is the most likely mis-build in this skill. Ask what it revolves around — 一批业务对象 → 后台; 他自己反复在做的一件事 → 工作台 — never how many people use it. Only then does the screen matter, and only to pick the workbench's body (desktop shell vs

h5-mobile.md

morph A.1); an agent doing the work is a capability layer on top (

ai-console.md

), not a third species. Full resolver under §1's dials table.

• brand — design IS the product: landing page, brand site, launch, portfolio, campaign, hero page. Be bold, opinionated, spectacular. Goes the soul + hero-engine route (§2, §4).
• product — design SERVES the product: dashboard, admin, analytics, data table, app shell, settings, tool. Optimize for clarity, density, usability. Goes the component-system route (

  references/product-ui.md

  ). Still never cheap — it inherits the universal craft floor (§3's last three bullets) + the cheapness blacklist (§6), and builds on the product substrate (

  product-ui.md

  §0), not the brand substrate's grain/vignette/hero-type/dark-default.
  • Split it once more — but the first split is 后台 vs 工作台, not a list of page jobs. Ask what it revolves around: a batch of business objects → 后台; one thing he does over and over → 工作台 (full resolver under §1's dials table — it is the most consequential fork in this skill and the easiest to get wrong).
    • 后台 splits by job into read and operate. A dashboard you read fails by being unreadable —

      product-ui.md

      , unchanged. A page whose primary action is a consequential commit (发布 / 上线 / 提交 / 保存配置 — a merchant publishing a campaign, an admin configuring a rule) is one you operate, and it fails by being unfinishable: load

      references/workflow-ui.md

      on top. Login forms and search filters don't count;

      product-ui.md

      §4 covers those.
    • 工作台 splits by body, not by job — desktop keeps

      product-ui.md

      's shell at A.1's density and soul; phone goes to

      h5-mobile.md

      morph A.1. Same species either way.
    • Then, orthogonal to all of the above: does something other than the user do the work over a duration? An agent runs multi-step tasks, output streams in, a run can fail halfway, there's a queue → layer

      references/ai-console.md

      on top of whatever you already picked (its §8 is the desktop shell, §9 the phone form). It fails by being untrustworthy — you can't tell what it's doing, why, what it cost, or how to stop it — and none of the read/operate parts address that. This is a capability, not a category: a workbench without an agent doesn't need it, and a back-office that grows one doesn't become a workbench. A chatbot with no tools, no queue and no artifacts isn't one either; a dashboard about model spend is a dashboard.
  • Color is not optional here. Pick from

    references/product-palettes.md

    before writing CSS. "Dashboard" predicts blue; the product predicts a color.
• commerce — a third, hybrid case: product detail pages (PDP), category/listing pages (PLP), cart, checkout. It doesn't cleanly fit either bucket above, so don't force it — route by which job the specific page is doing:
  • A PDP selling one hero item (a single SKU, a launch, a flagship product) leans brand: pick a soul (§2), but keep DENSITY up for specs/reviews/trust signals — see

    references/commerce-ui.md

    for the PDP skeleton.
  • A PLP / marketplace with many SKUs (filters, sort, grid of many products) leans product: DENSITY high, SPECTACLE low, same as a dashboard — see

    references/product-ui.md

    for grid/filter patterns plus

    references/commerce-ui.md

    for commerce-specific rules (price/CTA placement, cart, checkout, dark-pattern bans).
  • When unsure which it is, ask: "is this page trying to sell the vibe of one product, or help someone compare/filter many?"

PRODUCT.md

init

design-model.yaml

document

.finesse/log.json

divergence.md

.finesse/log.json

/* finesse ·

• No

  PRODUCT.md

  , multi-page or repeat project, thin brief → offer to run

  init

  first (one

  PRODUCT.md

  keeps every later page consistent). Don't force it on a one-off page.
• Existing codebase, no

  design-model.yaml

  → offer

  document

  to capture what's there before adding to it.
• If memory exists but the new request contradicts it, surface the conflict — don't silently override the lock.

Lazy default (rejected): {the obvious aesthetic for this category}
Design Read: {industry} · {soul in 2-3 words} · register={brand|product} · SPECTACLE={n} ·
             layout={dominant layout family} · engine={type}
You'll see: {what appears on screen, in plain observable terms — color, motion, type size, structure}
Motion: {the beat sheet — one plain-language line per beat, plus the still. Omit only if
        the page genuinely doesn't move. Route names never appear here — motion.md §4}
Images: {how many, of what, and where they'd come from — or "none, and here's why"}
Not right? Most likely one of these: ① {the most probable objection} ② {the second}
Rotation: {plain sentence — which recent direction this deliberately avoids}

Lazy default (rejected): dark page, violet glow, floating 3D render, three feature cards.
Design Read: deep-space astronomy · cinematic + reverent · register=brand · SPECTACLE=8 ·
             layout=full-page engine + scrimmed sections · engine=Three.js particle galaxy
You'll see: a near-black page with slow-drifting star dust behind everything, a very large
            headline sitting on top of it, and the galaxy rotating as you scroll.
Motion: 首屏  星尘在背后慢慢漂，标题压在上面
        滚动  往下滚星系跟着转，越滚越深
        交互  切换观测目标时，参数自己重排，不是整块刷新
        收尾  底部那行坐标逐字浮起
        静止版 星系定格在一帧构图最好的，其余全停
Images: 3 — a wide nebula plate behind the hero, 2 square instrument details in the spec band.
        I can generate them here (they'd share one cold-blue grade); say the word and I'll
        list the shots before spending anything. Or the page ships engine-only, no photography.
Not right? Most likely one of these: ① you don't want a moving background
            ② near-black is too heavy and you want this light.
Rotation: deliberately steering clear of the last three builds (machined metal / paper press /
          phosphor terminal) — this one is water and drift.

You'll see:

Design Read:

SPECTACLE=8

scrimmed sections

Three.js particle galaxy

references/plain-words.md

Motion:

Not right?

R6

animation-timeline

View Transitions

plain-words.md

references/motion.md

Images:

asset-sourcing.md

references/asset-sourcing.md

Naming the slots is an offer, never a green light. Ask, then wait — do not generate and do not download. This line exists so the user learns the option is on the table; it is not permission to spend his generation budget or to pull assets off the open network because you inferred he'd want it. Both are actions with real cost and real provenance consequences, and the only thing that authorizes either is the user answering yes. The failure this prevents is the mirror of the silent-gradient one: a page where four images appeared, billed and un-asked-for, because the model decided the brief implied them. State the count and the source, stop, and let him answer — same gate

asset-sourcing.md

§2/§3 puts on both paths, just moved to where it's still free.

none

Not right?

differs on E + C + A (3/5 ✓)

.finesse/log.json

divergence.md

You'll see:

Not right?

When the user can't evaluate the assertion at all, that's Mode 2. If the brief carried no directional information — only undirected praise-words ("好看", "高级", "有质感", "premium", "clean"), or an explicit "I can't really say" — then

You'll see:

will get a rubber-stamp no matter how plainly it's written, because the user has no basis for comparison. Build three real variants instead (

divergence.md

§7 Mode 2 + the squint test). Undirected adjectives are as strong a fork signal as a genuinely ambiguous brief.

references/divergence.md

If output keeps coming out samey across projects, the fix is not a better adjective in this line — it's

references/divergence.md

(compose the soul from five axes instead of picking from a list; roll a die to break the model's default; keep a used-list so "don't repeat" can actually fire).

ai-console.md

h5-mobile.md

后台 vs 工作台 — one fork, then two modifiers

「工作台」 and 「后台」 are the two things, and they are not the same product. Everything else people say — 个人工作台 · AI 工作台 · 每日工作台 · 值守台 · 控制台 — is one of these two wearing a modifier. Resolve it in three steps, in order:

① 围着什么转 — this is the fork, and the only one:

	后台 back-office	工作台 workbench
围着什么转	一批业务对象 — N 个客户 · 订单 · 设备 · 工单 · 学员	他自己反复在做的一件事 — 记账 · 训练 · 带娃 · 写作 · 值守 · 处理异常单
为什么打开	有活要处理：来单了、告警了、该出报表了	到点了，回来看一眼 · 记一笔 · 收个尾
数据谁写	系统、对接、别人	他自己，几秒钟，成本必须接近零
性格	中性是义务 — 它活在别人的品牌里，旁边还有十一个工具	必须有 — 这是他的台子，中性的没有第二次打开的理由
建法	product-ui.md （+ workflow-ui.md 如果主动作是提交/发布）	下面第 ② 步选载体

② 在哪开 — 这只决定载体，不换物种。 工作台是一个东西、两副身体：

载体	壳	例子
电脑上开	product-ui.md 的 shell，但带 A.1 的性格和克制的密度 —— 不是一个塞满图表的 dashboard	examples/relay-agent-console.html
手机上开	h5-mobile.md morph A.1，锁定手机框 + TabBar，DENSITY 4–5	examples/h5-fern-meal-desk.html · h5-peach-daily-desk.html

③ 有没有东西替他干活 — 这是能力层，跟①②正交。 如果有 agent 在跑、输出是流式的、跑一半会失败、有队列 —— 叠加

ai-console.md

的机械层（运行流 · 九个运行状态 · 常驻停止 · 流内审批卡 · 成本回执）。它不是第三个物种，是工作台可以带的一种能力，桌面和手机两副身体都能带（

ai-console.md

§8 是桌面壳，§9 是手机形态）。一个没有 agent 的工作台不用加这层；一个后台接了 agent 也不会因此变成工作台。

两个不是判据的东西，别拿它们当判据。 人数：一家人共用的记账台、一个小组共用的值守台，都是工作台；一个人独用的进销存，仍然是后台。屏幕：它只在第 ② 步决定长什么样，从来不决定这是什么。

When the brief is just 「工作台」 with nothing else, that word has no dials row — ask, don't guess. One question resolves ①, and ②③ usually fall out of his answer:

这个台子主要围着什么转？
一批客户/订单/设备这类东西 · 你自己反复在做的一件事（记账、值守、带娃…）

Defaulting 「工作台」 to a back-office is the single most likely mis-build in this skill, and it is invisible when it happens — the page comes out competent, dense, neutral and correct, and it is the wrong product. That's why the row above is blank rather than helpful: a dials preset for a word this overloaded would be a guess wearing a table's clothes.

• Astronomy / music / game / crypto / fashion-tech → SPECTACLE 7–10 (the genre rewards a real engine).
• Law / finance / healthcare / B2B SaaS marketing → SPECTACLE 3–5 (craft over fireworks; one restrained motion moment).
• Heritage / luxury / editorial / publication → SOUL 8–10, SPECTACLE 4–6 (the type and substrate carry it, not WebGL).
• Any product register (dashboard / admin / analytics / app) → SPECTACLE 1–4, DENSITY 6–9 — clarity beats fireworks. Skip §2/§4 and go to

  references/product-ui.md

  .
• h5 → the dials follow the morphology, not the industry (§0.E's h5 rows). SPECTACLE is spent very differently here: there is no hero engine, and the budget goes to transitions and furniture (a FLIP zoom, a fanning card stack, a scene crossfade) rather than a WebGL canvas. An H5 page at SPECTACLE 8 is one where moving between states is spectacular; §4's engine table mostly doesn't apply.

Product register: soul still matters (brand accent, one type system, the substrate), but skip the spectacle personas below — go to

references/product-ui.md

. The rest of §2 and §4 are for brand.

Compose the soul — don't select it from a list. A closed table of ten personas yields ten pages; a model picking from ten options lands on the same two or three every time, weighted by what it has seen most.

references/divergence.md

§3 gives the fix: draw one value each on five orthogonal axes — palette structure · type relationship · dominant layout family · engine · material/metaphor — and let the combination be the soul. Five axes with a handful of values each is thousands of combinations, not ten. The persona table below is the set of combinations already validated — calibration, not the ballot.

references/style-personas.md

• Cinematic tech (cyan/magenta, Inter + JetBrains Mono, Three.js particles) — astronomy, AI, crypto.
• Phosphor terminal (single neon-green, mono-forward, Canvas data viz) — quant/fintech, security.
• Editorial publication (cream/ink, Playfair + Spectral, GSAP scroll-reveal, grayscale photography) — magazines, film, journals.
• Warm heritage (amber/copper/ember, Fraunces/EB Garamond, Canvas fire/particles) — whisky, coffee, craft.
• Brutal typographic (bone/black + one hot accent, Anton/Bebas, mix-blend-mode) — fashion week, music, culture.
• Quiet luxury minimal (off-white/forest, Raleway 100–900, CSS-only mask/parallax) — architecture, hotels, fragrance.

• One soul per page. Don't fluctuate warm and cool greys, or swap accent colors mid-scroll. Lock it (see §3, color lock).
• Rotate, don't repeat — and make it executable. "Don't reuse the last brief's lane" is a rule you cannot follow from memory: you have none across sessions. It has never once fired. Give it teeth: keep the used-list in

  references/divergence.md

  §4 (a table of the last N builds' axis coordinates), read it before you draw, and require the new page to differ on ≥3 of the 5 axes. Saturated lanes (editorial-typographic, beige-brass craft, AI-purple-glow) are banned as defaults — earn them or avoid them (

  references/anti-cheap.md

  ).
• Break the tie with a die, not with willpower. When two directions are equally defensible, the model will silently take the one it has seen most. Roll for it (

  divergence.md

  §6) — and if you override the roll, write down why. An unexamined default is the whole disease.

Once a persona is picked,

references/inspiration-catalog.md

has a wider bench of real pages per persona (48 beyond the 5 in

examples/

) — technique notes, not files, for when you want a second reference point beyond the persona table's single description.

references/design-dna.md

Register note. The last three bullets — translucent borders, no pure

#fff

/

#000

, color lock — are the universal craft floor: they hold for product/dashboard too. The first four — grain, vignette,

clamp()

type tension, layered hero z-index — are brand-only; a dashboard replaces them with the product substrate in

references/product-ui.md

§0 (premium surfaces/cards, KPI tiles, fixed type scale, feedback motion). Don't apply brand grain/vignette/giant-type to a dashboard.

• Grain — a fixed SVG

  feTurbulence

  noise layer at

  opacity .025–.05

  . Static, but kills the flat "vector slop" look. (Light pages too, lower opacity.)
• Vignette — a radial-gradient darken on dark heroes to create an optical focal point.
• Type tension — display headings at

  clamp()

  with negative tracking (

  -.02 to -.045em

  ) and

  line-height .86–.95

  ; extreme weight contrast against a light body (e.g. 900 against 300). Tight, large, confident.
  • Conditional — all-caps display is the exception, and it is not a rare one.

    .86–.95

    is correct for mixed case, where descenders (g, y, p) hold consecutive lines apart. All-caps has no descenders: cap-tops sit at the top of the line box, so at

    .86

    the caps of line 2 collide with the baseline and commas of line 1 and the two lines fuse into one band of ink. On a wide screen the headline sits on one line and you never see it; on a phone it wraps and the collision is guaranteed. This hits the brutal-typographic souls in §2 (Anton, Bebas) hardest — condensed faces have the tallest caps relative to their em box. So: whenever

    text-transform: uppercase

    is on display type, the

    line-height

    floor is

    1.0

    , recommended

    1.02–1.08

    . Raise the leading or drop the uppercase — one or the other, not a compromise at

    .98

    . Full reasoning:

    references/mobile-floor.md

    M6.
• Layered z-index — engine(0) · grain(1) · vignette · content(5). Depth, not flatness.
• Translucent borders —

  rgba(255,255,255,.07–.22)

  on dark,

  rgba(0,0,0,.06–.08)

  on light. Never a hard

  #333

  line.
• No pure

  #fff

  /

  #000

  . Tint every neutral a few points toward the brand hue.
• Color lock (mandatory): once an accent is chosen, it owns the whole page. No surprise teal badge on a rose page. Audit every component before shipping. If the brief actually asks for a swappable/multi-theme experience instead of one locked palette, see

  references/theming.md

  — the token-role and hardcoded-color pitfalls there are different from a single-palette build.

Internally reason in OKLCH for palettes (perceptual consistency, easy light/dark pairing), even if you emit hex. Design light and dark together; test contrast in each — never just invert.

Product register: no hero engine — reach for a data-viz + component system instead (

references/product-ui.md

). This section is for brand.

references/hero-engines.md

Read

references/motion.md

before this table, not after. These five engines are the heavy end of six routes; the table below answers which engine, that file answers whether this page needs one at all — and for most beats the answer is no. Its effect→route lookup routes the majority of motion briefs to CSS, native scroll-driven animation or View Transitions at zero bundle cost, and its beat sheet covers the other three-quarters of the page that this section has never had a vocabulary for. One heavy beat per page still holds — that rule survives intact as

motion.md

§4's budget. What changes is that the rest of the page stops defaulting to fade-up.

three

animation-timeline

Component-level 3D ≠ hero engine. The table above is for the one full-bleed hero moment. For reusable, in-page 3D — pointer-tilt cards, flip cards, coverflow, depth-parallax layers, or a Three.js product/model viewer — reach for

references/3d-effects.md

(the

depth

command). Default to its CSS tier; it ships in any page at zero cost and rarely janks. One 3D moment per page still applies: don't stack a hero engine and a tilt grid and a coverflow.

• Progressive enhancement. The page must be readable and complete with the engine removed. The engine is a fixed background or a hero accent, never load-bearing for content.
• 60fps or simplify. Animate only

  transform

  /

  opacity

  . Test on a mid-range device, not your machine. Below ~50fps, cut particle count or resolution.

• prefers-reduced-motion

  is mandatory — freeze the engine to a still frame (or hide it and show a composed static hero). Never ship motion with no fallback.
• Motivated motion only. Every ScrollTrigger / marquee / pinned section needs a one-sentence reason (hierarchy, storytelling, feedback, state). "It looked cool" is not a reason. Max one marquee per page.

A single canonical sequence is itself a source of sameness. If every brand page is

HERO → MARQUEE → MANIFESTO → GRID → CTA → FOOTER

, then every brand page is the same page, no matter how well the colors were chosen. A landing page argues; a portfolio proves; a lookbook seduces; a studio site demonstrates. Those are four different arguments, so they are four different structures. Pick by what the page has to do, then diverge inside it (

references/divergence.md

§3, axis C).

INTRO (a full-bleed image or a statement — not a headshot-and-tagline)  →
THE WORK (filmstrip accordion · generative grid · list-rows with thumbnails)  →
MANIFESTO (one statement, one column)  →  CAPABILITIES (list, not cards)  →
SELECTED DETAIL (one project, deep)  →  CONTACT (oversized type)  →  FOOTER

• The work comes before the words. An "About me" section above the first project is a résumé, not a portfolio.
• A grid of 6 identical project cards is the failure mode. Reach for a list with rows (

  64px 1fr auto 90px

  + a small thumbnail), a hover-expand filmstrip (

  page-crafting.md

  §3), or a generative split grid (§8). The layout should already say what kind of designer you are.
• No "skills" bar charts. A percentage on "creativity" is the single cheapest thing a personal page can contain.
• One project shown deeply beats six shown shallowly.

• Nav: single line, ≤80px. Over alternating light/dark sections use a scroll-spy class toggle (

  page-crafting.md

  §4).

  mix-blend-mode: difference

  only over high-contrast imagery — it goes muddy over mid-tones.
• Layout diversification: once a layout family is used (3-col cards, full-width quote, split image+text), it appears at most once more. Max 2 consecutive image+text zigzags. A page with 8 sections uses ≥4 layout families — count them before shipping.
• Eyebrow restraint: the tiny-uppercase-tracked label above every headline is the #1 AI tell. Max 1 eyebrow per 3 sections —

  ≤ ceil(sections / 3)

  , counted, not felt. Usually the headline alone is enough.
• Theme lock: one theme per page — except where the skeleton above calls for a deliberate dark inversion (5.C, 5.D), which is a structural device, not a drift.
• Numbering (

  01 · 02 · 03

  ) must be motivated by the material — film frame codes, plate numbers, movement parts. As default architecture it is a tell.

references/anti-cheap.md

• em-dashes in copy as a flourish — banned outright (the single most-violated tell).
• gradient text, default glassmorphism, side-stripe card borders, AI-purple glow.
• eyebrow on every section, numbered

  01 · 02 · 03

  markers as default architecture.
• identical card grids (icon + title + text × 6), div-based fake screenshots / fake dashboards.
• fake-precise numbers (

  92%

  ,

  4.1×

  ) with no real source.
• default-category palette (beige+brass for craft, purple-glow for AI/SaaS) — name it, reject it.

• Inter

  /

  Fraunces

  /

  Instrument Serif

  as unexamined defaults — fine if chosen with a reason, a tell if reached for blindly.
• zero imagery in a slot the page actually has for one — hero, gallery, PDP shot, H5 cover/scene, empty state. Judged off the skeleton, not the industry; that's a bug, not minimalism. Its mirror fails too: images that appeared without the user saying yes (

  asset-sourcing.md

  §0).

• Animate

  transform

  /

  opacity

  only; never

  top/left/width/height

  .

  will-change

  sparingly.

• prefers-reduced-motion

  : stop canvas loops, freeze grain, swap to static. Mandatory on every animated page — no exceptions, decorative motion included. A page that animates without a reduced-motion terminal state is shipping broken.
  • Capability-probe pattern (the ship-ready shape): read the probes once at the top —

    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches; const FINE = matchMedia('(hover:hover) and (pointer:fine)').matches;

    — then branch per effect:

    if (RM) <set final state> else <animate>

    . Gate pointer-dependent motion (magnetic buttons, cursor followers, hover accordions) behind

    FINE

    so it never fires on touch. Pair with the CSS backstop

    @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

    . Every hand-built chart draw-in ships its terminal state the same way (

    chart-crafting.md

    §6).
• Color contrast WCAG AA: body ≥ 4.5:1, large text ≥ 3:1. Includes buttons over photos (add scrim/stroke), placeholders, focus rings.
• Visible focus states on every interactive element. Nav and CTAs reachable by keyboard.
• Core Web Vitals: lazy-load heavy engines,

  min-h-dvh

  over

  100vh

  on mobile, responsive images (WebP/AVIF), CLS < 0.1.
• Mobile collapse declared explicitly per multi-column section. Touch targets ≥ 44px.
• h5 register: the six rules below are about a desktop page surviving a phone. A phone-only page has a different gate list — notch / frame / scroll-container / touch / SE-height / ambient-motion — in

  references/h5-mobile.md

  §10. M1/M4/M6 still hold inside the frame; M2 and M5 largely evaporate (one column, one bottom bar).
• The mobile floor — six hard rules, full reasoning in

  references/mobile-floor.md

  . Test at 320 · 375 · 414 · 768, not by dragging a desktop window until it looks off. M1

  overflow-x: clip

  on both

  html

  and

  body

  — never

  hidden

  , which makes a scroll container and silently kills every sticky descendant. M2 image-bearing grid tracks are

  minmax(0,1fr)

  , never bare

  1fr

  (whose

  auto

  minimum is the image's intrinsic width); flex children get

  min-width: 0

  . M3 clickable text never wraps at any width — shorten the label first,

  nowrap

  second. M4 display headings carry

  overflow-wrap: anywhere; min-width: 0

  . M5 exactly one sticky at

  top: 0

  ; others offset by

  --nav-h

  , with

  --z-nav

  above

  --z-sticky

  . M6 all-caps display type has a

  line-height

  floor of

  1.0

  (see §3).

  scripts/detect.mjs

  catches M1/M2/M5/M6 mechanically; M3 and M4 need a rendered page at 320px.

1. Stamp the CSS. The first non-empty line of the page's stylesheet (or the top of the inline

   <style>

   ) carries the five-axis coordinates:
   css

   /* finesse · register=brand · A=mono+acid-lime · B=900/300 · C=pinned-h-track
    * D=GSAP-scrub · E=machined-metal · SOUL=8 SPECTACLE=7 DENSITY=4 */

   h5 builds add the morphology —

   register=h5 · morph=A-app-shell · …

   (

   h5-mobile.md

   §11). Rotation applies to the soul axes and the morphology, never to the furniture: every app's TabBar should look like every other app's TabBar, the same carve-out

   divergence.md

   §0 makes for dashboard navigation.
2. Append to

   .finesse/log.json

   — prepend the entry to the array, trim to the last 20. Schema in

   divergence.md

   §4.1. Create the directory and file if they don't exist.

component-scope.md