← Resources · johnder.com
Learn the vocabulary

Every interface pattern, named, shown live and explained.

This is a working field guide to GUI, UI and UX. Every card is a real, clickable example with its industry name, the aliases you'll hear, when to use it, when to avoid it, and a “Say it like a designer” line you can paste into Lovable, Cursor or v0.

Terminology follows Material Design 3, Apple's Human Interface Guidelines, Nielsen Norman Group, Laws of UX and common pattern libraries. All examples here are original.

Press / to searchToggle light/dark in the top rightEvery demo is interactive
For informational purposes only. This is not design, product or professional advice. Do your own independent research and due diligence before you implement anything from it. Read the full disclosure.
01

Foundations

The raw materials every interface is built from: spacing, type, color, shape and depth. Get these consistent and everything else looks “designed.”

4px
8px
12px
16px
24px
32px
48px
64px

Spacing scale (8-point grid)

Also called8pt grid, spacing tokens, 4pt baseline

A fixed set of spacing values, usually multiples of 4 or 8, used for every margin, padding and gap.

When to useAlways. Pick the scale once and use only those values.
When to avoidAvoid arbitrary one-off values like 13px or 27px. They make layouts feel subtly off.
Say it like a designerUse an 8pt spacing scale (4, 8, 12, 16, 24, 32, 48, 64px) for all padding, margins and gaps. No arbitrary values.

Type scale

Also calledmodular scale, typographic scale, font size ramp

A set of font sizes made by multiplying a base size by a fixed ratio. It gives the type a predictable hierarchy.

When to useDefining headings and body sizes for a product or site.
When to avoidAvoid ratios above 1.333 in dense apps. Big jumps waste space in dashboards.
Say it like a designerSet up a modular type scale with a 16px base and a 1.25 (major third) ratio: 12, 14, 16, 20, 25, 31, 39px.
The quiet art of good defaults

Body copy stays neutral so the headline can carry the voice. Numbers: $1,280.00

Font pairings

Also calledtype pairing, typeface combination, superfamily

Two or three typefaces chosen to contrast in role, for example a serif for headlines with a sans for body text.

When to useBrand sites, editorial and marketing pages that need personality.
When to avoidMore than 2 families plus a mono. Pairing two similar sans-serifs reads as a mistake.
Say it like a designerPair a high-contrast serif (like Fraunces) for headings with a neutral sans (like Inter) for body text, and use a mono for code and numbers.
Leading1.5Tracking0em

Good typography is invisible. When line-height and tracking are right, the reader simply reads, and their eyes find the next line without effort.

Line-height & letter-spacing

Also calledleading, tracking, kerning

Leading is the vertical space between lines. Tracking is the even spacing between all letters. Kerning adjusts specific letter pairs.

When to useUse about 1.5 leading for body text and 1.1 to 1.2 for big headings. Tighten tracking on large display type.
When to avoidAvoid tight leading on long paragraphs, and avoid loose tracking on lowercase body text.
Say it like a designerUse line-height 1.5 for body and 1.1 for headings, tighten tracking on large headings to -0.02em, and add +0.08em tracking to small uppercase labels.
Primary
Primary container
Secondary
Tertiary
Surface
Surface variant
On surface
Outline

Color roles

Also calledprimary, secondary, tertiary, neutral, surface, on-color

Colors are named by job, not by hue. Primary is the brand and key actions, secondary supports it, neutrals are surfaces and text, and “on-” colors are text that sits on top of each.

When to useBuilding any theme. It is what makes dark mode and rebranding possible.
When to avoidAvoid naming tokens “blue-button”. Avoid using primary for everything, because then nothing stands out.
Say it like a designerDefine color roles as tokens: primary, on-primary, secondary, surface, surface-variant, on-surface, outline. Use primary only for key actions and active states.
SuccessPayment received.
WarningYour trial ends in 3 days.
ErrorCard was declined.
InfoNew version available.

Semantic colors

Also calledstatus colors, feedback colors, success / warning / error / info

Reserved colors that carry meaning: green for success, amber for warning, red for error or destructive, blue for info.

When to useValidation, alerts, badges, statuses and charts that show good or bad.
When to avoidNever use red or green decoratively. Never use color alone to carry the meaning; add an icon or text.
Say it like a designerUse semantic tokens: success (green), warning (amber), error (red), info (blue), each with a soft background tint and an icon. Never rely on color alone.
Aa Large text
Body text sample, 14px regular

Contrast ratio (WCAG)

Also calledcolor contrast, AA / AAA, accessibility contrast

The luminance difference between text and its background. WCAG AA needs 4.5:1 for body text and 3:1 for large text and UI components.

When to useCheck every text and background pair, including placeholder text and disabled-looking secondary text.
When to avoidAvoid light grey on white and thin text over photos without a scrim.
Say it like a designerMake sure all text meets WCAG AA contrast: 4.5:1 for body and 3:1 for large text and icons. Check placeholder and muted text too.
0
4
8
12
16
24
full

Border radius scale

Also calledcorner radius, rounding, shape scale

A small set of corner radii. Sharp corners feel serious and technical, while round and pill shapes feel friendly.

When to useGive nested elements a smaller radius than their parent (inner = outer − padding).
When to avoidAvoid mixing many radii at random, and avoid fully round corners on big cards.
Say it like a designerUse a radius scale of 4 / 8 / 12 / 16 / 24px plus full (pill). Inputs and buttons use 10px, cards 16px, and nested radius = outer radius minus padding.
0
1
2
3
4
5

Elevation scale

Also calledshadow scale, z-depth, depth levels

Consistent shadow levels that show how far an element floats above the page. Higher means more important or more temporary.

When to useUse level 1 for cards, 2 to 3 for dropdowns and popovers, 4 to 5 for modals and toasts.
When to avoidAvoid heavy shadows on everything. In dark mode, lighter surfaces show elevation better than shadows.
Say it like a designerUse a 5-level elevation scale: cards at level 1, menus at level 3, modals at level 5. Use soft, layered shadows with low opacity.
Columns · gutters · margins. The content spans 8 + 4 columns.

Layout grid & columns

Also called12-column grid, gutters, margins, container width

An invisible set of columns (often 12 on desktop, 4 on mobile) separated by gutters, with outer margins. Content snaps to it.

When to useUse it to align content across a page and keep sections consistent.
When to avoidAvoid placing every element on a strict column in small components; use it for page structure.
Say it like a designerUse a 12-column grid with 24px gutters and a 1200px max container width, collapsing to 4 columns with 16px margins on mobile.
outline vs filled (active)

Icon styles

Also calledoutline / line icons, filled / solid icons, duotone, icon sizes

Icons share a stroke weight, corner style and grid (usually 24px). Outline icons are the default state, and filled icons often mean active or selected.

When to useUse one icon family throughout, at 16, 20 or 24px sizes, aligned to the text baseline.
When to avoidAvoid mixing icon sets, and avoid icons without labels for uncommon actions.
Say it like a designerUse a single outline icon set (e.g. Lucide) at 20px with a 2px stroke. Switch to the filled variant for active nav items.
/* tokens */
:root {
  --color-primary: #4f46e5;
  --space-4: 16px;
  --radius-md: 10px;
  --shadow-2: 0 2px 6px rgb(0 0 0 / .07);
}
.button { background: var(--color-primary); }

Design tokens

Also calledvariables, theme tokens, CSS custom properties

Named variables (color-primary, space-4, radius-md) that store design decisions so you change them in one place.

When to useAny project with more than one screen, or with theming or dark mode.
When to avoidHard-coding hex values and pixel numbers across components.
Say it like a designerImplement the design as CSS custom properties (tokens) for color, spacing, radius, shadow and typography, and reference only tokens in components.
02

Buttons

Buttons trigger actions. Their style signals emphasis: one high-emphasis button per view, with everything else stepping down.

Primary button

Also calledfilled button, solid button, CTA button, high-emphasis

A solid fill in the brand color. It is the single most important action on the screen.

When to useThe main action: Save, Continue, Buy, Sign up.
When to avoidAvoid more than one primary per area. If everything is primary, nothing is.
Say it like a designerMake the main action a solid primary button (filled brand color, white label, 40px tall, 10px radius) and make every other action lower emphasis.

Secondary button

Also calleddefault button, neutral button, medium-emphasis

A neutral surface button with a subtle border, used beside the primary for the alternative action.

When to useCancel, Back, Export: actions that matter but aren't the main path.
When to avoidMaking it so strong it competes with the primary.
Say it like a designerPair the primary with a secondary button: white or neutral surface, 1px border, dark text, subtle shadow.

Tonal button

Also calledfilled tonal, soft button, tinted button, subtle filled

A light tint of the brand color with darker text. It sits between primary and outline in emphasis (Material 3 term).

When to useImportant but non-final actions, or a secondary action that should still feel on-brand.
When to avoidOn tinted backgrounds, where it disappears.
Say it like a designerUse a tonal (soft) button for secondary actions: light primary-tinted background with dark primary text, no border.

Tertiary / text button

Also calledtext button, flat button, low-emphasis, borderless

Only a colored label with no container until hover. It is the lowest emphasis button.

When to useLearn more, Skip, View all, or actions in dense toolbars and dialogs.
When to avoidImportant actions. It can be missed or mistaken for plain text.
Say it like a designerMake low-priority actions tertiary text buttons: no background or border, primary-colored label, light tint on hover.

Outline button

Also calledoutlined button, stroke button, often called “ghost button”

A transparent fill with a visible border. Medium emphasis. Many teams call this a ghost button.

When to useSecondary actions next to a primary, like “Add to cart” beside “Buy now.”
When to avoidOn busy images, where thin borders get lost.
Say it like a designerMake the secondary action an outline (ghost) button: transparent fill, 1px primary border and primary text, tinted fill on hover.

Ghost button

Also calledsubtle button, quiet button, minimal button, borderless

