tt-polish（tt 抛光）

Polish is a two-phase pass, not a builder. It assumes TUX token compliance is already mostly in place — if it isn't, run /tt-impeccable extract first.

Phase 1 — Visual Elevation: adds warmth, depth, and richness that survive token compliance but are not prescribed by the core spec. Phase 2 — Compliance Sweep: catches token drift, missing states, anti-patterns, and copy issues.

Context Check

1. Read .tt-impeccable.md in project root if it exists — fidelity tier and design context are there.
2. If absent, infer tier from codebase: mobile-first 390px = Strict TUX-native; dark #000000 desktop = TT Style.
3. Only ask if the tier is genuinely ambiguous.

Note the fidelity tier: Phase 1 rules apply primarily to Strict TUX-native light-theme surfaces. Phase 2 applies to both tiers.

Phase 1: Visual Elevation

Load reference/polish-rules.md and apply all 13 rules systematically.

Rule summary (refer to the rules file for full CSS and constraints):

Phase 1 rules apply to Strict TUX-native light-theme surfaces. For TT Style surfaces, Rules 2, 3, 5, 10, 11 still apply; Rules 1, 7, 12 are adapted (see rules file for TT Style notes).

Phase 2: Compliance Sweep

2a — Token Drift Scan

Read source files and search for:

• border:, border-top:, border-bottom:, border-left:, border-right: — for each hit: (a) could a background color change replace it? (b) Is it compensating for wrong surface contrast? Flag P1/P2 as appropriate.
• :hover rules containing border-color or adding a border — convert to background/opacity changes (P2)
• backdrop-filter — confirm glassmorphism is explicitly confirmed in context; if not, remove (P1)
• letter-spacing non-zero on text below 72px — remove (P2)
• rgba(254,44,85,*) at any alpha on non-CTA/non-interactive elements — BAN 7 violation (P1)
• Accent color (brand red, teal) on elements without interactive semantics (no onClick/href/role) — replace with neutral (P1)
• Hard-coded hex or rgba values not going through var(--tux-*) — flag all (P2)
• Spacing values not in the TUX 4px grid (4/8/12/16/20/24/32) — flag off-grid values (P2)
• border-radius values not in the TUX tables — flag (P2)
• box-shadow values that don't match the 6 TUX levels — flag (P2)
• Font other than TikTok Sans / system-ui — flag (P1)
• overflow: hidden on text containers with line-height below 1.0em — add descender padding fix (P2)

2b — Interaction States

Confirm every interactive element has all applicable states:

• Default — resting appearance
• Active / pressed — opacity drop or background shift on touch
• Focus-visible — keyboard/accessibility ring; never outline: none without replacement
• Disabled — visually de-emphasized; pointer-events: none
• Loading — if async: spinner, skeleton, or progress; element must not look tappable while loading
• Error — if element can fail: validation state visible
• Success — if action has meaningful completion: confirmation or state change

Touch target minimum: 44×44px on every tappable element.

2c — Entrance Animations (from Phase 1 Rule 12)

• All elements have entrance animations — no element snaps into existence at full opacity
• Cards/items use staggered fadeUp; floats use fadeScale; chips use staggered fadeIn
• prefers-reduced-motion: translate/scale animations disabled; opacity-only or none

Phase 1 Checklist (before presenting)

Gradients & Glow

• Page has heading > 17px → gradient applied; fades fully transparent before 220px
• Maximum one glow source per page

Typography

• Whole-page: largest text ≥ 24px, smallest ≤ 12px
• Within each module: at least one 700-weight dominant and one 400-weight/12px recessive element
• Adjacent tiers differ by ≥ 2 steps on the TUX scale

Spacing

• Page horizontal padding is 20px
• Inter-group vertical gaps are 24–32px
• Card internal padding is 20–24px

Cards & Emoji

• All SVG/system icons in cards and list cells replaced with contextual emoji
• Card/cell backgrounds use oklch() tint at ~5% — not flat rgba()
• Card label/heading color carries the card's hue
• 2–5 emoji list cells reflowed as 2-column card grid
• White-on-white: card gets tinted background

Fills & Color Restraint

• No solid non-neutral fill > 30px containing an icon — removed and replaced with dominant title
• CTA: ≥3 distinct non-neutral colors on screen → CTA is black

Surface & Structure

• Radius: L1 nested ≥ 14px; L2 overlay = 26px
• Same-type card grid: all cards share identical internal structure (emoji size, title position, description lines, padding)

Fading Edges

• Dividers replaced with fading-edge gradient attached to scroll wrapper
• Fade color matches scroll surface background
• Fade height ≥ 32px

Icons

• Icon sizes snapped to 24px (large) or 16px (small); one size per component

Typography Hierarchy

• Group/section labels are ≤13px/600/text-2 — weaker than item titles inside them

Animations

• Cards: fadeUp staggered 40ms per item
• Sheets/modals: fadeScale 220ms
• Chips: fadeIn staggered 30ms
• prefers-reduced-motion: translate/scale disabled

Final Verification

1. Use it yourself — interact with every state and flow
2. Run /tt-audit — confirm health score improved
3. Re-run /tt-critique — verify anti-pattern verdict is clean

Polish is complete when the interface is indistinguishable from a screen inside the TikTok app — not because it has the right tokens, but because it has the right *feel*.