Monmac Studio · Front-End Reference

Effects & Patterns Library

A named catalogue of interaction effects, component behaviours, layout systems, and UX patterns. Every entry has a name you can call by, a live demo where it helps, a trigger, and when to reach for it. Point at a name; skip the back-and-forth.

0 named entries 10 categories Sourced from ui-patterns.com, Framer, 21st.dev, Godly, Mobbin, PageFlows, Impeccable, Nicely Done
REF

Reference Sites

The ten sources this library draws from, each captured live. OPEN = browse freely; = the real depth (Mobbin's 405k screens, PageFlows' flow videos) sits behind a free/trial account, so the thumbnail is the public landing only; LIVE DEMO = the actual Framer component, running. Click any card to open the source.

Mobbin screenshot
Mobbin mobbin.com ↗

405k+ real app screens, flows & UI elements from 1,150+ apps.

Best for: mobile/web UI patterns, flows, screen types → §8
PageFlows screenshot
PageFlows pageflows.com ↗

Recorded user-flow videos from leading iOS/Android/web products.

Best for: end-to-end UX flows: onboarding, checkout, cancellation → §8
Nicely Done screenshot
Nicely Done nicelydone.club ↗

6,200+ SaaS UI screens, tag-filterable by flow & component.

Best for: SaaS flows + component states
Godly screenshotOPEN
Godly godly.design ↗

Curated award-tier sites, apps, logos, OG images & sections.

Best for: high-end visual + motion inspiration → §9
UI-Patterns screenshotOPEN
UI-Patterns ui-patterns.com ↗

Named UI + persuasion patterns, each with problem & use-when.

Best for: which pattern solves this → §7, §10
Framer · Component Effects screenshotOPEN
Framer · Component Effects framer.com/academy ↗

Framer's built-in effect system (Hover/Press/Loop/Drag/Appear/Scroll).

Best for: effect vocabulary → §4
Framer · WaveGallery screenshotLIVE DEMO
Framer · WaveGallery wavegallery.framer.website ↗

Dual-ticker gallery with a mirrored, seamless wave animation.

Best for: ambient image/logo bands → §3
Framer · InteractiveGallery screenshotLIVE DEMO
Framer · InteractiveGallery by Motion Lab ↗

Drag-with-inertia freeform gallery that drifts and snaps.

Best for: spatial portfolios / collages → §3
Framer · fxGallery Image screenshotLIVE DEMO
Framer · fxGallery Image by Ramdin Singh ↗

Single image with mirrored reflection + progressive-blur glass.

Best for: hero / featured-image finish → §3
Framer · Gallery Randomizer screenshotLIVE DEMO
Framer · Gallery Randomizer by Integry ↗

Grid that reshuffles order on every load, with hover-zoom.

Best for: living moodboards / walls → §3
21st.dev screenshotOPEN
21st.dev 21st.dev ↗

Community React + Tailwind + Motion components & templates (shadcn-compatible), searchable, with live previews. Themes, Heroes, Backgrounds, Shaders, ASCII.

Best for: grabbing a real coded component to adapt (the React answer to the Framer galleries)
Impeccable screenshotOPEN
Impeccable impeccable.style ↗

The anti-AI-slop detector: a design vocabulary + 18 commands (audit / colorize / typeset / quieter / overdrive) that flag and fix the tells that make UI look machine-generated.

Best for: the final quality gate before ship → §11 Anti-Slop

These thumbnails are captured references with attribution + links back to each source, for internal use — not a re-host of their libraries. For Mobbin and PageFlows I confirmed by visiting: the pages public to a logged-out visitor are marketing landings only; their catalogues need an account. Say the word (and share a login) if you want me to pull specific screens/flows from inside them.

01

Motion & Scroll Effects

How elements enter and move as the page scrolls. These carry most of the "feel" of a premium site. Demos below are live; scroll-triggered ones replay when they re-enter view.

SCROLL
Scroll Reveal (Stagger)on scroll-in

Elements fade + rise into place in sequence as their section enters the viewport. The workhorse of calm, premium motion.

Use when: any content section — headings, cards, images entering.IntersectionObserver · opacity+translateY · 60–120ms stagger
SCROLL
Parallax Layerson scroll

Background layers move slower than foreground, creating depth. Subtle = premium; heavy = dated. (Demo drifts with an ambient loop.)