In stricter systems, a ghost button has no border and no fill, only a background on hover. It is common in toolbars.

When to useToolbars, table rows and nav where many buttons sit together.
When to avoidAs the only call to action, because it has too little affordance.
Say it like a designerUse ghost (subtle) buttons in the toolbar: no border or fill, neutral text, light grey background on hover.

Elevated button

Also calledraised button

A surface-colored button with a shadow (Material 3). It separates the button from patterned or image backgrounds.

When to useButtons over imagery or patterned surfaces that need separation.
When to avoidAs a default style, because shadows add noise.
Say it like a designerUse an elevated button (surface fill, primary text, level-2 shadow) when the button sits on a busy background.

Destructive button

Also calleddanger button, critical button, delete button

Red-styled button for irreversible or harmful actions.

When to useDelete, Remove, Cancel subscription, usually inside a confirmation step.
When to avoidMaking it the most prominent thing on a normal page. Destructive actions should take a deliberate step.
Say it like a designerStyle irreversible actions as a destructive button (red fill or red outline) and require a confirmation dialog before executing.
EditShareLikeAdd

Icon button

Also calledicon-only button

A square or circular button containing only an icon.

When to useUniversal actions (close, edit, more, like) where space is tight.
When to avoidAmbiguous icons. Always add an aria-label, and a tooltip for anything uncommon.
Say it like a designerUse 40×40px icon buttons with a 20px icon, a hover background, an aria-label and a tooltip.

Floating action button (FAB)

Also calledFAB, extended FAB, floating button

A large, elevated button that floats above content, usually bottom-right, for the screen's primary creative action. An extended FAB adds a label.

When to useMobile apps with one dominant action: Compose, New, Add.
When to avoidOn screens with no single main action, or on desktop web where it often feels foreign.
Say it like a designerAdd a floating action button (56px, rounded square, elevated) fixed at the bottom-right for the “Compose” action, and an extended FAB with a label on wider screens.

Split button

Also calledsplit dropdown button, menu button with default

A main action joined to a small arrow that opens related alternatives.

When to useOne common default with a few variants: Save / Save as, Merge / Squash and merge.
When to avoidWhen the options are equally important. Use a dropdown menu instead.
Say it like a designerUse a split button: the primary label performs the default action, and an attached chevron opens a menu of alternatives.

Button group

Also calledgrouped buttons, connected buttons, toolbar group

Related buttons visually joined into one unit.

When to useRelated actions like text formatting or view options.
When to avoidUnrelated actions. Grouping implies they belong together (Gestalt proximity).
Say it like a designerGroup related actions into a connected button group with shared borders and a toggled state for active options.

Segmented button

Also calledsegmented control, toggle group, single-select button group

A row of mutually exclusive options where exactly one is selected, like a radio group styled as buttons.

When to useSwitching between 2 to 5 views or modes: Day / Week / Month, List / Grid.
When to avoidMore than about 5 options, or options that are actions rather than states.
Say it like a designerUse a segmented control for Day / Week / Month: a pill track with the selected segment raised on a white surface.

Toggle button

Also calledstateful button, on/off button, pressed button

A button that stays on or off (aria-pressed). It looks different when active.

When to useFollow / Following, Bold, Mute: binary states that are shown as buttons.
When to avoidSettings that apply immediately. A switch is clearer there.
Say it like a designerMake “Follow” a toggle button: outline when off, filled primary when on, and change the label to “Following”.

Pill button

Also calledrounded button, capsule button, stadium button

A button with fully rounded ends (border-radius: 999px). It reads as friendly and modern.

When to useConsumer apps, tags and filters, playful brands.
When to avoidEnterprise or serious tools where squarer shapes signal precision.
Say it like a designerUse pill-shaped buttons (fully rounded, border-radius 999px) for a friendlier feel.

Loading button

Also calledbusy button, progress button, async button

A button that shows a spinner and blocks repeat clicks while its action runs.

When to useAny action that takes longer than about 300ms, like submits and payments.
When to avoidReplacing the label width suddenly, which causes layout jumps. Keep the width fixed.
Say it like a designerOn submit, put the button in a loading state: keep its width, show an inline spinner with “Saving…”, disable repeat clicks, then show success.

Gradient button

Also calledgradient CTA, colorful button

A fill that blends two or more colors, often with an animated shift on hover.

When to useMarketing CTAs, creative and AI or consumer brands that want energy.
When to avoidProduct UI with many buttons, or when the text loses contrast on part of the gradient.
Say it like a designerMake the hero CTA a gradient button (indigo → pink → amber at 135°) with a background-position shift and colored glow on hover.

Neumorphic button

Also calledsoft UI, neumorphism

The button appears extruded from the same-colored background using a light and a dark shadow, and pressed it looks inset.

When to useSmall playful UIs, music or IoT controls, Dribbble-style concepts.
When to avoidReal products that need accessibility. Contrast is usually too low and states are hard to see.
Say it like a designerUse a neumorphic (soft UI) button: same color as the background, light top-left and dark bottom-right shadows, inset shadow when pressed.

Glass button

Also calledglassmorphism button, frosted button, translucent button

A semi-transparent button with backdrop blur that lets a colorful background show through.

When to useOver images, video or vivid gradients in hero sections and media players.
When to avoidOn flat, plain backgrounds, where the effect does nothing.
Say it like a designerUse frosted-glass buttons on the hero: white at 16% opacity, 12px backdrop blur, 1px white border at 35%, white text.

3D / pressed button

Also calledtactile button, skeuomorphic button, chunky button

A solid bottom shadow gives depth, and on press the button moves down as if physically pushed.

When to useGames, kids' apps, playful onboarding (the Duolingo-style feel).
When to avoidSerious, minimal or data-heavy interfaces.
Say it like a designerMake chunky 3D buttons with a solid darker bottom shadow (0 5px 0) that moves down 4px on press.

Button sizes

Also calledXS / S / M / L / XL, density

A consistent size ramp, usually 28, 32, 40, 48 and 56px tall, so buttons line up with inputs of the same size.

When to useUse S in dense tables, M by default, L or XL for hero CTAs and touch-first screens.
When to avoidTouch targets under 44px (Apple HIG) or 48dp (Material) on mobile.
Say it like a designerUse button sizes S (32px), M (40px, default) and L (48px). Match input heights, and keep touch targets at least 44px on mobile.

Icon + label button

Also calledleading icon, trailing icon

An icon before the label clarifies the action. A trailing arrow implies forward motion or navigation.

When to useUse leading icons for actions (Download, Add) and trailing icons for direction (Next →, external link ↗).
When to avoidAdding icons to every button, which creates noise.
Say it like a designerAdd a leading icon to action buttons (Upload) and a trailing arrow to forward or navigation buttons (Next →), with an 8px gap.

Full-width button

Also calledblock button, stretched button

A button that stretches to the width of its container.

When to useMobile forms, cards and auth screens where the action ends a vertical flow.
When to avoidWide desktop layouts, where a 1200px-wide button looks broken.
Say it like a designerMake the submit button full-width (block) on mobile, and auto-width on desktop.

Button hierarchy

Also calledemphasis levels, CTA hierarchy, action priority

Pairing buttons of different emphasis so the eye picks the right one first: high (filled), medium (outline or tonal), low (text).

When to useEvery dialog, form footer and hero with more than one action.
When to avoidTwo equally loud buttons side by side.
Say it like a designerEstablish a clear button hierarchy: one filled primary, one outline secondary, and text buttons for tertiary actions. Place the primary on the right in dialogs.
03

Interaction states

Every interactive element has states. Showing them clearly is what makes an interface feel responsive and trustworthy. Hover and tab through these.

State playground

Also calledstate matrix, component states

One button, every state. Pick a state to force it, or interact with the live one.

When to useSpec all states before building a component: default, hover, focus, pressed, disabled, loading, selected.
When to avoidShipping components with only the default state designed.
Say it like a designerDesign and implement all interaction states for every button and input: default, hover, focus-visible, active/pressed, disabled, loading and selected.

Default (rest) state

Also calledenabled, idle, resting

How the element looks when nothing is happening. It must still look clickable.

When to useThis is the baseline every other state is a variation of.
When to avoidMaking the default so flat that it doesn't read as interactive (missing signifiers).
Say it like a designerIn the default state, buttons should clearly look clickable: filled or bordered, with a pointer cursor.

Hover state

Also called:hover, mouse-over

Feedback when a pointer is over the element, usually a slightly darker or lighter fill, sometimes with a lift.

When to useAll clickable things on pointer devices. Keep it subtle, about 4 to 8% darker.
When to avoidHiding essential information behind hover. Touch screens have no hover.
Say it like a designerAdd hover states: darken the fill about 8% over 150ms ease-out, and show a pointer cursor. Never hide essential info behind hover.

Focus-visible state

Also calledfocus ring, keyboard focus, :focus-visible, focus indicator

A visible ring that appears when you navigate with the keyboard (press Tab). It is essential for accessibility.

When to useEvery interactive element. Use :focus-visible so it shows for keyboard users but not on mouse click.
When to avoidoutline: none without a replacement. That is one of the most common accessibility failures.
Say it like a designerAdd a clear focus-visible ring (2 to 3px primary-colored outline with 2px offset) on all interactive elements. Never remove outlines without a replacement.

Active / pressed state

Also called:active, pressed, tap state

Momentary feedback while the element is being clicked or tapped, often slightly darker or scaled to 98%.

When to useButtons and cards, to make taps feel physical and responsive.
When to avoidBig scale changes or slow animations that feel laggy.
Say it like a designerAdd a pressed state: scale to 0.98 and darken slightly while the button is held, under 100ms.
Enter your email to continue

Disabled state

Also calledinactive, unavailable, greyed out

Element can't be used right now. It shows reduced opacity and a not-allowed cursor and ignores clicks.

