Design Menu

Use a large display heading (e.g. text‑5xl/6xl, tight tracking, bold weight) as the hero title: "Build something beautiful."

Add a single H1 page title at the top of the content with bold weight and clear visual hierarchy above body text.

Use H2 for major sections and H3 for subsections; keep size steps consistent (e.g. text‑2xl then text‑xl).

Style body copy at ~16px with 1.5–1.7 line‑height and max‑width ~65ch for readability.

Add muted caption text (text‑sm, lower contrast) under the field or image for secondary context.

Use a clear form label above each input (text‑sm font‑medium), associated with the control via htmlFor.

Add an eyebrow/overline above the title: small uppercase tracking‑widest text like "NEW FEATURE".

Style inline code with mono font, subtle background, and rounded padding (e.g. px‑1.5 py‑0.5).

Create a blockquote with a left accent border, slightly larger or italic text, and muted attribution.

Style inline links with accent color and underline on hover; keep button‑like CTAs as real buttons.

Add a lead paragraph under the H1 at text‑lg/xl with relaxed leading and muted or slightly softer color than body.

Truncate overflowing titles with truncate (1 line) or line‑clamp‑2; ensure full text is available via title attribute or expand.

Use font‑variant‑numeric: tabular‑nums (or tabular‑nums utility) on prices, stats, and table columns so digits align.

Render a bulleted list with consistent marker indent, comfortable line‑height, and gap between items (not dense walls of text).

Use an ordered list (ol) with consistent marker indent and spacing for sequential steps; prefer numbers over bullets when order matters.

Render shortcuts as <kbd> chips: mono font, bordered, subtle fill (e.g. "⌘K") so they read as physical keys.

Show multi‑line code in a pre/code block: mono font, muted background, padding, overflow‑x auto, and optional language label.

Define a weight scale (400 body, 500 labels, 600 headings, 700 emphasis) and reuse it—avoid random font‑black on every title.

Tighten tracking on large display headings; open tracking (tracking‑widest) on small uppercase labels. Keep body text near default.

Use line‑through for superseded prices or completed items; pair with a clear new value so the meaning is obvious.

Constrain body copy to ~65ch max‑width (prose measure) so lines don't stretch edge‑to‑edge on wide screens.

Apply text‑wrap: balance (text‑balance) on multi‑line headings so wrapped titles look even, not orphaned.

Use font‑variant: small‑caps (or a true small‑caps face) for acronyms and refined labels—not full uppercase shouty tracking on body copy.

Define a mono stack (ui‑monospace, SF Mono, Menlo, monospace) for code, IDs, and logs—never mix random mono fonts mid‑UI.

Scale headings with clamp() or stepped text‑2xl/md:text‑4xl so type stays proportional across viewports without jumping awkwardly.

Highlight key phrases with a soft mark background (e.g. primary/15) and readable foreground—not neon yellow on long passages.

Define a primary brand color for CTAs and key accents; use it sparingly so it stays attention‑grabbing.

Use semantic colors: green success, amber warning, red error, blue info—consistent across alerts and badges.

Build a neutral scale (50–950) for surfaces, borders, and text hierarchy instead of pure black/white only.

Pair high‑contrast foreground text on background surfaces; support light and dark with semantic tokens.

Use muted secondary text color for timestamps, hints, and less important metadata—not for primary content.

Show a palette as rounded color swatches with hex labels in a horizontal row.

Define an accent token for soft highlights (selected rows, chips, focus tints) separate from the primary CTA color so actions stay clear.

Use a dedicated border color token (low‑chroma, mid lightness) for cards and inputs; avoid pure black borders on light UIs.

Use a short opacity scale (e.g. 5/10/20/40/60/80%) for scrims, disabled fills, and overlays instead of one‑off rgba values.

Provide inverse pairs (e.g. primary‑foreground on primary) so text on solid brand fills always meets contrast.

Define surface tokens (background, card, popover/muted) so nested panels step up in elevation via fill, not only shadow.

Set a focus ring token (ring‑primary or ring) with offset so keyboard users always see a clear, brand‑aligned focus indicator.