Use when: hero atmosphere, layered imagery, storytelling scroll.translateY = scrollY × factor (0.1–0.4)
SCROLL
Pinned Scrubscroll-linked

A section sticks in place while its inner content advances, driven by scroll position rather than time. Basis of scrollytelling. (Bar tracks your scroll.)

Use when: step-by-step reveals, product walkthroughs, before/after.position:sticky + progress from getBoundingClientRect
SCROLL / DRAG
0102030405
Horizontal Scroll Railscroll / drag

A row that scrolls sideways with snap points, inside a vertical page. Great for work/portfolio grids. (Drag or trackpad-swipe the demo.)

Use when: case studies, image sets, "our work" bands.overflow-x:auto + scroll-snap-type:x mandatory
AMBIENT
DESIGNMOTIONSYSTEMSCRAFTDESIGNMOTIONSYSTEMSCRAFT
Marquee / Tickerauto-loop

Infinite horizontal loop of words or logos. Adds energy to a quiet band; pair outline + solid type for rhythm.

Use when: logo walls, value words, a moving divider band.duplicated track + translateX(-50%) keyframe
CLICKclick
Flood Zoomon click

A tile's colour floods the viewport and zooms into the next view. Signature transition for "enter a project." (Click Open.)

Use when: gallery→detail, portfolio entries, section pivots.expanding clip-path/scale from the click origin
02

Hover & Cursor Effects

Pointer-driven micro-interactions. On touch devices these degrade gracefully (tap / no-op). Hover the demos.

HOVER
Magnetic Buttonon hover

The button (and/or its label) leans toward the cursor as it approaches, snapping back on exit. Feels responsive and expensive.

Use when: primary CTAs, nav links, logo — sparingly.translate by (cursor − center) × 0.2–0.4
HOVER
tilt me
3D Tilt Cardon hover

Card rotates in 3D toward the pointer with a subtle glare. Adds tactility to feature cards and product shots.

Use when: feature cards, pricing tiles, device mockups.rotateX/rotateY from pointer + perspective
HOVER
move across me
Cursor Spotlighton hover

A soft radial light follows the cursor across a surface (often on a card border or dark grid). Modern SaaS staple.

Use when: dark feature grids, pricing cards, bento tiles.radial-gradient at --mx/--my from pointermove
HOVERmove inside
Custom Cursor (Dot + Ring)on move

Replace the system cursor with a dot and a lagging ring that grows over interactive elements. Signature of agency sites.

Use when: immersive/agency sites; keep a fallback for touch.two elements; ring lerps toward pointer each frame
HOVER
Project 01
Image Hover Zoomon hover

Image scales up gently inside a fixed frame while a label fades in. The default "these are clickable" cue for galleries.

Use when: portfolio grids, blog cards, product tiles.overflow:hidden frame + transform:scale on img
HOVEROur work
Underline Drawon hover

A link's underline sweeps in from one side on hover (and out the other on leave). The most reliable "premium link" tell.

Use when: text nav, inline links, footer menus.::after scaleX(0→1), transform-origin left
04

Framer Effect System

Framer's built-in effect vocabulary, from its "Component Effects" lesson. These are the named triggers you attach to any element. Useful shorthand even when we build in code, because the naming maps cleanly to what we implement.

Attachable effects

  • Hover — cursor-over state (desktop only); animates scale, offset, rotation, opacity, fill, shadow.
  • Press — same property surface as Hover but on click/tap; works on mobile too.
  • Loop — continuously repeating ambient motion; can mirror (yoyo) and delay per loop.
  • Drag — makes a layer draggable; a Section can bound the drag area.
  • All four are Motion-powered and stackable on one layer.

Viewport & scroll

  • Appear — one-shot reveal when an element first enters view (fade/slide/scale/blur). CMS lists get a Stagger field.
  • Scroll — tie animation to scroll via 3 triggers: Layer in View, Section in View, Scroll Direction. Replay re-fires on re-enter.
  • Scroll Speed — parallax: <100% slower/further, >100% faster/closer.
  • Scroll Transform — sticky/pin a layer within a section + scroll-linked property transforms.

Transition & timing

  • Curves · Linear · EaseIn · EaseOut · EaseInOut · Spring
  • Spring · Stiffness (speed), Damping (settle), Mass (momentum); or time-based Duration + Bounce
  • Delay · Stagger · offset per item; graph-editor bezier, copy/paste across layers
  • Properties: opacity · scale · offset · rotation · color · blur · fill · shadow.