When to useActions that are temporarily unavailable, ideally with a reason nearby.
When to avoidDisabling a submit button with no explanation. Often it's better to allow the click and show what's missing.
Say it like a designerShow disabled buttons at 45% opacity with a not-allowed cursor, and explain why nearby (e.g. “Fill in your email to continue”).

Loading state

Also calledbusy, pending, in-progress

The action has started and the user should wait. It shows a spinner or progress and blocks double submits.

When to useAny async action. Show immediate feedback within 100ms (Doherty threshold: under 400ms feels instant).
When to avoidLeaving the button clickable during submission, which causes duplicate orders.
Say it like a designerWhile submitting, show a loading state: inline spinner, label “Processing…”, button disabled, same width.

Selected state

Also calledchecked, active, current, on

Shows which item is chosen in a set, like the current tab, a selected card or the active nav item.

When to useNav items, filters, list rows, segmented controls and option cards.
When to avoidShowing selection with color only. Add a check, weight or border change.
Say it like a designerShow selected items with a tinted background, primary border and a checkmark, not color alone.
⚠ Use at least 8 characters.

Error / invalid state

Also calledinvalid, error, danger state

The input or element has a problem. It shows a red border, an icon and a message that explains how to fix it.

When to useForm validation and failed actions.
When to avoidRed borders without a message, or vague text like “Invalid input.”
Say it like a designerFor invalid fields, show a red border, an error icon and a specific message below (“Password needs 8+ characters”), linked with aria-describedby.
04

Inputs & forms

Controls that collect information. A good form is mostly about labels, spacing, sensible defaults and helpful errors.

Text field: outlined

Also calledoutlined input, bordered text input

A field with a full 1px border on all sides. It is the most common, clearest field style on the web.

When to useDefault for most forms and apps.
When to avoidVery dense data grids, where borders add clutter.
Say it like a designerUse outlined text fields: 1px neutral border, 10px radius, 42px height, label above, primary border and focus ring on focus.

Text field: filled

Also calledfilled input, Material filled field

A tinted background with a bottom border only. It is a Material Design style that reads well on white surfaces.

When to useMaterial-style apps and forms on plain white backgrounds.
When to avoidOn grey surfaces, where the fill blends in and the field loses its edges.
Say it like a designerUse filled text fields: light grey background, bottom border that turns primary and 2px thick on focus, top corners rounded.

Text field: underlined

Also calledunderline input, line input, minimal field

Only a bottom line. It looks minimal and elegant but has the weakest affordance.

When to useMinimal, editorial or luxury designs, and inline editing.
When to avoidLong forms and older users, because it can be hard to see where to click.
Say it like a designerUse minimal underlined inputs: transparent background, single bottom border, primary 2px underline on focus.

Floating label

Also calledfloat label, animated label, inset label

The label sits inside the field like a placeholder, then shrinks and moves up when you type.

When to useCompact forms where you want a label without the extra vertical space.
When to avoidWhen the label might get cut off when long. Never use placeholder-only fields with no label.
Say it like a designerUse floating labels: the label starts inside the input and animates to a small label at the top on focus or when filled.
Letters and numbers only, 3–20 characters.
Enter a complete email, like name@domain.com

Helper & error text

Also calledhint text, supporting text, validation message

Small text under a field. Helper text explains the format before input, and error text explains what went wrong and how to fix it.

When to useAny field with format requirements (passwords, phone numbers) or validation.
When to avoidLong paragraphs, or blaming wording (“You entered an invalid…”).
Say it like a designerAdd helper text under fields (12px, muted) and replace it with a specific red error message when validation fails.

Search field with clear

Also calledsearch bar, search input, clear button

An input with a leading magnifier icon and an ✕ that appears once there is text, to clear it.

When to useFiltering lists and site search.
When to avoidHiding search behind an icon when search is a main task.
Say it like a designerAdd a search field with a leading search icon, placeholder “Search…”, and an ✕ clear button that appears when text is entered. Esc clears.

Select / dropdown

Also calledselect menu, picker, dropdown list

Pick one option from a list that is closed by default.

When to usePicking from 5 to 15 known options (country, role).
When to avoidUnder 5 options (use radios or a segmented control) or long lists of 15+ (use a combobox with search).
Say it like a designerUse a native select for country with a custom chevron; for fewer than 5 options use radio buttons instead.

Combobox / autocomplete

Also calledtypeahead, autosuggest, searchable select

A text input that filters a list of suggestions as you type, navigable with arrow keys.

When to useLong option lists (countries, users, tags) and search with suggestions.
When to avoidShort lists where a simple select is faster.
Say it like a designerUse a combobox (autocomplete): typing filters the options, highlights the matched text, arrow keys move, Enter selects.

Checkbox

Also calledcheck box, tick box, multi-select

Select any number of independent options. It also has an indeterminate “some selected” state.

When to useMulti-select lists, “I agree” consent, selecting table rows.
When to avoidSettings that apply instantly (use a switch), or choosing exactly one (use radios).
Say it like a designerUse checkboxes for multi-select options, with a “Select all” parent checkbox that shows an indeterminate state when only some are checked.
Shipping

Radio buttons

Also calledradio group, option buttons, single-select

Pick exactly one option from a visible set. All the options stay on screen.

When to use2 to 5 mutually exclusive options where comparing them matters (shipping speed).
When to avoidLong lists (use a select) or a single yes/no (use a checkbox or switch).
Say it like a designerUse a radio group for shipping speed with all options visible, one preselected as a sensible default.

Switch / toggle

Also calledtoggle switch, on/off switch, lightswitch

A binary on/off control that takes effect immediately, like a light switch.

When to useSettings that apply instantly: dark mode, notifications, Wi-Fi.
When to avoidInside forms that need a Save button. Use a checkbox there.
Say it like a designerUse toggle switches for instant-apply settings: 44×26px track, white thumb, primary color when on, label on the left.

Slider / range

Also calledrange slider, scrubber, track bar

Drag a thumb along a track to pick a value or range. Show the value in a label.

When to useApproximate values like volume, price filters, brightness.
When to avoidExact values (pair it with a number input) or tiny ranges.
Say it like a designerAdd a range slider for price with the live value shown above the thumb, and pair it with a number input for precision.
1

Number stepper

Also calledquantity selector, spinner input, increment/decrement

A number with − and + buttons for small adjustments.

When to useQuantities in carts, guest counts: small integer ranges.
When to avoidLarge numbers or precise values where typing is faster.
Say it like a designerUse a quantity stepper (− 1 +) with a min of 1, disabling “−” at the minimum.

Date picker

Also calledcalendar picker, datepicker, date input

A field that opens a month grid for choosing a date.

When to useBookings and scheduling, when seeing the day of the week matters.
When to avoidBirthdays, where scrolling back decades is painful. Use three text fields or a typed input.
Say it like a designerAdd a date picker: the input opens a popover month grid with prev/next arrows, today outlined, and the selected day filled with primary.
Type or paste “482913”

OTP / verification code input

Also calledone-time code, PIN input, segmented input

Separate boxes for each digit. Focus moves forward automatically, backspace moves back, and paste fills all boxes.

When to use2FA and email or SMS verification codes.
When to avoidBreaking paste or autofill. Always support one-time-code autocomplete.
Say it like a designerBuild a 6-digit OTP input: separate boxes, auto-advance on type, backspace goes to the previous box, pasting a full code fills all boxes.
0/160

Textarea

Also calledmultiline input, text area, auto-grow

A multi-line text input, ideally one that grows with its content and shows a character count.

When to useComments, messages, descriptions.
When to avoidShort single values.
Say it like a designerUse an auto-growing textarea with a live character counter (e.g. 0/280) that turns amber near the limit.

File upload / dropzone

Also calleddrag and drop upload, file picker, drop area

A dashed area you can drop files on or click to browse. It highlights on drag-over.

When to useUploading images and documents, especially several at once.
When to avoidHiding the click-to-browse fallback. Some users can't drag.
Say it like a designerAdd a drag-and-drop dropzone: dashed border, upload icon, “Drag files here or browse”, highlight on drag-over, and list files after upload.
designux

Tags / chips input

Also calledtoken input, multi-value input, tag field

Type a value and press Enter or comma to turn it into a removable chip.

When to useAdding tags, email recipients, skills or keywords.
When to avoidFixed option sets. Use selectable filter chips instead.
Say it like a designerBuild a tags input: typing and pressing Enter or comma creates a removable chip, Backspace on empty removes the last chip.
○ 8+ characters○ A number○ An uppercase letter

Inline validation

Also calledlive validation, real-time validation, password strength meter

Feedback while or right after you type, like a strength meter or ✓ when valid. It validates on blur, not on every keystroke for errors.

When to usePasswords, usernames (availability) and email format.
When to avoidShowing errors before the user has finished typing. That feels like being scolded.
Say it like a designerAdd inline validation: show success checkmarks as rules are met, a 4-segment password strength meter, and show errors only on blur.

Form layout

Also calledsingle-column form, field grouping, label alignment

Arrange fields in one column with top-aligned labels, group related fields, and put the primary action at the end.

When to useNearly all forms. NN/g research shows single-column top-labeled forms are completed fastest.
When to avoidMulti-column forms that zig-zag the eye, except for naturally paired fields (first/last name, city/zip).
Say it like a designerLay out the form in a single column with labels above fields, 16px between fields, 32px between groups, and the primary button left-aligned at the bottom.
06

Content containers

Ways to group and present content. Choose based on how people will scan, compare or act on the information.

Elevated

Shadow, no border.

Outlined

1px border, flat.

Filled

Tinted surface.

Media card

Image, title, meta.

JP
Horizontal
Thumbnail + text

Card variants

Also calledelevated card, outlined card, filled card, media card

A container grouping info about one subject. It comes in three flavors: elevated (shadow), outlined (border) and filled (tinted). Media cards add an image.