Provide a chart color set (4–8 distinct hues) as tokens so multi‑series charts stay consistent and colorblind‑friendlier than pure red/green only.

Document contrast pairs (e.g. foreground on background, primary‑foreground on primary) and verify they meet WCAG AA for body and UI text.

Use a link color (often primary) with underline on hover; don't rely on color alone—pair with underline or weight for affordance.

Build a brand scale (50–900) from the primary hue so soft fills, hovers, and solid CTAs stay related—not random blues.

Define disabled foreground/background tokens (lower contrast, no pure gray washout) and apply them consistently—not random opacity.

Set ::selection (and ::-moz‑selection) to a soft primary tint with enough contrast so selected text stays readable in light and dark.

Design colors as light/dark pairs (bg + fg + border) and verify both themes—don’t only polish light mode then invert.

Use a consistent spacing scale (4px base: 4, 8, 12, 16, 24, 32, 48) for padding and gaps throughout.

Lay out items in a vertical flex/stack column with consistent gap (e.g. gap‑4).

Group related controls in a horizontal flex row with gap, wrapping on small screens.

Use a responsive CSS grid: 1 col mobile, 2 tablet, 3 desktop with equal gap.

Wrap page content in a centered container with max‑w‑5xl/6xl and horizontal padding.

Increase whitespace between sections (py‑12+) so the layout feels calm and scannable—not cramped.

Align text and actions consistently (e.g. left‑aligned body, center for empty states, right for table actions).

Reserve media slots with aspect‑ratio (aspect‑video, aspect‑square) so layout doesn't jump when images load.

Define a small z‑index scale (base, sticky, dropdown, modal, toast) and never invent one‑off z-[9999] values.

Use position sticky with a top offset for toolbars or section labels that should pin while content scrolls beneath.

Build a two‑column split (e.g. 1fr 1fr or 320px 1fr) with consistent gap; stack to one column on small screens.

Support density: comfortable (roomy padding/gaps) vs compact (tighter rows for data‑heavy UIs). Toggle padding and gap tokens, not one‑off pixels.

Put long lists in a max‑height scroll area with overflow‑y auto so panels don't stretch the whole page; prefer custom thin scrollbars only if accessible.

Allow heroes or media to go full‑bleed (w‑screen relative to container) while text stays in the max‑width measure.

Use CSS multi‑column (columns‑2, gap) for dense FAQs or glossaries; avoid columns for interactive forms.

Center key solitary content with flex/grid place‑items‑center and a max‑width card—common for login and empty states.

Structure product pages as an app shell: fixed/side nav + scrollable main content region with consistent header height.

Add safe‑area padding (env(safe‑area‑inset-*)) on fixed bottom bars and full‑bleed mobile layouts so content clears the home indicator.

For mixed‑height media, use a CSS columns or grid with row‑span variation—not forced equal card heights that crop content.

Pin form or modal actions in a sticky footer bar (border‑t, background, safe padding) so Save/Cancel stay reachable while content scrolls.

Build a bento grid with CSS grid and span utilities (col‑span/row‑span) so one hero cell anchors smaller feature tiles.

Keep interactive hit targets ≥44×44px (or pad icon buttons with invisible hit area); never ship 16px‑only click targets on mobile.

Offer a density scale (compact/comfortable/spacious) that shifts padding, row height, and gap tokens together—not one‑off tighter screens.

Optically align icons in circles and play triangles (slight offset) so they look centered; geometric center often reads heavy on one side.

Use a content padding token (px‑4 md:px‑6 lg:px‑8) on page shells so gutters stay consistent; don’t invent new side padding per section.

Make the primary CTA a solid filled button with brand background, white text, and clear hover state.

Add a secondary outline button beside the primary for less important actions (e.g. Cancel).

Use a ghost/tertiary button (transparent, text only, subtle hover bg) for low‑priority actions.

Style destructive actions (Delete, Remove) with red/danger styling and often require confirmation.

Create an icon‑only button (square, equal padding) with an accessible aria‑label for the action.