Verified from Framer Academy + docs (Hover & Press, Loop/Drag, Appear, the 3 Scroll triggers, Scroll Speed, Transitions & easing). Effects can live at the component level so every instance inherits them. Mapping to code: "Appear + 60ms Stagger" = IntersectionObserver reveal with a per-item delay; "Scroll Speed 80%" = translateY at 0.2× scroll.

05

Layout Patterns

The structural systems a page is built on. Diagrams below show the skeleton; pick the one that fits the content density and rhythm you want.

LAYOUT
Bento Gridlayout

Modular tiles of different sizes packed into a grid, each holding one idea. Great for feature overviews and "everything at a glance."

Use when: feature summaries, product highlights, dashboards.CSS grid with spanned rows/cols
LAYOUT
Split Screenlayout

A hard 50/50 (or 60/40) division, usually media on one side, copy on the other. Confident and editorial.

Use when: hero sections, one strong image + one clear message.grid-template-columns:1fr 1fr
LAYOUT
Alternating Rowslayout

Image/text pairs that flip side each row (zig-zag). The reliable way to walk through several features without monotony. (This is the ISL Systems block pattern.)

Use when: feature walkthroughs, outcomes, "how it works."grid 1fr 1fr; :nth-child(even) reverses order
LAYOUT
Sticky Columnon scroll

One column pins while the other scrolls past it, so a visual (or heading) stays put as detail advances. Calm, and reads as "considered."

Use when: long content beside a persistent image, docs, specs.position:sticky; top on the pinned column
LAYOUT
Aa
Editorial Asymmetrylayout

Deliberately off-grid: overlapping blocks, uneven columns, type that breaks the margin. Signals "designed," not templated. Use with restraint.

Use when: brand/agency sites, editorial features, one hero moment.absolute/negative-margin overlaps on a base grid
LAYOUT
Full-Bleed Bandslayout

Edge-to-edge horizontal sections that alternate background (light / tint / dark) to give a long page rhythm and separate ideas. (ISL uses this.)

Use when: long marketing pages needing sectional rhythm.100vw sections, alternating bg tokens
06

Micro-Interactions & States

The small feedback moments that make an interface feel responsive and trustworthy. Each demo is live; interact with it.

CLICK
click
Toggle Switchon click

Animated on/off with a spring-eased knob and colour shift. State must read instantly, at a glance. (Click it.)

Use when: settings, feature flags, plan switches.transform:translateX + background transition
LOADING
Skeleton Loaderon load

A shimmering placeholder shaped like the content that's coming, for anything over ~1s. Beats a spinner; keeps layout stable.

Use when: data fetches, image-heavy grids, dashboards.gradient shimmer keyframe on gray blocks
CLICKclick
Button State Cycleon click

Idle → loading → success, in place, so the user never wonders if the click registered. Label says the outcome ("Saved"). (Click it.)

Use when: any async action — save, submit, subscribe.disabled + spinner, then success label, then reset
ON VIEW0
Count-Up Staton scroll-in

A number rolls from 0 to its value when it scrolls into view. Makes metrics feel earned. Keep it fast (under ~1.2s).

Use when: results, KPIs, "trusted by N" stats.requestAnimationFrame eased counter on IO
CLICKclick
Toaston action

A brief confirmation that slides in (bottom-right desktop / top-center mobile) with an icon, then auto-dismisses. Max three words. (Click Publish.)

Use when: confirming an action without interrupting flow.slide-in element, 3–5s auto-dismiss
CLICKclick
Copy Feedbackon click

Button flips to "Copied ✓" briefly so the action is confirmed without a dialog. Small but expected. (Click it.)

Use when: code snippets, share links, referral codes.swap label + icon for ~1.5s, then revert
07

UI Patterns

Named interface-design patterns catalogued by ui-patterns.com — the canonical vocabulary for "which pattern solves this problem." Grouped by the site's own categories.

Getting Input — Forms

  • Forgiving Format · accept any input shape, parse it
  • Input Prompt · placeholder hint inside the field
  • Inplace / Inline Editor · click text to edit it directly
  • Fill in the Blanks · inputs inside a sentence
  • Good Defaults · Autosave · Undo
  • Input Feedback · validate as they type
  • Password Strength Meter · Calendar Picker
  • Morphing Controls · Expandable Input · WYSIWYG
  • Drag and Drop · Keyboard Shortcuts · Captcha