When to useBrowsable collections of similar items: products, articles, projects.
When to avoidWrapping every block of a page in a card (“card soup”), or tables of data that need comparing.
Say it like a designerDisplay items as cards: 16px radius, 1px border (outlined) or soft shadow (elevated), 16:9 image on top, title, 2-line description, and actions at the bottom. Whole card clickable.
MK
Maya KimCan you review the hero copy before…
2m
2
DS
Design syncNotes: switch to the 8pt grid across all…
1h
RO
Rafael OrtizShipped! 🚀 Thanks for the feedback
Tue

List & list item

Also calledlist view, list row, cell (iOS), item

Rows of items, each with an optional leading avatar or icon, primary and secondary text, and trailing meta or action.

When to useMessages, settings, contacts: anything scanned top-to-bottom.
When to avoidComparing many attributes. Use a table for that.
Say it like a designerShow items as a list: each row has a 40px leading avatar, bold title, one-line muted subtitle with ellipsis, timestamp on the right, and hover highlight.
Ada LovelacePaid$1,2802026-10-02
Grace HopperPending$5402026-10-05
Alan TuringPaid$2,3102026-09-28
Katherine JohnsonFailed$992026-10-11
Linus T.Paid$7602026-10-14
Margaret H.Pending$1,8902026-09-30
Dennis R.Paid$3102026-10-08

Data table

Also calledtable, data grid, sortable table, zebra striping

Rows and columns for comparing records. Common features are sortable headers, zebra striping, a sticky header and right-aligned numbers.

When to useComparing many items across many attributes: admin panels, finance, inventory.
When to avoidMobile, unless you reflow rows into cards. Avoid it for content that isn't really tabular.
Say it like a designerBuild a data table with sortable column headers (arrow indicator), zebra striping, sticky header, right-aligned tabular numbers, row hover, and status badges.
What is a design system?

A shared library of tokens, components and guidelines that keeps a product consistent.

Do I need Figma?

No. You can define tokens directly in CSS and build components in code.

Can I cancel anytime?

Yes, there's no contract. Cancel from Settings → Billing.

Accordion

Also calledcollapsible, expandable sections, disclosure, FAQ

Stacked headers that expand to reveal content. It is a form of progressive disclosure.

When to useFAQs, settings groups, long content on mobile.
When to avoidContent that most people need to read anyway. Hiding it adds clicks.
Say it like a designerPut the FAQ in an accordion: each question is a full-width row with a +/− (or chevron) icon that rotates; one or many can be open.

Grid vs masonry

Also calleduniform grid, masonry layout, Pinterest layout, waterfall

A uniform grid aligns rows and columns. Masonry packs items of different heights into columns with no row gaps.

When to useUse grid for products to compare. Use masonry for visual inspiration feeds with mixed image sizes.
When to avoidMasonry for ordered content, because the reading order gets confusing.
Say it like a designerShow the gallery as a masonry layout (CSS columns, 3 columns, 12px gap) so images keep their natural aspect ratios.
✨ New in 2026

Design faster, ship better

The toolkit for teams who care about craft.

Hero: centered

Also calledcentered hero, hero banner, above-the-fold hero

A big headline, subhead and CTA stacked in the center. It is the classic landing page opener.

When to useProduct launches and simple, message-first landing pages.
When to avoidWhen a product screenshot is essential to understanding. Use a split hero then.
Say it like a designerCreate a centered hero: small eyebrow badge, 56px bold headline (max 12 words), 18px muted subhead (max 2 lines), primary + secondary CTA, 96px vertical padding.
Analytics

Know what's working

Real-time insights without the spreadsheets.

Hero: split

Also calledsplit hero, two-column hero, 50/50 hero

Text and CTA on one side, product image or illustration on the other.

When to useSaaS and apps where showing the product builds trust.
When to avoidWhen there is no strong visual. A stock image weakens it.
Say it like a designerMake a split hero: left column with headline, subhead, CTA and social proof; right column with a product screenshot in a device frame with a soft shadow. Stack on mobile.
Iceland · 7 days

Chase the northern lights

Hero: image background

Also calledfull-bleed hero, background image hero, cover hero

A headline over a full-width photo or video, with a dark gradient overlay (scrim) so the text stays readable.

When to useTravel, hospitality, fashion and events, where mood sells.
When to avoidText over busy imagery without a scrim, which fails contrast.
Say it like a designerCreate a full-bleed image hero with a dark gradient scrim (black 60% → transparent) behind white headline text, left-aligned at the bottom.
Starter
$0/mo
Basic features
  • 1 project
  • Community support
Most popularPro
$12/mo
For professionals
  • Unlimited projects
  • Priority support
  • Analytics
Team
$29/mo
For teams
  • Everything in Pro
  • SSO
  • Admin roles

Pricing table

Also calledpricing cards, plan comparison, tiers

Side-by-side plans, usually 3, with the recommended one highlighted (a decoy and anchor effect).