Group related actions in a button group with shared borders or tight gap for a single unit.

When submitting, disable the button and show a small spinner + loading label to prevent double submits.

Offer sm/md/lg button sizes with consistent padding and type scale across variants.

Use an outline button (1px border, transparent fill) for secondary actions that still need clear hit targets.

Use a link‑variant button for tertiary actions (Cancel as text, Learn more) when you need button semantics without chrome.

Pair a short label with a leading icon inside the button (icon size ~1em, gap‑2); keep the label for accessibility.

Add a floating action button (circular, elevated shadow, brand fill) for the single most common create action; keep one FAB per view.

Use a split button: main action on the left, chevron dropdown on the right for alternate actions (Save / Save as…).

Use toggle buttons (aria‑pressed) for modes like Bold/Grid view; show selected with filled or accent background.

Provide a clear close/dismiss icon button (X) with aria‑label Close in the corner of modals, toasts, and banners.

Use a soft/subtle button: light primary‑tinted background, no heavy border, for secondary actions that still need fill presence.

Use rounded‑full pill buttons for marketing CTAs or filter actions; keep product chrome on standard radius so shapes stay intentional.

On mobile forms and auth, use full‑width primary buttons (w‑full) so the CTA is easy to tap; stack secondary full‑width below.

Use a success button (emerald fill) only for completing a positive outcome (Publish, Confirm payment)—not every primary action.

Attach a small absolute badge (count or dot) to icon or label buttons for unread/pending; keep contrast high and cap large counts (99+).

Use a compact copy button (icon or Copy label) that flips to Copied/check for ~1.5s after clipboard write; always provide an accessible name.

Pair one solid primary with one outline/ghost secondary (e.g. Save + Cancel); never two equal solid buttons competing for the same decision.

In toolbars and data tables, use dense buttons (h‑7/h‑8, text‑xs, tighter px) while keeping ≥24px hit height; don’t densify primary page CTAs.

Put directional icons after the label (Continue →, Open ↗); keep icon ~1em and gap‑2 so the word still leads the read order.

When the available actions load async, show a skeleton button (same height/radius as the real control) instead of a disabled fake label.

Build a text input with label, border, focus ring, placeholder, and comfortable height (h‑10/h‑11).

Use a multi‑line textarea with min‑height, resize‑y optional, and matching input border styles.

Add a select dropdown with a clear label, chevron affordance, and native or custom options list.

Style checkboxes with label to the right; support checked, unchecked, and indeterminate if needed.

Use radio buttons in a group for exclusive single selection with a fieldset legend.

Add a toggle switch for instant on/off settings (not form submit)—pill track with sliding thumb.

Attach a prefix icon or suffix unit/button to the input in a connected input group.

Show invalid fields with red border, error icon, and helper error message below the input.

Use a range slider for continuous values with a visible track, thumb, and optional value label.

Create a dashed‑border dropzone with upload icon, helper text, and browse link for file uploads.

Build a search field with a leading search icon, placeholder like “Search…”, and optional clear control.

Use a password input with type=password, label, and a show/hide toggle; never prefill real secrets in demos.

Provide a number input with min/max, step, and either native spinners or +/- steppers for quantities.

Add a date field with a clear label and calendar affordance (native date input or picker trigger).

Use a combobox/autocomplete for long option lists: input + filtered listbox, keyboard navigable, clear empty and loading states.

Build OTP as equal digit boxes with auto‑advance, paste support, and a single accessible field group label.

For multi‑select, show selected values as chips inside the field with remove actions, plus a checklist or combobox for adding more.

Provide a time input (native type=time or custom spinner) with clear 12/24h handling and an associated label.

Group related inputs in a fieldset with a visible legend (e.g. Billing address); use spacing and optional card chrome to show the group.

Offer input size variants (sm/default/lg) that match button heights so toolbars and forms align on a baseline grid.

Mark required fields with an asterisk after the label and explain once near the form; don't rely on color alone.

Use type=tel with a country code addon or select; format as the user types and keep a single accessible label.