Getting Input — Process

  • Wizard · multi-step guided flow
  • Steps Left · Completeness Meter · show progress
  • Inline Help Box · contextual help beside a field

Navigation

  • Navigation Tabs · Module Tabs
  • Breadcrumbs · Home Link · Fat Footer
  • Vertical / Horizontal Dropdown Menu
  • Accordion Menu · Shortcut Dropdown
  • Modal · Notifications · Pull to Refresh

Content

  • Cards · Carousel · Thumbnail
  • Progressive Disclosure · reveal detail on demand
  • Continuous Scrolling · infinite scroll
  • Pagination · Article List · Archive
  • Tagging · Tag Cloud · Categorization
  • Adaptable View · grid/list toggle · Favorites

Data & Tables

  • Table Filter · Sort By Column
  • Alternating Row Colors · Dashboard
  • FAQ · Copy Box
  • Autocomplete · Search Filters
  • Gallery · Slideshow · Image Zoom

Social

  • Social Proof · Testimonials · Leaderboard
  • Reaction · Follow · Friend list
  • Activity Stream · Chat · Invite Friends
  • Collectible Achievements · Auto-sharing

Onboarding

  • Blank Slate · designed empty state
  • Coachmarks · Guided Tour · Walkthrough
  • Inline Hints · Playthrough
  • Lazy Registration · Account Registration · Paywall

Shopping

  • Product Page · Pricing Table
  • Shopping Cart · Coupon

The UI-component taxonomy above is fetched live from ui-patterns.com/patterns. The same site's second taxonomy — ~90 Persuasive Design (conversion-psychology) patterns — is broken out in full as §10 Conversion Psychology below.

08

UX Flows & Screen Types

The named user-flow and screen-type vocabulary from Mobbin (real app screen library) and PageFlows (recorded user flows). Use these to say exactly which flow or screen we're designing.

Mobbin — Flows

  • Onboarding · first-run intro + setup
  • Sign up / Log in · authentication
  • Checkout / Payment
  • Subscription / Paywall · upgrade to paid
  • Search · Browse · Create / Add content
  • Settings · Profile · Sharing · Notifications

Mobbin — Screen types

  • Paywall · the upgrade screen
  • Empty State · nothing here yet + a CTA
  • Onboarding Carousel · Splash
  • Permission Request · ask for camera/notifications
  • Walkthrough · Product Detail · Dashboard
  • Empty State · 4 subtypes: first-time-use, no-results, post-completion, feature-education

Mobbin — UI elements

  • Tab Bar · Top Nav Bar · FAB
  • Bottom Sheet · Dialog · Full-Screen Overlay
  • Segmented Control · Stepper · Slider · Select
  • Toast · Tooltip · Badge · Chip · Avatar
  • Card · Carousel · Stacked List · Drop Zone

PageFlows — Recorded flows

  • Sign-up & Login
  • Onboarding · leading SaaS/fintech/consumer
  • Checkout & Payment
  • Upgrade & Upsell · subscription prompts
  • Cancellation & Churn · churn survey + win-back
  • Notification Permission Prompt

PageFlows' taxonomy is verified from its live nav (6 flow groups, ~65 named flows across iOS/Android/Web/Email); Mobbin's app itself 403-blocks bots, so its flows/screens/elements here are from its indexed public pages + API docs (4 facets: categories, patterns, elements, actions). Both use the same paired-gerund naming convention ("Filtering & Sorting", "Purchasing & Ordering", "Searching & Finding") — adopt it verbatim so our flow names read industry-standard. Use these to name the exact flow/screen a brief is about, e.g. "design the Paywall screen and the Downgrading & Canceling Subscription flow."

09

Elite-Web Effect Vocabulary

The recurring high-end effects that show up across award-tier sites curated by Godly and Nicely Done. The "what makes it feel expensive" list. Some overlap earlier sections; here they're named as a checklist to pull from.

A site featured on Godly (Span)

Live from Godly

A real award-tier site currently featured on godly.design (Span). This is the calibre of motion + typography-led work the gallery curates. The reference is the live feed itself.

Browse 175+ live examples ↗