When to useSaaS and subscription pricing pages.
When to avoidMore than 4 tiers (choice overload / Hick's law).
Say it like a designerAdd a 3-tier pricing table: middle “Pro” plan highlighted with a primary border, “Most popular” badge and slight elevation; monthly/yearly toggle above.
FastLoads in under a second.
SecureEncrypted end to end.
InsightfulSee what matters.

Feature grid

Also calledfeatures section, benefits grid, icon grid

A grid of 3 to 6 features, each with an icon, a short title and one or two lines of description.

When to useExplaining product benefits on a landing page.
When to avoidParagraph-long descriptions. Keep each one scannable.
Say it like a designerAdd a 3-column feature grid: each item has a 40px tinted icon tile, bold 16px title and a 2-line muted description, 32px gap.
“We cut our design review time in half. The whole team speaks the same language now.”
LN
Lena Novak
Head of Design, Fieldnote

Testimonial

Also calledquote card, social proof, review

A quote from a real customer with name, role, photo and sometimes a star rating.

When to useNear CTAs and pricing, to reduce doubt.
When to avoidGeneric, anonymous quotes, which hurt trust.
Say it like a designerAdd a testimonial card: 5-star rating, a short quote in 18px, then avatar, name and role/company below.
Revenue$48.2k▲ 12.4% vs last month
Active users3,912▲ 4.1% vs last month
Churn2.3%▼ 0.4% vs last month
Avg. response1.8s▲ 0.3s vs last month

Stat / KPI tiles

Also calledmetric cards, KPI cards, stat cards, scorecards

Big numbers with a label and a trend indicator (▲ +12% in green).

When to useDashboards and landing page social proof (“10k+ teams”).
When to avoidToo many tiles. Show the 3 to 5 that matter.
Say it like a designerAdd a row of 4 KPI tiles: small muted label, large 28px number with tabular figures, and a green ▲ or red ▼ delta vs last period.
  1. Order placedOct 14, 9:12 AM
  2. ShippedOct 15, 2:40 PM
  3. Out for deliveryExpected today
  4. Delivered-

Timeline

Also calledactivity feed, history, changelog, vertical timeline

Events in chronological order along a line with markers.

When to useOrder tracking, activity logs, changelogs, roadmaps.
When to avoidNon-sequential content.
Say it like a designerShow order status as a vertical timeline: filled dots for completed steps, outlined for upcoming, timestamp under each label.
JP
ALGHATKJ+3

Avatar & avatar group

Also calledprofile picture, user image, facepile, avatar stack

A circle with a photo or initials. Groups overlap them to show who's involved (a “facepile”).

When to useComments, assignees, collaborators, account menu.
When to avoidHuge stacks. Show 3 to 4 and then “+N.”
Say it like a designerShow collaborators as an overlapping avatar group (32px, 2px white ring, -8px overlap), capped at 4 with a “+3” counter; add a green presence dot for online users.
ActivePendingFailedDraftNew3

Badge

Also calledstatus badge, label, pill, notification badge, counter

A small label for status or counts. A notification badge is the red dot or number on an icon.

When to useStatuses (Active, Draft), unread counts, “New” markers.
When to avoidMaking badges clickable (use chips), or putting badges everywhere.
Say it like a designerUse status badges: small pill, soft tinted background with matching darker text, a leading dot; and a red count badge on the bell icon.

Tag / chip

Also calledfilter chip, choice chip, input chip, assist chip

Compact, often interactive, elements. Filter chips toggle filters, input chips are removable values, assist chips are suggested actions.

When to useFilters above results, selected values, suggested replies.
When to avoidConfusing chips with buttons for main actions.
Say it like a designerAdd filter chips above the results: rounded-full outlined chips that become tinted with a checkmark when selected; multiple can be active.
Item 1
Item 2
Item 3

Load more vs infinite scroll

Also calledload more button, infinite scroll, lazy loading

Two ways to reveal long lists. “Load more” gives the user control, while infinite scroll loads automatically near the bottom.

When to useInfinite scroll suits feeds for casual browsing. Load more suits goal-driven lists, and pages with footers people need to reach.
When to avoidInfinite scroll when the footer matters or users need to find their place again.
Say it like a designerReplace pagination with a “Load more” button under the list that appends 10 items and shows a spinner while loading.
07

Overlays & feedback

How the interface talks back. Overlays interrupt, and feedback reassures. Match the interruption level to the importance of the message.

Bottom sheet

Also calledaction sheet, drawer (mobile), modal bottom sheet

A panel that slides up from the bottom edge, common on mobile, with a drag handle.

When to useMobile actions and options (share, filters) that keep context visible.
When to avoidDesktop, where a menu or modal fits better.
Say it like a designerOn mobile, show options in a bottom sheet: slides up from the bottom, 20px top radius, grab handle, dimmed backdrop, swipe or tap outside to dismiss.

Side sheet / drawer

Also calledside panel, slide-over, flyout panel, inspector

A panel that slides in from the right edge for detail or editing without leaving the page.

When to useViewing or editing a record from a list, filters, and settings panels.
When to avoidTiny confirmations (use a dialog) or full workflows (use a page).
Say it like a designerOpen record details in a right side sheet (slide-over, 400px wide) with a header, close button, scrollable body and sticky footer actions.
Pro plan

Unlimited projects and priority support. Renews Nov 1.

Popover

Also calledpopup, flyout, rich tooltip

A small floating panel attached to a trigger. It can hold interactive content and opens on click.

When to useExtra details, quick settings, mini forms tied to an element.
When to avoidCritical content or long forms.
Say it like a designerShow a popover on click next to the trigger: 280px card with arrow, title, short text and a small action; closes on outside click or Esc.
Copy link · ⌘CAPRAnnual percentage rate

Tooltip

Also calledhint, title text, info tip

A short text label shown on hover or keyboard focus. It is not interactive.

When to useLabeling icon buttons, explaining truncated text, keyboard shortcuts.
When to avoidEssential information, or anything on touch-only devices. Never put links in tooltips.
Say it like a designerAdd tooltips to icon buttons: dark 12px label above, appears on hover and keyboard focus after a short delay, with a small arrow.

Toast / snackbar

Also calledtoast notification, snackbar, flash message

A brief, non-blocking message that appears in a corner and disappears automatically, often with an Undo action.

When to useConfirming completed actions: “Message sent”, “Item deleted · Undo”.
When to avoidErrors that need action, or critical info, since toasts vanish.
Say it like a designerAfter saving, show a toast bottom-right: dark pill, short message, optional Undo action, auto-dismiss after 4 seconds, announced to screen readers via aria-live.
🎉 Version 3.0 is live. See what's new →

Banner

Also calledannouncement bar, site-wide alert, top banner

A full-width message at the top of a page or app, for system-level info that persists until dismissed.

When to useOutages, trial expiry, cookie notice, product announcements.
When to avoidStacking several banners, or marketing that people learn to ignore (banner blindness).
Say it like a designerAdd a dismissible announcement banner at the top: full-width, primary tinted background, short message with a link, ✕ close button on the right.
TipPress ⌘K to open the command palette.

Inline alert

Also calledcallout, alert box, notice, message bar

A contained message within the page content, near what it's about.

When to useContextual warnings or info inside forms, settings or docs.
When to avoidTransient confirmations (use a toast).
Say it like a designerShow an inline alert above the form: warning tint, left icon, bold title, one-line description and an optional action link.
Uploading design.fig40%
Indeterminate

Progress bar

Also calleddeterminate progress, linear progress, indeterminate

Shows how much of a task is done. Determinate shows a known %, and indeterminate shows that work is happening for an unknown time.

When to useUploads, multi-step tasks, anything over about 2 seconds.
When to avoidFake progress that stalls at 99%.
Say it like a designerShow a determinate progress bar during upload (8px, rounded, primary fill, percentage label) and an indeterminate bar when the duration is unknown.

Spinner

Also calledloading indicator, activity indicator, loader, throbber

A rotating indicator for short, unknown waits.

When to useShort waits (1 to 3 seconds) and inline loading in buttons.
When to avoidLong waits (use progress or a skeleton) or whole pages (use a skeleton screen).
Say it like a designerUse a small inline spinner (16–24px, primary color, 0.7s rotation) for short waits; switch to a skeleton for page loads.

Skeleton loader

Also calledskeleton screen, content placeholder, shimmer

Grey placeholder shapes that mimic the layout while content loads, often with a shimmer. It feels faster than a spinner.

When to useLoading cards, lists and profiles, where the layout is known in advance.
When to avoidVery fast loads under 300ms, where it flashes. Show nothing then.
Say it like a designerWhile data loads, show skeleton placeholders matching the final layout (avatar circle, 2 text lines, image block) with a subtle shimmer, then fade in the content.

No projects yet

Create your first project to start organizing your work.

Empty state

Also calledzero state, blank slate, first-use state

What shows when there is no data yet: an illustration or icon, a short explanation and a clear next action.

When to useNew accounts, empty search results, cleared inboxes.
When to avoidA blank screen or plain “No data.” It is a missed onboarding chance.
Say it like a designerDesign an empty state: centered icon in a soft circle, short headline (“No projects yet”), one-line explanation, and a primary “Create project” button.

Couldn't load projects

Check your connection and try again.

Error state

Also callederror page, failure state, 404/500, offline state

Explains that something failed, in human language, with a way to recover.

When to useFailed loads, 404s, offline, permission errors.
When to avoidRaw error codes, blame, or dead ends with no next step.
Say it like a designerShow a friendly error state: warning icon, plain-language headline (“We couldn't load your projects”), cause if known, and a “Try again” button plus a secondary link.

Payment successful

Order #4821 · receipt sent to your email

Success state

Also calledconfirmation screen, done state, completion

Confirms that a task completed, often with a check animation and the next step.

When to useAfter payment, sign-up, form submission.
When to avoidLeaving people unsure whether it worked.
Say it like a designerAfter checkout, show a success state: animated green checkmark, “Payment successful”, order summary line, and next-step buttons.

Confirmation dialog

Also calledalert dialog, destructive confirmation, “are you sure?”

A modal asking people to confirm a risky or irreversible action. The button label names the action.

When to useDeleting, discarding unsaved work, irreversible changes.
When to avoidRoutine actions. Too many confirmations train people to click through. Offer Undo instead where possible.
Say it like a designerBefore deleting, show a confirmation dialog: title “Delete project?”, consequence explained, red “Delete project” button (not “OK”), and Cancel focused by default.

Onboarding coach marks

Also calledproduct tour, walkthrough, hotspots, spotlight tooltips

Tooltips that point to UI elements in sequence, often with a spotlight dimming the rest.

When to useIntroducing a few non-obvious features to new users.
When to avoidLong tours of obvious features. Most people skip them, so keep it to 3 steps or fewer.
Say it like a designerAdd a 3-step coach-mark tour for new users: spotlight the element, dim the rest, tooltip with title, “1 of 3”, Next and Skip.
08

Effects & motion

Surface treatments and movement. Use them to add depth, guide attention and confirm actions, never just to decorate. Less is usually more.

Soft
Hard
Colored
Inset

Shadow styles

Also calleddrop shadow, soft shadow, hard shadow, colored shadow, inner shadow

Different shadow personalities: soft layered (modern), hard offset (brutalist/retro), colored (playful glow) and inset (pressed or recessed).

When to useSoft shadows for most UIs, hard offsets for bold, quirky brands, and inset for input wells.
When to avoidPure black, high-opacity, single-layer shadows, which look dated (circa 2010).
Say it like a designerUse soft, layered shadows (two shadows: a tight one at 4% and a wide one at 8% opacity) instead of a single dark drop shadow.
Now playingMidnight Drive

Glassmorphism

Also calledfrosted glass, backdrop blur, translucent UI, Liquid Glass (Apple)

Semi-transparent panels with background blur, a light border and a colorful backdrop. Apple's 2025 “Liquid Glass” is a refined take on it.

When to useOverlays on rich imagery: media controls, hero cards, OS-style panels.
When to avoidText-heavy content and plain backgrounds. Check contrast carefully.
Say it like a designerMake the card glassmorphic: background rgba(255,255,255,0.12), backdrop-filter blur(16px) saturate(150%), 1px rgba(255,255,255,0.3) border, over a vivid gradient.
72°

Neumorphism

Also calledsoft UI, new skeuomorphism

Elements look extruded from, or pressed into, the background using paired light and dark shadows on a mid-tone surface.

When to useConcept pieces, small control panels, playful single-purpose apps.
When to avoidProduction UIs, because low contrast fails accessibility and states are ambiguous.
Say it like a designerUse a neumorphic style: background #e6e9ef, elements share the background color with 8px 8px 16px #c4c8d0 and -8px -8px 16px #ffffff shadows.
Linear
Radial
Mesh

Gradients: linear, radial, mesh

Also calledcolor gradient, mesh gradient, aurora gradient

Linear blends along a line, radial blends from a point, and mesh layers several radial blobs for an organic “aurora” look.

When to useHero backgrounds, brand accents, CTA buttons, placeholder art.
When to avoidMuddy combinations (complementary colors make grey in the middle) and gradients behind long text.
Say it like a designerUse a soft mesh gradient background: 3–4 overlapping radial gradients (indigo, pink, amber) at low saturation, blurred, behind the hero.
✨ AISmart layoutsHighlighted with a gradient stroke.

Gradient border

Also calledgradient stroke, animated border, border-image

A border filled with a gradient, sometimes slowly rotating, to highlight a premium or featured element.

When to useFeatured pricing tier, “Pro” badges, AI features.
When to avoidOveruse, because it loses specialness fast.
Say it like a designerGive the featured card a 1.5px gradient border (indigo → pink → amber) using a padding-box/border-box background trick.
NEON

Glow

Also calledneon glow, outer glow, bloom, spotlight

A soft, colored light around elements. It works best on dark backgrounds and reads as energetic or futuristic.

When to useDark mode, gaming, crypto/AI and techy brands, and focus highlights.
When to avoidLight backgrounds, where it looks muddy, and body text.
Say it like a designerOn the dark hero, add a subtle glow to the primary CTA: box-shadow 0 0 24px rgba(99,102,241,.6) that intensifies on hover.
Clean
With grain

Noise / grain texture

Also calledfilm grain, noise overlay, texture

A subtle noise layer over flat colors or gradients. It removes banding and adds a tactile, analog feel.

When to useGradients, editorial and premium brands, and avoiding the “too digital” look.
When to avoidHeavy grain that hurts legibility or file size.
Say it like a designerAdd a subtle grain overlay (SVG feTurbulence noise at 6–10% opacity, mix-blend-mode overlay) on the hero gradient to remove banding.
Card 1
Hover me
Card 2
Hover me
Card 3
Hover me

Hover lift

Also calledcard lift, raise on hover, elevation change

On hover, the element moves up 2 to 4px and its shadow grows, which signals that it is clickable.

When to useClickable cards and tiles on pointer devices.
When to avoidNon-clickable cards, where it promises an interaction that doesn't exist.
Say it like a designerOn hover, lift clickable cards: translateY(-4px) and a larger shadow over 200ms ease-out.

Micro-interactions

Also calledmicrointeractions, delight moments, feedback animation

Small, purposeful animations tied to a single action: a heart that pops, a checkbox that draws, a toggle that bounces.

When to useConfirming actions and adding personality at key moments.
When to avoidSlow or long animations on frequent actions, which get annoying quickly.
Say it like a designerAdd a micro-interaction to the like button: the heart scales to 1.3 and back with a spring ease and fills red, while the count increments.
Hello 👋

Transitions: fade, slide, scale

Also calledenter/exit animation, transition presets

The three basic ways things appear. Fade is calm, slide shows direction and origin, and scale shows emphasis or growth from a point.

When to useFade for content swaps, slide for drawers and toasts, scale for modals, popovers and menus.
When to avoidMixing many transition types across one product.
Say it like a designerAnimate overlays in with fade + scale (0.96 → 1, 200ms ease-out), drawers with slide-in from the edge (250ms), and exits 30% faster than entrances.
linear
ease-in
ease-out
ease-in-out
spring

Easing curves

Also calledtiming functions, ease-in, ease-out, ease-in-out, spring, cubic-bezier

How speed changes over an animation. Ease-out (fast then slow) feels responsive, ease-in suits exits, ease-in-out suits on-screen moves, and spring overshoots naturally.

When to useUse ease-out for things entering, ease-in for things leaving, ease-in-out for moving from A to B, and spring for playful, physical UI.
When to avoidLinear for UI motion, which feels robotic (only use it for spinners and progress).
Say it like a designerUse ease-out (cubic-bezier(0.2, 0.7, 0.2, 1)) for entrances, ease-in for exits, and a spring with slight overshoot for the toggle.
100ms
200ms
300ms
500ms

Duration guidance

Also calledanimation timing, motion duration, speed

Rough rules: 100ms for micro feedback (hover, press), 150 to 250ms for small elements (menus, toggles), 300 to 400ms for large ones (modals, pages). Exits are faster than entrances.

When to useSetting motion tokens for a product: duration-fast, duration-base, duration-slow.
When to avoidAnything over 500ms in routine UI, which feels sluggish.
Say it like a designerUse motion tokens: fast 120ms (hover/press), base 200ms (menus/toggles), slow 320ms (modals/sheets); exits about 30% shorter.
Scroll me ↓

Parallax

Also calledparallax scrolling, depth scrolling

Background layers move slower than the foreground while scrolling, which creates depth. Scroll inside the demo.

When to useStorytelling landing pages and hero sections, used subtly.
When to avoidHeavy parallax on content pages. It can cause motion sickness, so disable it with prefers-reduced-motion.
Say it like a designerAdd a subtle parallax to the hero background (moves at 0.4× scroll speed) and disable it when prefers-reduced-motion is set.

Scroll down ↓

Section 1
Section 2
Section 3
Section 4
Section 5

Scroll reveal

Also calledreveal on scroll, scroll-triggered animation, fade-up

Elements fade and slide up as they enter the viewport. Scroll inside the demo.

When to useMarketing pages, to pace content and draw attention to sections.
When to avoidHiding content until animation runs (bad for SEO and speed), or animating every single element.
Say it like a designerReveal sections on scroll: fade in and translate up 20px over 500ms ease-out when 15% visible, staggered 80ms per item, using IntersectionObserver.
Inbox
Maya · Review hero ›
Rafael · Shipped! ›
Team · Notes ›

Page transitions

Also calledroute transitions, view transitions, shared element transition

Animation between pages or views, like a slide for hierarchy (push) or a cross-fade for peers. Modern browsers support the View Transitions API.

When to useApps where showing spatial relationships helps (drill into a detail, go back).
When to avoidSlow, flashy transitions that delay content.
Say it like a designerAdd page transitions with the View Transitions API: push/slide-left when drilling into detail, slide-right when going back, cross-fade between tabs, 250ms.
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

Reduced motion

Also calledprefers-reduced-motion, accessible motion, motion sensitivity

An OS setting some people enable because motion makes them dizzy or distracts them. Respect it by replacing big motion with fades or nothing.

When to useAlways. Wrap parallax, large slides, auto-play and scroll effects in a check.
When to avoidIgnoring it, or disabling all feedback. Small fades are usually fine.
Say it like a designerRespect prefers-reduced-motion: disable parallax, scroll-reveal and large transforms, and keep only opacity fades under 150ms.
09

Layout & page patterns

Common page structures. Knowing their names lets you describe a whole screen in one sentence.

F-pattern

Also calledF-shaped reading pattern

Eye-tracking (NN/g) shows that on text-heavy pages people read across the top, then a shorter line, then scan down the left side.

When to useContent and search pages. Put key words at the start of headings and lines.
When to avoidBurying important info at the right or in the middle of paragraphs.
Say it like a designerDesign for F-pattern scanning: front-load headings and bullet points with key words, and left-align content.
LogoNavCTA

Z-pattern

Also calledZ-shaped layout

On simple, visual pages the eye moves top-left → top-right → diagonally → bottom-left → bottom-right.

When to useMinimal landing pages: logo top-left, nav or CTA top-right, hero, then CTA bottom-right.
When to avoidDense text pages (use F-pattern thinking).
Say it like a designerArrange the landing page on a Z-pattern: logo top-left, CTA top-right, hero visual in the middle, and the main CTA at the bottom-right.
Hero 2×2
2×1
1×1
1×1
1×2
3×1

Bento grid

Also calledbento box layout, modular grid

Tiles of varied sizes packed into a tidy grid, like a Japanese bento box. It was popularized by Apple feature pages.

When to useFeature showcases, portfolios, dashboards that highlight a few hero items.
When to avoidSequential content, or when every tile is equally important.
Say it like a designerPresent features in a bento grid: 4-column CSS grid with one 2×2 hero tile, a few 2×1 and 1×1 tiles, 16px gaps, 20px radius, each with its own visual.

Split screen

Also called50/50 layout, two-panel, split layout

The page divided into two equal or near-equal vertical halves, often an image on one side and content on the other.

When to useAuth pages, product comparisons, landing pages with two audiences.
When to avoidMobile, where it must stack.
Say it like a designerUse a split-screen layout: left half with the form, right half with a full-height brand image or gradient; stack vertically under 768px.
Header
Nav
Main
Aside
Footer

Holy grail layout

Also calledheader-sidebar-content-sidebar-footer, classic 3-column

Header, footer, and three columns: left nav, main content and a right sidebar. A classic web layout.

When to useDocs, news sites, forums.
When to avoidSmall screens. Collapse the sidebars.
Say it like a designerUse a holy grail layout with CSS grid: header, left nav (240px), fluid main content, right sidebar (280px), footer; sidebars collapse on tablet.
◆ Admin
Overview
Orders
Customers
Settings
JP
$48k
3.9k
2.3%
1.8s

Dashboard shell

Also calledapp shell, admin layout, application frame

The permanent frame of an app: sidebar nav, top bar with search and profile, and a content area with KPI tiles, charts and tables.

When to useSaaS products, admin panels, internal tools.
When to avoidMarketing pages.
Say it like a designerBuild a dashboard shell: 240px left sidebar, 56px top bar with search and avatar, content area with a row of 4 KPI tiles, a large chart, and a recent-activity table.
Navbar
Hero (headline + CTA)
Social proof · logos
Features
Testimonials
Pricing
FAQ
Final CTA
Footer

Landing page anatomy

Also calledmarketing page structure, homepage sections

The standard section order: navbar → hero → social proof (logos) → features → how it works → testimonials → pricing → FAQ → final CTA → footer.

When to useAny product or service marketing page.
When to avoidRepeating the same CTA wording in every section, or skipping social proof.
Say it like a designerBuild a landing page with these sections in order: sticky navbar, centered hero, logo cloud, 3-column feature grid, testimonial, pricing, FAQ accordion, final CTA band, footer.
Profile
Notifications
Billing

Settings page

Also calledpreferences, account settings

Grouped settings with a left section nav, each row showing a label and description on the left and the control on the right.

When to useAccount, notification, billing and team settings.
When to avoidEndless single pages. Group settings and use sections or tabs.
Say it like a designerDesign the settings page: left section nav (Profile, Notifications, Billing), right content with grouped cards, each row label + description left and control (switch/select) right.
Welcome back
or
Forgot password?

Auth / login page

Also calledsign-in page, sign-up, authentication screen

A focused, distraction-free page: logo, title, social sign-in, email and password fields, primary button, and links to reset or sign up.

When to useEvery product with accounts.
When to avoidAsking for unnecessary info at sign-up, or confusing password rules.
Say it like a designerDesign a centered login card (400px): logo, “Welcome back”, Google/Apple social buttons, “or” divider, email + password fields with show/hide, “Forgot password?” link, full-width primary “Sign in”.
Step 2 of 3 · Payment
Summary
Subtotal$58
Shipping$6
Total$64

Checkout flow

Also calledcheckout, cart-to-payment flow, purchase funnel

Cart → shipping → payment → review → confirmation, with an order summary visible throughout and minimal distractions.

When to useE-commerce and paid sign-ups.
When to avoidForced account creation (offer guest checkout), surprise fees at the end, and site navigation in the checkout.
Say it like a designerBuild a checkout with a 2-column layout: left the step form (shipping → payment), right a sticky order summary with items, subtotal, shipping, tax, total; hide main nav; offer guest checkout.
List
→
‹ Detail

List-detail

Also calleddrill-down, push navigation, list → detail

On small screens, tapping a list item pushes a full detail screen, and Back returns to the list.

When to useMobile apps: mail, contacts, settings.
When to avoidWide screens, where master-detail shows both at once.
Say it like a designerOn mobile use list-detail navigation: tapping a row pushes the detail view with a slide-left transition and a back chevron in the header.
Maya Kim
Rafael O.
Design team
Billing
Maya Kim

Can you review the hero copy before Friday?

Master-detail

Also calledsplit view, two-pane, list + preview pane

A list on the left and the selected item's details on the right, both visible at once. Click a row in the demo.

When to useDesktop email, file managers, admin records.
When to avoidNarrow screens. Switch to list-detail.
Say it like a designerUse a master-detail layout on desktop: 320px scrollable list on the left with the selected row highlighted, detail pane on the right; collapse to list-detail under 768px.

Responsive breakpoints

Also calledmedia queries, mobile-first, fluid layout, container queries

Widths where the layout adapts. Typical values are about 640 (sm), 768 (md), 1024 (lg) and 1280 (xl). Drag the slider to resize the mock.

When to useEvery website. Design mobile-first, then add complexity as space grows.
When to avoidDesigning desktop only and squeezing it onto mobile.
Say it like a designerMake it responsive and mobile-first: 1 column under 640px, 2 columns at 768px, 3 columns at 1024px+; nav collapses to a hamburger under 768px.
10

UX principles glossary

The “why” behind good design: psychology and heuristics from Laws of UX, Gestalt psychology and Nielsen Norman Group. Use these words to explain why something feels off.

Flat
Pricing
$29 per month
Buy
Hierarchy
Pricing
$29/mo

Visual hierarchy

Also calledemphasis, focal point, information hierarchy

Arranging elements by size, weight, color, contrast and position so people see the most important thing first, then second, then third.

When to useEvery screen should have one clear focal point.
When to avoidEqual emphasis everywhere. Flat hierarchy makes people hunt.
Say it like a designerStrengthen the visual hierarchy: one dominant headline, a clearly secondary subhead, muted metadata, and one primary CTA as the focal point.
Even
Grouped

Gestalt: proximity

Also calledlaw of proximity, grouping by distance

Things close together are perceived as related. Spacing is your strongest grouping tool, stronger than borders.

When to usePut labels close to their fields, use more space between groups than within them.
When to avoidEven spacing everywhere, where everything blurs together.
Say it like a designerUse proximity to group: 8px between a label and its field, 24px between fields, 48px between sections.

Gestalt: similarity

Also calledlaw of similarity

Things that look alike (color, shape, size) are seen as the same kind of thing.

When to useStyle all links alike, all buttons of one emphasis alike, all tags alike.
When to avoidStyling non-clickable text like links, or links in different ways.
Say it like a designerApply similarity consistently: every clickable link is the same primary color and underline on hover, nothing else uses that color.

Gestalt: closure

Also calledlaw of closure

The brain completes incomplete shapes. You don't need to draw every line.

When to useMinimal icons and logos, and partially visible carousel items that hint there is more.
When to avoidShapes so incomplete they become ambiguous.
Say it like a designerLet the last carousel card peek in at 20% so users perceive more content to swipe to (closure).

Gestalt: common region

Also calledlaw of common region, enclosure

Elements inside a shared boundary (card, background) are seen as a group.

When to useCards, panels and table rows to group related info.
When to avoidBoxes inside boxes inside boxes (over-carding).
Say it like a designerGroup related settings inside one card with a subtle background (common region) instead of separate borders on every row.

Fitts's law

Also calledtarget size and distance

The time to hit a target depends on its size and distance. Big, close targets are faster.

When to useMake primary buttons large, put actions near where attention is, and use screen edges and corners.
When to avoidTiny tap targets and important buttons far from the related content.
Say it like a designerApply Fitts's law: make the primary CTA large (48px+ tall, wide on mobile) and place it right next to the content it acts on.
12 options
optoptoptoptoptoptoptoptoptoptoptopt
3 options
Basic★ ProTeam

Hick's law

Also calledchoice overload, Hick–Hyman law

Decision time grows with the number and complexity of choices.

When to useReduce options, highlight a recommended one, break complex choices into steps.
When to avoidMega lists of equal options and 8-item navbars.
Say it like a designerReduce choices (Hick's law): show 3 plans with one recommended, and move rarely used options into “More”.
🛒

Jakob's law

Also calledconventions, familiarity, design patterns

People spend most of their time on other sites, so they expect yours to work the same way.

When to useFollow conventions: logo top-left goes home, cart top-right, search with a magnifier.
When to avoidReinventing standard controls just to be different.
Say it like a designerFollow common conventions (Jakob's law): logo top-left linking home, nav top, account and cart top-right, footer with legal links.
42424242424242424242 4242 4242 4242

Miller's law & chunking

Also called7±2, working memory, chunking

People hold about 7 (±2) items in working memory. Chunking groups info into digestible pieces.

When to useFormatting phone numbers and codes, grouping nav items, breaking long forms into sections.
When to avoidUsing “7 items max” as a strict rule for menus. The real point is chunking.
Say it like a designerChunk information: format the card number as 4-digit groups, and group long settings into labeled sections of 3–5 items.
Advanced options


Progressive disclosure

Also calledshow more, advanced options, layered information

Show only what's needed now and reveal advanced or rare options on demand.

When to useAdvanced settings, long forms, complex tools for novices.
When to avoidHiding things people need often.
Say it like a designerUse progressive disclosure: show the 3 essential fields and put the rest behind an “Advanced options” expander.
WeakSubmit
Read more
Clear
Read more →
⠿ Drag item

Affordance & signifiers

Also calledperceived affordance, visual cues, clickability

An affordance is what an object lets you do. A signifier is the visual cue that tells you so: shadows on buttons, underlines on links, a grip on a handle.

When to useMake clickable things look clickable and draggable things look draggable.
When to avoidFlat text that is secretly a button, or decorative things that look clickable.
Say it like a designerStrengthen signifiers: buttons get a fill or border and hover state, links are underlined, draggable items show a grip handle and grab cursor.
✓ Saved 2s ago

Feedback (system status)

Also calledvisibility of system status (NN/g heuristic #1)

The system should always tell people what's going on, within a reasonable time: pressed states, loading, saved, errors.

When to useAfter every action: immediate response under 100ms, progress for longer waits.
When to avoidSilent failures and buttons that do nothing visible.
Say it like a designerGive feedback for every action: pressed state immediately, loading spinner for waits, success toast on completion, clear error on failure.
Inconsistent
Consistent

Consistency & standards

Also calledinternal consistency, external consistency (NN/g heuristic #4)

The same words, styles and behaviors mean the same thing everywhere, both within your product and in line with platform norms.

When to useUse a design system: one button style per emphasis, one term per concept.
When to avoid“Delete” in one place and “Remove” in another for the same action, or three different blue buttons.
Say it like a designerMake the UI consistent: one primary button style, the same terminology for the same action everywhere, same spacing tokens on every page.
CrampedTitleText text text text text text text text
Breathing roomTitle

Text with room.

Whitespace

Also callednegative space, breathing room, padding

Empty space around and between elements. It isn't wasted. It creates focus, grouping and a premium feel.

When to useGenerous section padding, line-height and margins around key content.
When to avoidCramming in content “because the space is there.”
Say it like a designerIncrease whitespace: 96px between sections, 24px card padding, max 65-character line length, and fewer elements per row.
FOLD

Above the fold

Also calledfirst viewport, first screen

What's visible without scrolling. It should make clear what this is, who it's for and what to do next.

When to usePutting the value proposition and primary CTA in the first viewport.
When to avoidCramming everything above the fold. People do scroll if the start is compelling.
Say it like a designerAbove the fold, show only the headline, a one-line value prop, the primary CTA and a product visual; push secondary details below.
No credit card required · Cancel anytime

Call to action (CTA)

Also calledCTA, primary action, conversion button

The element that asks the user to take the key next step. Strong CTAs are visually dominant and use specific, verb-first labels.

When to useOne primary CTA per section, with a clear label like “Start free trial”, not “Submit.”
When to avoidVague labels (Click here, Submit), or several competing CTAs.
Say it like a designerMake the CTA specific and dominant: verb-first label (“Start my free trial”), primary fill, high contrast, with a reassurance line below (“No credit card required”).
Type acme to confirm deletion

Friction

Also calledinteraction cost, positive friction, frictionless

Anything that slows a user down. Remove bad friction (extra fields, steps). Add good friction for dangerous actions, like typing the name to confirm a delete.

When to useCut steps from sign-up and checkout, and add deliberate friction to destructive actions.
When to avoidFriction in the happy path, or no friction before deleting a whole workspace.
Say it like a designerReduce friction in sign-up (email only, social login), but add positive friction to deletion: require typing the project name to enable the Delete button.
  • Contrast ≥ 4.5:1 for text
  • Visible focus on every control
  • Labels, not just placeholders
  • Alt text for meaningful images
  • Don't rely on color alone
  • Touch targets ≥ 44×44px
  • Works with keyboard only (try Tab)

Accessibility basics

Also calleda11y, WCAG, inclusive design

Design that works for everyone, including keyboard and screen reader users and people with low vision or color blindness. The core rules are contrast, focus states, labels, alt text, target size and not relying on color alone.

When to useAlways, from the start. It is cheaper than retrofitting.
When to avoidPlaceholder-only labels, removed outlines, color-only errors, and icon buttons without labels.
Say it like a designerMake it accessible: WCAG AA contrast, visible focus rings, real labels on inputs, alt text on images, 44px touch targets, aria-labels on icon buttons, full keyboard navigation.

Von Restorff effect

Also calledisolation effect, emphasis by difference

The item that differs from the rest is the one people remember. This is why a single highlighted plan or CTA works.

When to useHighlighting the recommended option or the key action.
When to avoidHighlighting several things. Then none stand out.
Say it like a designerMake the recommended plan visually different from the others (primary border, badge, slight scale) so it stands out (Von Restorff effect).
<100ms
Instant
<400ms
Keeps flow
>1s
Attention drifts
>10s
Lost user

Doherty threshold

Also called400ms rule, perceived performance

Productivity soars when the system responds in under about 400ms. Use optimistic UI, skeletons and instant feedback to feel faster.

When to useOptimistic updates (show the like immediately, sync later), prefetching, skeletons.
When to avoidBlocking spinners for actions that could be optimistic.
Say it like a designerUse optimistic UI: update the interface immediately on click (under 100ms), sync in the background, and roll back with an error toast only if it fails.
✓ Toronto, ON, filled in for you

Tesler's law

Also calledconservation of complexity

Every system has some complexity that can't be removed, only moved. Good design moves it from the user to the system.

When to useSmart defaults, autofill, inferring data (city from ZIP code).
When to avoidOversimplifying to the point users lose control they need.
Say it like a designerAbsorb complexity for the user: autofill city and state from the postal code, detect the card type from its number, and preselect sensible defaults.

Peak-end rule

Also calledmemorable moments, ending experience

People judge an experience by its most intense moment and its ending, not the average.

When to useInvest in delightful success screens, onboarding wins and graceful error recovery.
When to avoidEnding flows with a dull “Submitted.” or an abrupt redirect.
Say it like a designerDesign a memorable end moment: after onboarding, show a celebratory success screen with confetti or an animated check and a clear next step.
UnpolishedSign up

PolishedCreate account

Aesthetic-usability effect

Also calledbeauty bias

People perceive attractive designs as easier to use, and they forgive minor issues in them.

When to usePolish matters, especially in first impressions and onboarding.
When to avoidLetting good looks hide real usability problems in testing.
Say it like a designerPolish the visual details (consistent spacing, aligned edges, refined typography) because attractive interfaces are perceived as more usable.
11

Vague ask → precise brief

Turn feelings into instructions. Each card shows what the vague phrase usually means, the concrete design levers to name, a before/after preview and a prompt ready to paste.

Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it pop”

Usually means more contrast and one clear focal point. The design feels flat because everything has equal weight.

Concrete levers to nameHigher contrast, larger and bolder headline, one saturated accent color, a solid primary CTA, more whitespace around the focal point, a subtle shadow or gradient for depth.
Common trapAdding more colors, more animation or more elements. Pop comes from contrast, not quantity.
Say it like a designerIncrease contrast and hierarchy: make the H1 48–56px, weight 800, tight 1.1 line-height; use one saturated accent for the primary CTA only; add 96px section padding and a soft shadow behind the hero visual.
Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it cleaner”

Less visual noise. Remove borders, lines and colors that don't carry meaning, and align things.

Concrete levers to nameFewer borders (use spacing instead), a reduced color palette, consistent alignment, one typeface, more whitespace, quieter secondary text, fewer icons.
Common trapMaking it so sparse that hierarchy disappears, or removing labels people need.
Say it like a designerMake it cleaner: remove decorative borders and dividers (group with spacing instead), limit to one neutral palette plus one accent, left-align everything to a single edge, use one typeface in 2–3 weights.
Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it more premium”

Feels expensive: restraint, generous space, refined type, high-quality imagery, dark or deep neutral palettes.

Concrete levers to nameGenerous whitespace, a refined serif or tight geometric sans, muted or deep palette (black, cream, gold accent), thin hairline borders, subtle motion, high-quality photography, fewer elements.
Common trapGold gradients everywhere, glitter, or cramming in “luxury” cues.
Say it like a designerMake it feel premium: deep near-black background (#0d0d0d), cream text, a refined serif for headings with generous letter-spacing on small caps, thin 1px hairline dividers, lots of whitespace, slow 400ms ease-out fades.
Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it more modern”

Matches current UI conventions: clean sans type, soft radius, subtle depth, bold type contrast, contemporary color.

Concrete levers to nameGeometric or grotesk sans (Inter, Geist), larger type contrast, 12–16px radius, soft layered shadows, subtle gradients or mesh, bento layouts, dark mode support, micro-interactions.
Common trapChasing every trend at once (glass + neumorphism + gradient + 3D).
Say it like a designerModernize the UI: switch to Inter/Geist, increase heading size contrast, use 12–16px radius, soft layered shadows, a subtle mesh gradient in the hero, bento-grid features, and smooth 200ms ease-out hover states.
Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it friendlier”

Warmer and more approachable: rounder shapes, warmer colors, conversational copy.

Concrete levers to nameRounded corners (16px+, pill buttons), warm palette (coral, peach, warm yellow), rounded typeface (e.g. Nunito), friendly illustrations, conversational microcopy, softer shadows.
Common trapChildish clip-art, or so much rounding that it looks unserious for the audience.
Say it like a designerMake it friendlier: pill-shaped buttons, 20px card radius, a warm palette (coral #ff7a59 accent on cream), a rounded sans for headings, conversational copy (“Let's get you set up”).
Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it more playful”

Energy and personality: bold colors, bouncy motion, unexpected shapes.

Concrete levers to nameSaturated multi-color palette, chunky 3D buttons, springy animations, hand-drawn or blob shapes, emoji or stickers, quirky display font, slight rotations.
Common trapSacrificing legibility or usability for fun, especially in critical flows.
Say it like a designerMake it playful: saturated palette (yellow, pink, teal), chunky buttons with a solid offset shadow, spring animations on hover, slightly rotated sticker-style badges, and a bold display font for headings.
Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it more serious / trustworthy”

Credible and stable: conservative colors, clear structure, proof of trust.

Concrete levers to nameNavy or deep blue palette, restrained accent, structured grid, squarer corners (4–8px), clear typography, trust signals (security badges, logos, testimonials, certifications), plain-language copy.
Common trapLooking cold or bureaucratic. Trust also needs clarity and warmth.
Say it like a designerMake it more trustworthy: navy primary (#1e3a8a), white surfaces, 6px radius, a structured 12-col grid, clear sans typography, and add trust signals: client logos, security badges, testimonials with real names.
Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it less busy”

Too many things compete. Reduce, group and prioritize.

Concrete levers to nameRemove or hide secondary elements (progressive disclosure), fewer colors, group related items, more whitespace, consistent alignment, limit the number of font sizes, one CTA per section.
Common trapRemoving content people actually need. Prioritize, don't just delete.
Say it like a designerReduce visual clutter: cut each section to one message and one CTA, move secondary actions into an overflow menu, limit to 3 font sizes and 2 colors, increase spacing between groups to 48px.
Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it more techy”

Feels engineered or futuristic: dark UI, mono type, precise grids, neon or terminal accents.

Concrete levers to nameDark background, monospace accents for labels and numbers, grid or dot patterns, thin borders, neon accent (cyan, lime), glow, code snippets, sharp 4–6px corners.
Common trapUnreadable low-contrast neon text, or Matrix clichés.
Say it like a designerGive it a technical feel: near-black background with a subtle dot grid, monospace (JetBrains Mono) for labels and numbers, 1px borders at 10% white, a single neon accent (#22d3ee) with soft glow, 6px radius.
Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it more editorial”

Feels like a magazine: strong typography, serif headlines, asymmetry, generous margins.

Concrete levers to nameLarge serif headlines, a drop cap or pull quotes, narrow text column (60–70ch), asymmetric grid, black and white with one accent, small-caps kickers, thin rules between sections.
Common trapLong lines of tiny serif body text on screens.
Say it like a designerMake it editorial: large serif headlines (Fraunces, 56px+), small uppercase kickers with letter-spacing, a 65ch body column, thin horizontal rules, a black/off-white palette with a single red accent, asymmetric image placement.
Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it more minimal”

Only the essentials: reduction to content, type and space.

Concrete levers to nameMonochrome palette, one typeface, no shadows or gradients, hairline or no borders, lots of whitespace, text-style buttons, hide all secondary UI.
Common trapMinimal ≠ empty. Don't remove signifiers that tell people what's clickable.
Say it like a designerMake it minimal: monochrome (black on white), one sans typeface in two weights, no shadows or gradients, hairline dividers only where necessary, generous whitespace, and text links with an arrow instead of filled buttons where possible.
Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it more luxurious”

Opulent but restrained: rich materials, deep colors, elegant serif type, slow motion.

Concrete levers to nameDeep jewel tones (emerald, burgundy, black) with a metallic accent, high-contrast didone serif, wide letter-spacing on uppercase labels, full-bleed photography, slow fades, very generous whitespace.
Common trapCheap metallic gradients and too many ornaments.
Say it like a designerMake it luxurious: deep emerald (#0b3d2e) background, champagne (#d8c08f) accents, a high-contrast serif for headings, uppercase labels with 0.2em tracking, full-bleed imagery, slow 600ms fades.
Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it feel calmer”

Less urgency: softer colors, slower motion, more space.

Concrete levers to nameDesaturated pastel or earthy palette, low contrast between surfaces (but text still AA), rounded shapes, slower motion (300–400ms), generous line-height, fewer alerts and badges.
Common trapWashing out text contrast.
Say it like a designerMake it calmer: soft desaturated palette (sage, sand, mist blue), 1.7 line-height, 16px radius, slower 350ms transitions, fewer badges and red alerts, ample whitespace.
Before
Studio Ledger

Budgeting that keeps up with you.

Get started
After
Studio Ledger

Budgeting that keeps up with you.

Get started

“Make it bolder”

More confidence and impact: bigger type, stronger color, bigger contrast in scale.

Concrete levers to nameOversized headline (72px+), heavy weight (800–900), high-contrast color blocking, tight tracking, large imagery, strong CTA.
Common trapShouting everything. Bold works by contrast with calm areas.
Say it like a designerMake it bolder: an oversized 72px headline at weight 900 with -0.04em tracking, a full-bleed solid color block section, and a large high-contrast CTA.

Invite teammates

Collaborators can view and comment on this project.

Delete “Website redesign”?

This permanently deletes the project and its 24 files. This can't be undone.

Share

Order #4821
◆ Acme
HomeProductsPricingAbout
↑↓ navigate↵ openesc close