Pair a native color input or swatch button with a hex text field so users can pick visually or paste values.

Group related checkboxes under a legend/label with consistent spacing; support select‑all with indeterminate when partial.

In settings tables, align labels left and controls right on one row (grid cols); stack on narrow screens.

Put helper text under the input (muted, text‑xs), wire aria‑describedby, and replace it with error text on validation failure—not both stacked forever.

Show a character counter near the field (current/max, tabular‑nums); warn near the limit and block or explain hard max on submit.

Build a tag input: type + Enter/comma creates chips, Backspace removes the last, each chip has a clear remove control and a single field label.

Pair the password field with a strength meter (weak→strong segments) and short rules met/unmet—not only a color bar with no text.

Use a floating label that shrinks above the value on focus/fill; keep a visible label always—don’t rely on placeholder alone.

Offer a date range as From/To fields (or one dual calendar) with validation that end ≥ start and clear empty states.

Build a top navbar with logo left, nav links center/right, and optional CTA; sticky on scroll.

Add a left sidebar nav with section labels, active item highlight, and collapsible groups if needed.

Use horizontal tabs with active underline or pill; keep related content panels below.

Show breadcrumbs as Home / Section / Page with separators and the current page as non‑link text.

Add pagination with prev/next and numbered pages; highlight the current page.

Show a horizontal stepper with numbered steps, completed checkmarks, and the active step emphasized.

For mobile, use a bottom tab bar with 3–5 icons + labels and a clear active state.

Design a mega menu: full‑width panel under the nav with columns of categorized links.

Use a segmented control for 2–4 peer options (Day/Week/Month) with one selected fill and equal‑width segments.

Add a skip‑to‑main‑content link that is focusable first and becomes visible on keyboard focus.

Highlight the current nav item with stronger weight, accent color, or left bar; set aria‑current=page.

Build footer nav as labeled link columns (Product, Company, Legal) with muted styling and adequate tap targets.

Add a back link ("← Settings") above page titles for nested flows; prefer real history or parent route over browser‑only back.

Use an app rail (icon‑only vertical nav, ~48–64px) for multi‑section products; pair icons with tooltips and an active indicator.

When horizontal nav overflows, move excess items into a More menu instead of shrinking labels unreadably.

Group sidebar links under muted section labels (Workspace, Settings) with extra top margin between groups.

Build tree nav with expand/collapse chevrons, indent levels, and a clear current‑item style; keep hit targets large enough.

Place utility nav (Help, Status, Locale) as small muted links above or beside primary nav—never compete with main IA.

Use underline tabs (border‑b‑2 on active) for content switching in dense product UIs; keep labels short and equal padding.

Use a hamburger (☰) menu button with aria‑expanded and aria‑controls; open a sheet/drawer of full nav links—don’t hide critical actions only behind it on desktop.

Put account actions in an avatar‑triggered dropdown: profile, settings, team, sign out—separate from primary product nav.

Add an on‑this‑page table of contents with anchor links and an active section indicator as the user scrolls.

Show an inline alert banner with icon, title, body, and optional dismiss—color‑coded by severity.

After save, show a toast/snackbar in a corner with short message and optional undo; auto‑dismiss.

Use a circular spinner for indeterminate loading; center it in the content area with optional label.

Replace loading content with skeleton placeholders (gray rounded bars) that match the final layout.

Show a horizontal progress bar with filled track for determinate progress (e.g. upload 60%).

Design an empty state with illustration/icon, short explanation, and a primary action to create first item.

Attach a red notification badge (count or dot) to the top‑right of an icon for unread alerts.

Show a small status dot (green online, amber away, red busy/error) next to avatars or service names.

Add an inline callout with a soft accent background, short title, and tip body for non‑urgent guidance.

After a successful save, show a green success banner or check + “Saved” message; allow dismiss.

Use a slim announcement bar (full width, dismissible) for sitewide news; keep copy to one line and a single action link.

Show determinate circular progress for upload/completion percentages; include a text value for accessibility.