Signature motion (the "expensive" tells)

  • WebGL Image Transition · shader distortion/melt between images
  • Scroll-Scrub Video · a video/image-sequence driven by scroll
  • Sticky Scroll Scenes · pinned scrollytelling chapters → see Pinned Scrub §1
  • Sticky Stacked Cards · cards pin and stack as you scroll
  • Text Mask Reveal · words clip/unmask on scroll
  • Kinetic Typography · headlines that animate/deform
  • Colour-Flood Pivot · section identity floods in → see Flood Zoom §1
  • Staggered Load Sequence · orchestrated intro reveal

Cursor & pointer

  • Gooey / Metaball Cursor · liquid blob following the pointer
  • Custom Cursor · dot + lagging ring / labelled → §2
  • Cursor Spotlight · light follows pointer → §2
  • Magnetic Elements · CTAs lean to the cursor → §2
  • 3D Tilt / Parallax Layers · depth on move → §2

Structure & texture

  • Infinite Draggable Canvas · pan an endless board → see §3
  • Horizontal Scroll Section · → §1
  • Marquee Bands · → §1
  • Grain / Noise Overlay · film-grain texture over the page
  • Blur-to-Sharp Reveal · images resolve from blur
  • Rolling Counters · split-flap / odometer numbers → Count-Up §6

Godly (now godly.design) — browse by

  • Sites · Apps · Sections
  • Logos · OG Images · App Icons
  • Sites skew B2B SaaS marketing, motion- + type-led; curated from design posts on X.
  • "Nicely Done" (nicelydone.club) is a separate SaaS UX-pattern library — flows/components, see §8, not effects.

Godly rebranded from godly.website → godly.design (verified live). The "→ §N" cross-references point to a live demo earlier in this library. WebGL/shader, gooey-cursor, and scroll-scrub effects are the heaviest to build (real GPU/canvas work) — flagged so we scope them deliberately, not on a whim.

10

Conversion Psychology

The complete Persuasive Design taxonomy from ui-patterns.com — ~90 named behavioural patterns for nudging a decision. These are the "why people act" levers behind landing-page and funnel copy. Glossed where it earns its keep; grouped by the site's five families. Use ethically: nudge toward genuine value, never dark-pattern.

Cognition — Loss Aversion

  • Loss Aversion · losing hurts ~2× more than gaining pleases; frame around what they'd lose
  • Framing · same fact, different wording changes the choice (90% fat-free vs 10% fat)
  • Decoy Effect · a third, worse option makes the target look obviously best
  • Endowment Effect · people over-value what they already "own" (free trial, added to cart)
  • IKEA Effect · effort invested → higher perceived value (setup, customization)
  • Sunk Cost Effect · prior investment keeps them going (progress already made)
  • Status-Quo Bias · Optimism Bias · Negativity Bias

Cognition — Other biases

  • Anchoring · the first number seen sets the reference (show list price before sale)
  • Curiosity · an information gap compels the click/open
  • Priming Effect · earlier cues shape later perception
  • Value Attribution · signals (price, polish) become perceived worth
  • Cashless Effect · abstracted money (cards, credits) is spent more freely
  • Peak-End Rule · experience judged by its peak + its ending, not the average
  • Illusion of Control · Set Completion · Present Bias
  • Delay Discounting · Need for Closure · Choice Closure
  • Temptation Bundling · Inaction Inertia Effect