When a banner needs a decision, include primary/secondary actions inline (e.g. Update · Dismiss) rather than text‑only notices.

Show inline status beside or under controls for async saves (Saving… → Saved) using muted or semantic color.

Use a compact count badge (muted or primary) next to nav labels; cap display (e.g. 99+) for large numbers.

Show a 2px top‑of‑viewport progress bar during route transitions; animate width and hide when complete. Respect reduced motion.

Pair short snackbar copy with one text action (Undo, View) and optional dismiss; auto‑hide after a few seconds.

On submit failure, show a validation summary listing fields and errors with links/focus to each invalid control.

Show a compact cookie consent bar with Accept / Reject / Manage choices; don’t block the whole page with a forced modal for basic consent.

Show a typing indicator (three bouncing dots + name) near the thread; hide after idle and don’t block the composer.

Open a centered modal dialog with backdrop, title, body, and primary/secondary actions; trap focus.

Use a side drawer/slide‑over panel for secondary flows (filters, details) without leaving the page.

Add a tooltip on hover/focus with short helper text; dark small rounded bubble with arrow optional.

Show a popover panel with richer content (form fields, lists) anchored to a trigger button.

Build a dropdown action menu: trigger button, list of menu items, keyboard navigable, closes on select.

Add a Cmd+K command palette: centered search overlay listing actions and pages to jump to.

For delete/overwrite, open an alert dialog with clear consequence copy, Cancel, and a destructive Confirm.

Use a bottom sheet for mobile filters or actions: drag handle, title, content, and scrim dismiss.

Provide a context menu on right‑click/long‑press with dense action rows; keep labels short and group with separators.

Show a hover card on avatar/link hover with name, meta, and optional action—delay open slightly to avoid flicker.

Open images in a lightbox: dimmed scrim, centered media, close on Escape/scrim click, optional prev/next for galleries.

Stack toasts in a fixed corner region with consistent spacing; limit visible toasts and collapse or queue overflow.

For multi‑step or dense tasks, use a near‑fullscreen modal/sheet with sticky header actions and clear dismiss.

Place dialogs over a semi‑transparent scrim (black/50 or similar); clicking the scrim should dismiss only when appropriate.

Coach marks: dim the page, highlight one target, short title + body + Next/Skip. Never block critical paths permanently.

Open row details in a side drawer (not a full page) for master‑detail flows; include close, title, and sticky footer actions.

Use a popconfirm (popover with title + Cancel/OK) for medium‑risk actions; reserve full alert dialogs for destructive irreversibility.

Build a notification center: bell with unread count opens a panel of items (read/unread), mark‑all, and empty state—not only a single toast.

Use a card with subtle border/shadow, padding, title, body, and optional footer actions.

Build a clean data table with header row, zebra or hover rows, and aligned columns.

Render a list of items with dividers, optional leading icon/avatar, title, and trailing meta.

Show a KPI stat card: large metric number, short label, and optional trend delta (↑ 12%).

Use chips/tags as rounded pills for categories; optional dismiss X for filter chips.

Show an avatar group/facepile with overlapping circular images and a +N overflow count.

Display details as a description list of label/value pairs in two columns on desktop.

Use an accordion with chevron toggles so users expand one FAQ/section at a time.

Show a vertical timeline with dots, connector line, timestamps, and short event titles for activity history.

Render a tree of nested items with indent levels and expand chevrons for folders/sections.

Place a compact toolbar above a table or editor with icon buttons, separators, and optional overflow menu.

Render a month calendar as a 7‑column day grid with today highlighted and out‑of‑month days muted.

Build a carousel with peek of next slide, prev/next controls, and dots or a counter; pause autoplay on hover and respect reduced motion.

Display prices with clear currency, tabular nums, and hierarchy (large amount, smaller period). Show compare‑at with strikethrough when discounted.

Present install/API snippets in a card with mono code, optional language label, and a copy button.

Layout feed items as avatar + action sentence + relative time; group by day when the list is long.

Show 3–5 KPIs in a horizontal strip with label, value, and optional delta; keep alignment and tabular numbers consistent.

Show star ratings with filled/empty stars, a numeric value for a11y, and consistent half‑star rules if used.

Build comparison tables with sticky first column, clear plan headers, and check/dash cells—not walls of paragraphs.

Mark sortable columns with a chevron; show active sort direction and keep sort state in the URL or table state.

Use sparklines beside KPIs for trend at a glance; no axes required, but provide a text summary for screen readers.

Represent active filters as dismissible chips in a filter bar (label + value + ×), with Clear all when more than one is applied.

Use expandable rows with a chevron and aria‑expanded; show detail in a full‑width nested panel under the row—keep the stage compact.

For 3–6 categories, use a simple bar chart (labels + proportional bars + tabular values); reserve heavy chart libs for interactive analytics.

Design kanban as labeled columns with card stacks and counts; keep cards short (title + meta) and allow drag between columns when interactive.

Use a shadow scale (sm/md/lg) for elevation—cards low, modals higher—consistent across the UI.

Use subtle 1px borders (border‑border/neutral‑200) to separate surfaces without heavy boxes.

Apply a consistent radius scale (sm 4px, md 8px, lg 12px, full pill) across buttons, cards, and inputs.

Insert a thin horizontal divider between list sections or card blocks for separation.

Create a frosted glass panel with bg‑white/10 backdrop‑blur border and soft shadow over a gradient.

Use a subtle brand gradient (e.g. teal→sky or warm sand→amber) for hero panels or accent surfaces — avoid default purple‑pink AI slop meshes.

Raise a panel above the canvas with a soft shadow and slightly brighter fill so it reads as a card layer.

Use an inset surface (darker fill, inner shadow or ring) for wells, code blocks, and drop targets.

Apply a 2px outline/ring outside the border (ring‑offset) for selected cards or keyboard focus.

Use a dashed border for empty dropzones and “add item” placeholders so they feel provisional, not solid cards.

Use backdrop‑blur on sticky headers and overlays with semi‑transparent fill so underlying content softly shows through.

Define 3–4 elevation levels (flat, raised, floating, modal) with paired shadow + surface tokens and reuse them consistently.

Use lightly tinted surfaces (primary/5–10%) for selected regions, tips, or brand panels without heavy borders.

Group toolbars or filters in a muted well (bg‑muted rounded‑lg p‑1) so related controls read as a single surface.

Prefer ring‑inset or shadow-[inset_0_0_0_1px] when adding focus/selection borders so layout doesn't shift.

Compose elevation from 2 soft shadows (tight + ambient) instead of one harsh drop‑shadow for cards and modals.

Put irreversible actions in a danger zone card: destructive border/tint, plain‑language risk, and a confirm step—never next to routine saves.

Create gradient borders with a padded wrapper (bg‑gradient + p‑px + inner solid bg) or border‑image; keep gradients brand‑aligned, not default purple‑pink slop.

Use a restrained animated border (slow conic spin or opacity pulse) for featured/upgrade cards only; disable animation under prefers‑reduced‑motion.

Stack a double border with ring + border or outline + border so selected/premium cards read stronger than single‑stroke peers.

Add a soft glow with shadow-[0_0_0_1px,0_0_12px] in the accent color for active or dark‑theme emphasis; keep glow subtle so text stays readable.

Prefer hairline separation with border or divide at low opacity (border‑border/60) rather than heavy 2px boxes on dense lists and tables.

Use asymmetric radius (e.g. rounded‑t‑lg rounded‑br‑lg only) for chat bubbles, attached tabs, or brand moments—don’t randomize corners on every card.

Define a border width scale (hairline/1px default, 2px emphasis, 4px accent bars) and reuse it—don’t invent one‑off stroke weights per component.

Add a 1px top inset highlight (via shadow or gradient) on elevated dark surfaces so cards feel lit from above without heavy drop shadows.

Show user avatars as circles with image or initials fallback; sizes sm/md/lg.

Use a consistent icon set at 16/20/24px; pair icons with text labels for primary nav when possible.

Frame product/hero images with rounded corners and object‑cover so crops stay intentional.