Cognition — Scarcity

  • Scarcity · scarce = more desirable; stock-based ("3 left") or time-based
  • Limited Duration · a deadline forces a decision (note: Jamila brand bans urgency copy)
  • Limited Choice · fewer options → easier decision (Hick's law)

Game Mechanics — Gameplay

  • Storytelling · narrative makes information stick + persuades
  • Investment Loops · each action deepens commitment to the next
  • Appropriate Challenge · difficulty tuned to skill = flow, not boredom/anxiety
  • Self-Monitoring · show progress/streaks so users track themselves
  • Levels · Intentional Gaps · Periodic Events · Hedonic Adaptation

Game Mechanics — Rewards

  • Variable Rewards · unpredictable payoff is the strongest habit driver (the slot-machine effect)
  • Goal-Gradient Effect · motivation rises near the finish (progress bars, "2 to go")
  • Fixed Rewards · Shaping · reward successive approximations
  • Achievements · Unlock Features · Privileges · Praise
  • Delighters · Appointment Dynamic · Prolonged Play

Perception & Memory — Attention

  • Zeigarnik Effect · unfinished tasks nag at memory → completion pull (progress at 40%)
  • Isolation Effect · the odd-one-out is remembered (highlight the recommended plan)
  • Picture Superiority Effect · images are recalled far better than words
  • Tunnelling · Reduction · strip a flow to one focused path

Perception & Memory — Comprehension

  • Chunking · group info into digestible units (phone-number grouping)
  • Serial Positioning Effect · first + last items remembered best; put key items there
  • Recognition Over Recall · show options, don't make users remember them
  • Conceptual Metaphor · map the new onto the familiar (desktop, cart, trash)
  • Pattern Recognition · Sequencing

Feedback — Timing

  • Kairos · the opportune moment — deliver the prompt exactly when it's relevant
  • Trigger · the cue that starts a behaviour (notification, empty-state CTA)
  • Fresh Start Effect · temporal landmarks (new week/year) boost willingness to act
  • Feedback Loops · Tailoring · Simulation

Social — Social biases

  • Social Proof · people follow the crowd when unsure (counts, logos, reviews)
  • Authority Bias · credentials/experts lend trust (certifications, press)
  • Reciprocation · give value first → they feel owed (free audit, useful tool)
  • Commitment & Consistency · a small yes leads to a bigger yes (micro-commitments)
  • Liking · we say yes to those we like (warmth, shared values)
  • Halo Effect · one strong trait (great design) colours the whole judgement
  • Noble Edge Effect · social responsibility boosts brand favourability
  • Positive Mimicry · Cognitive Dissonance · Reputation
  • Nostalgia Effect · Competition · Autonomy · Status
  • Self-Expression · Role Playing · Retaliation

Full ~90-pattern Persuasive Design taxonomy, verified from ui-patterns.com/patterns (live WebFetch). Two guardrails on how we'd use it: (1) Jamila ISL brand explicitly bans urgency/scarcity copy — skip Limited Duration / Scarcity for her. (2) Persuasion ≠ manipulation — these nudge toward real value; the moment a pattern tricks or traps the user it's a dark pattern, which we don't ship.

11

Anti-Slop Checklist

The inverse of everything above: the tells that mark a UI as machine-generated rather than crafted. From impeccable.style (the anti-AI-slop detector that runs as our premium-ui Phase-7 gate). If our output shows any of these, it's a defect — the fix command is noted on each.

Motifs to avoid (each with its impeccable fix)

  • Purple / violet / indigo gradient — the default "AI looks premium" gradient. Pick an intentional hue. /impeccable colorize
  • Inter monoculture — Inter for every weight/size/context with no typographic variation. /impeccable typeset
  • Glass-morphism panels — frosted backdrop-filter:blur() surfaces as a default aesthetic. /impeccable distill
  • Left-border / side-tab accent card — an accent-colour left border as the primary card differentiator; use a real system. /impeccable layout
  • Sparkline decorations — tiny line charts as filler with no data meaning. /impeccable distill
  • Generic 2×2 bento grid — four equal cards in a 2-col grid as the default "features" layout. /impeccable layout
  • Emoji-as-design — emoji standing in for real iconography or illustration. /impeccable typeset
  • Cookie-cutter section rhythm — hero → features → testimonials → CTA with identical padding everywhere. /impeccable layout
  • 3-column feature grid as hero — three equal feature columns used as the page hero. /impeccable bolder
  • Stock-photo hero — laptop/handshake/"business meeting" photos as the hero; signals zero creative investment. /impeccable adapt

Impeccable commands

  • /impeccable audit — full slop audit — surfaces every motif found
  • /impeccable critique — written critique + fix recommendations
  • /impeccable colorize — replace default purple/violet with intentional colour
  • /impeccable typeset — fix type scale, weight, spacing, font monoculture
  • /impeccable distill — strip decorative noise, tighten hierarchy
  • /impeccable quieter — calm an over-designed, loud layout
  • /impeccable bolder — add confidence to a timid, washed-out design
  • /impeccable layout — fix grid, spacing rhythm, alignment
  • /impeccable overdrive — aggressive full-redesign pass
  • /impeccable polish — incremental quality without a redesign

impeccable.style (Apache-2.0, github.com/pbakaus/impeccable) installs as a Claude Code plugin; we run /impeccable audit as the final gate in premium-ui Phase 7 and don't ship until it returns clean. It also ships a Chrome extension that highlights these motifs on live pages. Related in our stack: it composes UNDER frontend-design (tone) + web-design-guidelines (interaction safety).