Place a logo/wordmark in the navbar; ensure a monochrome version works on light and dark backgrounds.

Use square or 16:9 thumbnails in lists/grids with consistent size and object‑cover cropping.

Compose a media object: fixed‑size image/avatar left, title + supporting text right, aligned to the start.

Wrap an image in a figure with a muted caption below (credit, source, or short description).

Show a 16:9 video placeholder with a centered play button and optional duration badge.

Overlay a small badge (dot or count) on the top‑right of an icon for notifications or status.

Use a wide cover image with object‑cover and fixed height for card headers or profile banners.

Reserve illustration space with a soft abstract placeholder (shapes + muted fill) matching final aspect ratio—avoid broken‑image icons for marketing empty states.

Show a gallery as equal thumbnails in a horizontal strip with selected ring and optional horizontal scroll.

When placing text on images, add a dark gradient scrim and light text so contrast holds over any photo.

Pair icons with labels (gap‑2, size‑4 icon) in menus and feature rows; never rely on unlabeled icons for primary navigation.

Overlay a status dot on avatars (bottom‑right, ring of background color) for presence; keep the dot large enough to read.

Ship a favicon set (16/32 SVG or PNG, apple‑touch) with a simple mark that reads at 16px—avoid tiny text in the icon.

Choose object‑fit cover for thumbnails/heroes and contain for product shots that must not crop; set a background for letterboxing.

Define hover states (bg shift, underline, scale 1.02) for interactive elements; keep transitions short.

Add a visible focus ring (ring‑2 ring‑offset‑2) on keyboard focus for all interactive controls.

Disable controls with reduced opacity and cursor‑not‑allowed; keep labels readable.

Highlight selected items with accent border/background and optional checkmark so choice is obvious.

Use a gentle pulse or shimmer animation on skeletons; keep motion subtle and respect prefers‑reduced‑motion.

Use cursor‑pointer on clickable elements, cursor‑grab on draggable, cursor‑not‑allowed when disabled.

On press/active, darken the fill slightly or scale to 0.98 so clicks feel responsive; keep the change brief.

While loading, disable the control, show a spinner, and optionally swap the label to a progressive verb (Saving…).

Mark error state with danger border/text and a short recovery message; keep the field value editable.

While dragging, lift the item with shadow, reduce opacity of the placeholder slot, and use cursor‑grabbing.

Style read‑only fields with muted border/fill and no focus caret; use readOnly or plaintext so they differ from disabled (still focusable when needed).

Show success on a control with green border/check when validation passes; clear it when the user edits again.

Use indeterminate checkboxes for partial tree/table selection; set aria‑checked=mixed and a distinct dash visual.

Wrap non‑essential animation in prefers‑reduced‑motion: reduce media queries—keep opacity fades short or static for those users.

Optionally style :visited links with a distinct muted purple/secondary color in content‑heavy docs so users see where they've been.

Detect offline and show a non‑blocking banner or badge; queue actions when possible and explain what still works.

First‑run empty: illustrate + primary CTA to create. Filter zero: “No results” + clear filters—not the same illustration.

When data may be stale, show a subtle “Updated 5m ago · Refresh” control rather than silently showing old numbers.

For empty search, show the query, suggest spelling/filters, and offer Clear search—not the same first‑run empty illustration.

On hover, lift cards/buttons with translateY(-1px/‑2px) + shadow‑md and a short transition; respect prefers‑reduced‑motion by fading shadow only.

Animate link underlines with scale‑x from 0→1 (origin‑left or center) on hover; keep stroke 1–2px and transition ~150–200ms.

Reveal edit/delete/more actions on row or card hover (opacity/visibility); keep keyboard focus able to show the same controls without hover.

Use hover:scale-[1.02] or 1.03 on compact interactive tiles; pair with transition‑transform and reduce to opacity‑only under prefers‑reduced‑motion.

On hover, strengthen the border (border‑primary or border‑foreground/40) while keeping fill calm—good for selectable cards and outline controls.

Use focus‑within on field groups and search bars so the whole chrome rings when a child is focused—not only the raw input outline.

Use the project's Button/Input/Dialog primitives (e.g. shadcn) for chrome and forms. Only hand‑roll markup for custom illustrations or effects.

Add a CVA/variant API (default, outline, ghost, destructive × sm/md/lg) instead of sprinkling ad‑hoc Tailwind on each call site.

Style with semantic tokens (background, foreground, primary, muted, border, ring) so light/dark and brand changes stay one‑file edits.

Use asChild/Slot so a Button can render as Next.js Link without nested interactive elements or lost styles.

Prefer Dialog/Sheet/DropdownMenu primitives for overlays; don't reinvent focus traps with absolute divs.

Always pass className through cn()/twMerge in shared components so callers can extend without fighting conflicting utilities.

Wire next‑themes with attribute=class, suppressHydrationWarning on <html>, and CSS variables for both themes — never toggle only with media queries if users need a switch.

Reach for existing variants first. If you need a new look more than twice, add a variant — don't copy‑paste custom classes across pages.

Use Tailwind for page layout (flex, grid, gap, container). Keep shadcn for interactive atoms (Button, Input, Dialog) — don't wrap a div in a component for every stack.

Treat shadcn components as starting source in your repo — customize tokens and variants in place; don't fight a sealed npm design kit.

Compose fields as Label + Input/Select + description/error text. Associate label via htmlFor; put errors in aria‑describedby. Prefer the shared Field pattern over ad‑hoc stacks.

Standardize Lucide/icons at size‑4 (16px) in buttons and size‑5 in nav. Pair icon+label with gap‑2; don't mix arbitrary w‑3/w‑6 mid‑toolbar.

Style Radix/shadcn open and checked states with data-[state=open] and data-[state=checked] selectors rather than manual isOpen className branches when possible.

When app logic must open/close overlays (after submit, deep link), use controlled open/onOpenChange on Dialog/Sheet/Dropdown — don't only rely on uncontrolled triggers.

Write mobile‑first Tailwind: single column and stacked actions by default, then md:grid‑cols‑2 / lg:grid‑cols‑3. Don't design desktop‑only and bolt on mobile hacks.

Prefer Button/Input size props (sm, default, lg) over sprinkling h‑8/h‑11 at call sites. If a height repeats, extend the variant map once.

Build skeletons with the same grid, gaps, and radii as the loaded UI (avatar circle + two text bars, not one generic rectangle). Prefer Suspense boundaries per section.

Wire destructive actions through AlertDialog (or confirm sheet): clear consequence copy, Cancel + destructive confirm. Never delete on a single unguarded click.

Let Dialog/Dropdown/Tooltip portal to document body so overflow:hidden parents don't clip them; keep one stacking scale for overlays.

Give every icon‑only control an aria‑label (or visible text). Prefer Label htmlFor over placeholder‑only fields.

Map brand colors to CSS variables (--primary, --radius) and reference them in components so themes swap in one place.

Compose pages with flex/grid/gap utilities. Keep shared components focused on interactive atoms—not every margin wrapper.

Ship reusable empty‑state and error‑panel patterns (icon, title, recovery action) instead of raw stack traces or blank main areas.

Rely on Radix keyboard behavior for menus/tabs (arrows, Home/End, typeahead). Don't ship custom menus that trap Tab incorrectly.

Style focus with :focus‑visible (or focus‑visible:ring) so mouse users don't see rings on every click, but keyboard users always do.

Use a toast library (or role=status aria‑live) so success/error messages are announced—not only painted visually.

Wire forms with a schema (Zod) + React Hook Form (or equivalent): one source of truth for types, validation, and field‑level errors.

Prefer compound components (Dialog + DialogTrigger + DialogContent) over one mega‑component with 40 props—compose parts at the call site.

If you add as/asChild polymorphism, preserve ref typing and don’t strip native button/link semantics—prefer Radix Slot/asChild over unsafe as= hacks.

Pair empty and error UIs: empty invites the next action; error explains failure + retry. Don’t show “Nothing here” for a failed fetch.