The space between two specific characters, adjusted manually. Different from tracking, which affects all characters equally.

Letter-spacing applied uniformly across a word or block of text. Uppercase labels almost always need more of it.

The vertical space between lines of text. Too tight and text suffocates. Too loose and it stops reading as a paragraph.

Spacing adjusted by eye rather than the font’s built-in metrics. Removes awkward gaps between certain letter pairs that default metrics leave behind.

A font feature that gives every digit the same width so numbers in columns stay aligned as they change. Essential for prices, stats, and any data that updates.

A predetermined set of font sizes that work together, usually based on a ratio. Picking sizes from the scale keeps hierarchy consistent.

How thick or thin a typeface’s strokes are. Bold is for UI emphasis and hierarchy. Italic is for linguistic stress or citation, not UI hierarchy.

The height of a lowercase letter like x, relative to the cap height. A high x-height makes a font feel larger at the same point size, which is why two fonts at 16px can look very different in size.

The height of a capital letter. Along with x-height, it determines how large a font feels on screen. Useful when matching fallback fonts or pairing typefaces.

Two characters that merge into a single glyph to avoid awkward collisions. fi and fl are the most common. Some ligatures are decorative and belong in display use only.

How the browser renders font edges. On Mac, antialiased renders thinner and lighter than the default. Designers often apply it globally for a crisper feel, though it reduces fidelity on non-retina screens.

What happens when text is longer than its container. Truncation with an ellipsis is the most common solution. Use the single unicode character, not three periods, and never cut mid-word.

Breaking a word across lines with a hyphen. Helps with narrow columns and justified text. Best left to the browser automatically to avoid breaking at unexpected moments.

A technique for fluid type sizing that sets a minimum, preferred, and maximum value. The size scales smoothly between breakpoints without needing separate declarations at each one.

A single word left alone on the last line of a paragraph. text-wrap: balance can fix it automatically.

A single line of a paragraph stranded at the top of a new column or page. The CSS orphans property exists for this, though browser support is inconsistent. Often fixed manually.

The ordered list of fonts the browser tries before giving up. A well-matched fallback font avoids layout shift when the primary font loads, since mismatched x-heights and weights cause content to reflow.

How wide a column of text runs. Around 65 characters is comfortable. Wider and the eye struggles to find the next line.

A single font file containing a range of weights, widths, or other axes. Lets you animate weight without layout shift and reduces font file overhead.

Raised characters for footnotes or exponents. The HTML sup element is too large by default and disrupts line spacing. Proper superscripts are manually sized and shifted.

Lowered characters for formulas or notation. The HTML sub element has the same problem as sup: oversized by default and disruptive to line rhythm if left unstyled.

The standard color space most screens have used for decades. All hex values live here. Its gamut is limited: there are colors a modern display can show that sRGB cannot describe.

A wider color space supported by most modern screens. Allows more vivid colors, particularly greens and reds, that sRGB cannot reach.

A color space that matches how humans perceive brightness. Unlike HSL, two colors at the same lightness value actually look the same brightness. Useful for generating palettes and accessible color mixes.

The transparency component of a color, from fully opaque to fully invisible. An alpha border recedes into the surface beneath it. A solid hex sits on top. The difference is subtle but consistently felt.

A color variable named for its purpose rather than its value. --color-border-subtle instead of #e0e0e0. When the value changes, everything using the token updates.

The luminance difference between a foreground and background color. WCAG requires 4.5:1 for body text, 3:1 for large text and UI components.

A grey with a slight hue bias. Pure #808080 looks like a placeholder. A tinted neutral feels chosen.

How vivid or muted a color is. Brand colors at full saturation in dark mode can vibrate off the screen. Pulling back 20-30% settles them.

The OKLCH equivalent of saturation, but perceptually accurate. Reducing chroma for a light tint keeps the color alive. Reducing opacity does the same but turns it grey and lifeless.

A transition between two or more colors. In HSL or sRGB, the midpoint often goes grey. Building gradients in OKLCH keeps the colors vivid throughout.

Two ways to hide an element. Opacity zero still occupies space and receives pointer events. Visibility hidden removes interaction but keeps the space. Worth knowing which you need.

An interface built on dark surfaces. The brightest surface should sit at the top of the layering hierarchy. Light mode tokens rarely translate directly, so every color decision needs rechecking.

How a layer interacts with what’s beneath it. Multiply darkens, Screen lightens, Overlay does both depending on the base color. Useful for integrating images with colored surfaces and adding depth to illustrations.

How thick the lines of an icon are. Thin strokes disappear at small sizes. At large sizes they look frail. Weight needs to scale with size.

Where something looks centred versus where it mathematically is. A play button centred by coordinates looks left-heavy. Nudge it right and it sits.

Two icon styles for communicating state. Filled often signals active or selected. Outlined signals default. Mixing both without a clear system creates noise.

Whether stroke ends are square or round. Round caps feel finished in most UI contexts. Square caps can read as unrefined.

Adjusting icon paths to sit cleanly on a pixel grid at small sizes. A full-detail logo at 16px turns to mush without it.

A set of icons drawn at the same size, weight, and radius. Mixing two libraries, even similar ones, creates subtle mismatches that compound across a product.

The defined sizes an icon is designed to appear at, typically 12, 16, 20, 24, and 48px. Each size is ideally drawn or adjusted for that specific context rather than scaled from a single master.

When the same icon is used for two different actions in the same product. A star used for both favouriting and rating. A chevron used for both expanding and navigating. Users learn neither reliably.

Switching from an outlined icon to a filled one (or vice versa) to signal a state change like active, selected, or toggled. The convention needs to be consistent across the product to work. Mixed usage means users can’t learn the pattern.

The space between an icon and its label inside a button or list item. Too close and they look like they collided. 6 to 8px is a reasonable starting point. The gap is part of the component design, not an afterthought.

When icons and surrounding text share the same visual weight. A thin-stroke icon next to bold text looks like it came from a different product. Icons should feel like they belong to the same visual family as the type beside them.

Whether the icon actually represents what it’s supposed to. A floppy disk for save, a phone handset for call, a house for home. These work until the generation using them has never seen the physical object. Worth auditing as your audience ages.

The rounding on a corner. An inner element inside a rounded container needs a smaller radius, calculated as outer radius minus padding. Matching both creates a visible gap.

Space between flex or grid children, set on the parent. Unlike margin, it leaves no trailing space after the last item.

The empty area around and between elements. It defines shape, creates breathing room, and guides the eye. Crowding elements together removes clarity, it doesn’t add information.

A CSS layout model for arranging elements in a row or column. Controls direction, alignment, spacing, and how items grow or shrink to fill available space. The foundation of most modern UI layout.

Figma’s implementation of flexbox: elements that space themselves, resize with their content, and respond to direction and alignment rules.

When elements move unexpectedly as a page loads: images popping in, fonts swapping, content reordering. Avoided by reserving space before content loads and using size-matched font fallbacks.

What happens when content is larger than its container. Hidden clips silently. Scroll adds a scrollbar. Auto only shows one when needed. Hidden also silently breaks sticky positioning on child elements.

An element that scrolls normally until it hits a threshold, then fixes in place. Requires a parent that is not set to overflow hidden, which silently breaks it.

The proportional relationship between width and height. Setting it on images and embeds lets the browser reserve the right space before the content loads, preventing layout shift.

Units relative to the browser window. vw and vh are the classics. dvh accounts for the mobile browser chrome that shows and hides on scroll. Using vh for full-screen mobile layouts often causes overflow because of this.

The part of a screen not obscured by notches or home indicators. Fixed bottom elements need to account for this or they sit underneath the home indicator.

A cap on how wide a container gets. Without one, text lines stretch to unreadable lengths on wide screens.

The point at which a layout changes to suit a different screen size. Best set where the content actually breaks, not at assumed device widths.

A design that adapts to different screen sizes rather than being fixed. Achieved through fluid layouts, flexible images, and breakpoints. The baseline expectation for anything on the web.

A system of columns that organises layout. 12 columns is conventional. 8 often works better for simpler layouts.

A layout where columns or elements are intentionally unequal. Creates tension and visual interest. Symmetry is stable but rarely interesting.

A horizontal rhythm built from the line-height of body text. Creates consistency in editorial layouts. Often overkill in product UI.

The stacking order of elements on the same plane. Modals, tooltips, and dropdowns need explicit z-index values or they clip behind things they should sit above.

The visual signal that tells you how something can be used. A button looks pressable. A link looks clickable. When affordance is missing, users guess.

The visual change when a cursor moves over an interactive element. Should confirm interactivity through cursor change, color shift, or both. Color alone is not enough.

The visible indicator that an element is keyboard-focused. Removing it is an accessibility failure. Replace it with a custom style, never just delete it.

The visual change when an element is pressed. Without it, buttons feel unresponsive. A small scale or color shift is enough.

A non-interactive element. Using opacity alone is unreliable since it can pass or fail contrast checks unpredictably depending on the background. A specific muted token is more predictable.

The pointer icon that signals what an element does. Pointer means clickable. Default means static. Text means selectable. The wrong cursor breaks the implicit contract.

Whether an element can receive mouse or touch input. Setting to none makes an element visually present but non-interactive, useful for decorative layers that should not intercept clicks.

Updating the UI before the server confirms the action. Feels instant. Requires a rollback if the request fails.

A delay before firing a function, reset each time it is triggered. Stops a search input making a request on every keystroke. 300ms is a common threshold.

The tappable area of an interactive element. The minimum is 44x44px. The visual element can be smaller than the touch target.

A button that copies text. Needs visible confirmation, typically a checkmark for a second or two. Without it, users click it repeatedly thinking it failed.

A visually hidden link that jumps to the main content. Appears on focus for keyboard users. Without it, every page requires tabbing through the full navigation first.

The rate at which an animation speeds up or slows down. Ease-out decelerates into place and feels natural. Ease-in starts slow and makes the interface feel like it’s dragging.

Starts fast, slows down. The default for most UI transitions. Use for things entering the screen.

Starts slow, ends fast. Use for things leaving the screen. On entrances, it feels reluctant.

Starts slow, speeds up, then slows down again. Suits elements that move from one place to another on screen, like a toggle or a card sliding across. Overkill for simple enter and exit transitions.

Animating list items one after another with a small delay between each. 40ms intervals create a sense of arrival. All at once feels like a flash.

How long an animation takes. Hover transitions around 150ms feel native. 400ms feels like the UI is thinking. Over 400ms with no feedback looks broken.

Which CSS properties animate. Animating all properties can accidentally catch layout ones and cause jank. Opacity and transform are the safe pair.

A user preference for less animation. Ignoring it can trigger vestibular symptoms. Any significant movement should check for it.

A moving gradient that sweeps across a skeleton loader to suggest activity. Should respect reduced motion preferences.

An easing model based on physical spring physics rather than a fixed curve. Produces motion that overshoots slightly and settles, which reads as more alive and natural than a standard ease-out. Common in mobile interfaces and increasingly in web UI.

The coordination of multiple elements animating at the same time. When several things move independently and at different timings, the result is visual noise. Good choreography staggers, sequences, or groups motion so the eye knows where to look.

Entering and exiting animations should not be mirror images of each other. Enter is an arrival and should decelerate into place. Exit is a departure and should accelerate away. Reversing the enter animation for the exit makes it feel like content is arriving backwards.

When navigating between two related views, the motion direction should reflect the spatial relationship between them. Moving forward through a flow animates right. Going back animates left. Violating this creates a sense of spatial disorientation.

Using animation to confirm that something happened: a button that compresses on press, a form field that shakes on invalid input, a checkmark that draws itself on success. The motion is not decoration, it is the response.

Opacity and transform animations run on the GPU and avoid triggering layout recalculation, making them smooth even on lower-end devices. Animating properties like width, height, padding, or top forces the browser to recalculate layout on every frame. The performance difference is significant.

Web Content Accessibility Guidelines. The standard most teams use for color contrast. AA requires 4.5:1 for body text, 3:1 for large text and UI components.

Advanced Perceptual Contrast Algorithm. A newer contrast model that accounts for font size and weight. More nuanced than WCAG for real-world conditions. The two specs sometimes disagree.

Software that reads interface content aloud for blind or low-vision users. Navigates by DOM order, heading structure, and ARIA roles, not visual layout. VoiceOver on Mac and iOS, NVDA and JAWS on Windows are the most common.

The sequence keyboard focus moves through when pressing Tab. Should follow a logical reading order. Unexpected jumps are often caused by DOM and visual order being out of sync.

A media query that detects the user’s system theme preference. The right way to honour dark mode without requiring a separate in-product setting.

An accessible name for an element with no visible text. Should describe the action, not the element type. Search, not icon.

Keeping keyboard focus inside an open modal or dialog. Without it, focus escapes to the page behind the overlay.

The sequence of elements in the HTML. Screen readers follow this, not visual order. Reordering visually with CSS while leaving the DOM unchanged creates a disconnect between what is seen and what is read.

Using the right element for the job. A button handles keyboard events, focus, and role for free. A div styled as a button needs all of that added back manually.

Linking a label to its input via matching for and id attributes. Without it, clicking the label does not focus the field.

Using color as the sole signal for a state change. An error shown only by a red border is invisible to colorblind users. Always pair color with an icon or text.

Showing only what is needed at each step, revealing complexity as the user goes deeper. The opposite is putting everything on one page.

The system for moving between areas of a product. Labels should match how users describe things, not internal terminology.

The user’s internal picture of how something works. Good IA matches it. When it does not, users get lost and blame themselves.

The ranking of elements by importance. Without it, everything competes and nothing wins.

The view when there is no content yet. Should explain why and offer a next step. No data ends the journey.

What the UI shows when something fails. Should say what went wrong and offer a specific way to recover.

Introducing a new user to a product. The best onboarding delivers value immediately. A user who completes one meaningful action is more likely to return than one who watched a tour.

A prompt before a destructive or irreversible action. Should describe what will be lost, not just ask are you sure. Keep the destructive and safe actions visually far apart.

The system of signals that help users understand where they are, how they got there, and where they can go. Breadcrumbs, active states in navigation, page titles, and URL structure all contribute. When wayfinding breaks down, users feel lost without being able to say why.

A UI element whose only job is to orient the user: a section header, a category label, a step indicator. Good signposts are invisible when working. They only become noticeable when missing.

The words used for navigation items, section headers, and categories. Labels that match user vocabulary get used. Labels that reflect internal naming conventions get ignored or searched around. Search query data is often the most honest signal of where labelling has failed.

How many levels of navigation a user must traverse to reach content. Three levels is generally the limit before users lose track of where they are. Deeper structures need better wayfinding, or a flatter rethink.

When users resort to search because navigation has failed them. High search volume for things that should be findable by browsing is a signal the IA needs work, not that search needs to be better.

A complete list of everything in a product or site, used to identify gaps, duplicates, and orphaned pages before restructuring. Skipping it leads to redesigns that move the same broken content into a new container.

A research method where users group topics or features into categories that make sense to them. Used to validate or challenge IA decisions before building. Reveals the gap between how designers label things and how users think about them.

Short UI text: labels, error messages, placeholders, tooltips. Has an outsized effect on how trustworthy a product feels.

Call to action. The label on the primary action. Save changes builds more trust than Submit. Own the action, do not apologise for asking.

Text explaining what went wrong and how to fix it. Invalid input names nothing. Your email must include an @ symbol names everything.

Hint text inside an input that disappears when the user starts typing. Cannot replace a label. By the time they need the reminder, it is gone.

Capitalising only the first word and proper nouns. The default for UI labels. Title Case On Everything reads like a legal document.

Putting the most important word first. Export ready beats Your export is complete and available for download. Users scan.

An error message next to the field that caused it. A summary at the top of a form makes users hunt. Inline is unambiguous.

The consistent personality behind all the words in a product. Formal or casual, technical or plain, warm or neutral. Voice stays the same regardless of context. Tone shifts within it depending on the situation.

How the voice adapts to the moment. The same product can be encouraging during onboarding, neutral in settings, and careful around destructive actions. Same voice, different register.

Confirmation that an action completed. Often neglected. Should be specific (Saved, not Done), and brief. A success message that reads like a press release has missed the point.

The copy on actions that cannot be undone. Delete, remove, disconnect, revoke. Should be unambiguous. Softening it with neutral language like clear or reset when the action is permanent misleads users about the consequences.

Text written to be read quickly rather than thoroughly. Short sentences, active voice, key information first. Most UI copy is never fully read. Writing for scanning is not dumbing down, it is respecting the user’s attention.

Deciding where and how text gets cut when it overflows. A name truncated mid-character is worse than one cut at a word boundary. Titles, labels, and descriptions each need their own truncation logic.

Explanatory text placed close to the thing it explains, at the moment the user needs it. Different from a tooltip, which requires hover, and from documentation, which requires navigation. The best contextual help is a single sentence that removes the need to ask.

How numbers are written in the interface. 1,000 vs 1000. 3.5k vs 3,500. $1.00 vs $1. Consistency matters more than the specific convention, but the convention should match the user’s locale.

A shared set of components, tokens, patterns, and guidelines. At its best a living product, not a static document. The gap between the system and what ships is where inconsistency lives.

The single place a team defers to for design decisions. Traditionally a Figma file, but increasingly the codebase itself as teams work closer to the real experience than a facsimile of it. Wherever it lives, it only works if everyone uses it.

Named containers for values like colors, spacing, or type sizes that can be reused and updated from one place. Change the variable and everything referencing it updates. The foundation of any scalable design system.

Design decisions stored as named variables that both design tools and code can reference. A token like --spacing-4 means the same thing in Figma and in a stylesheet. Tokens are what make a design system portable across platforms.

The cohesive set of decisions covering color, type, shape, motion, and tone that makes a product recognisable across every touchpoint. When it’s working, you know the product without seeing its name.

A named canvas in a design file representing a screen, view, or component. In Sketch they’re artboards, in Figma they’re frames. Frames also define clipping, layout grids, and auto layout behaviour, making them more structural than their name suggests.

An interactive mockup used to test or communicate a flow before it’s built. Can range from a few linked screens to something nearly indistinguishable from the real product. The fidelity should match the question being asked.

The moment design moves to engineering. Done well, it means accurate specs, shared tokens, and a designer who stays available for questions. Done poorly, it means developers making design decisions on their own.

Measurements and notes added to designs to communicate intent to developers: spacing values, color tokens, interaction behaviour, edge cases. Less necessary when teams share a design system, but still useful for anything non-standard.

A collection of visual references to explore or communicate a direction before committing. Used to align stakeholders on tone and aesthetic. The best ones make an argument. The worst are just Pinterest boards.

Screens with twice or more the pixel density of a standard display. Assets not prepared for it look blurry. Icons, images, and borders all need to account for 2x and sometimes 3x densities.

The metadata controlling how a link previews when shared: the image, title, and description. Often an afterthought, but the first impression of a page for most people who don’t visit it directly.

Two design variants running simultaneously to measure which performs better. Validates decisions with real behaviour rather than internal opinion. Results are only as good as the metric being measured.

A visualisation of where users click, tap, or scroll on a page. Shows what draws attention and what gets ignored. Useful for spotting affordance problems and finding content nobody reaches.

Video of individual user sessions through a product. Shows exactly where people hesitate, get confused, or give up. More specific than a heatmap, and harder to ignore.

The path users take toward a conversion goal: signing up, purchasing, completing a task. Drop-off at any step is a design problem. Most funnels lose the majority of users before the end.

The moment a visitor takes the desired action. Design affects it through clarity, trust, friction reduction, and the quality of the CTA.

The percentage of visitors who leave without taking any action. High bounce rates on key pages often point to a mismatch between what users expected and what they found.

How many users come back after their first visit. A product can have strong acquisition and terrible retention. Design affects both, but retention is the harder and more important problem.

Users who stop using the product. The inverse of retention. High churn means the product is not delivering enough value to keep people coming back.

Net Promoter Score. A measure of how likely users are to recommend a product, on a scale of 0 to 10. A blunt instrument, but widely used as a rough signal of overall satisfaction.

How far down a page users actually read. Most don’t get to the bottom. Content and CTAs buried below the fold may be seen by far fewer people than assumed.

The primary action trigger. Needs distinct default, hover, active, focus, disabled, and loading states. Never more than one primary button in the same view.

A text entry field. Needs a persistent label above it, not just a placeholder. Each state (default, hover, focus, error, disabled) should be visually distinct.

A multi-line input. Needs the same state treatment as a single-line input.

A dropdown for choosing one option from a list. The native HTML element is accessible but hard to style. Custom selects need careful keyboard and focus handling.

A toggle for a binary choice. Clicking the label should toggle it, not just clicking the box itself.

A set of options where exactly one can be selected. Distinct from checkboxes, which allow multiple.

A toggle for an on/off state. Implies an immediate effect. Use for settings that take effect without a save action.

A control for selecting a value within a range. Should update the value live on drag, not only on release.

An overlay that interrupts the current flow to require attention. Focus must be trapped inside it and the background should be inert to screen readers.

A panel that slides in from the screen edge. Common on mobile for secondary navigation or contextual actions. Same focus and dismissal rules as a modal.

A bottom sheet that pulls up from the base of the screen. A common mobile replacement for a dialog.

A small overlay anchored to an element, triggered by click. Can contain interactive content like links or buttons. Different from a tooltip, which cannot.

A small label on hover that explains an element. Cannot contain interactive content. If you need a link inside it, use a popover.

A temporary notification that auto-dismisses. Duration should reflect reading time, not a flat 2 seconds regardless of length.

A small label attached to another element. Implies a count when numeric. When it carries a word like New or a status label, it behaves more like a tag and needs different treatment.

A label that categorises content. Tags are standalone, selectable, or removable. Badges are attached and informational. They are not the same thing.

Stacked sections that expand and collapse. Good for FAQs and secondary content. Not a substitute for tabs when users need to compare across sections.

Switches between related views in the same space. Best for filtering the same content by time or category. Not for navigating unrelated sections.

A multi-step flow that shows progress through a sequence. Showing all steps upfront sets expectations. Hiding them creates anxiety.

A horizontally scrollable row of items. On desktop, often a sign the layout hasn’t been solved. On mobile, a natural pattern. Either way, the first item gets most of the attention.

A top-level or flyout structure for moving between major sections. Labels should reflect how users think about the product, not how it was built.

Persistent navigation anchored to an edge. Common in dashboards. Works well when users move between sections frequently.

A trail showing location within a hierarchy. Lets users navigate back at depth without using the browser’s back button.

Controls for moving between pages of content. Use when the full list is too long to load at once. Infinite scroll is an alternative with different tradeoffs.

A placeholder that holds the shape of content while it loads. Keeps the layout stable and signals what’s coming. Better than a spinner for list and page loads.

An indeterminate loading indicator. Good for short action-level waits. For page or list loads, a skeleton is almost always better.

A small image representing a user or entity. Needs a fallback when the image fails, usually initials or a generic icon.

A contained surface grouping related content. The inner radius should be smaller than the outer, calculated from the padding. Making the full surface a link makes text selection impossible.

A structured grid of rows and columns. Numbers should be right-aligned with tabular nums. Proper alignment does the work zebra striping is often used to compensate for.

An input that filters a dropdown as you type. Combines the feel of a text field with the constraints of a select.

A keyboard-triggered search interface for navigating or executing actions. Common in tools where power users want to avoid the mouse.

A bar showing completion through a determinate process. For unknown durations, use a spinner instead.

A visual divider between items or sections. Often overused when better spacing would do the same job.

What a view shows when there is no content yet. Should explain why and offer a first action. No items found tells the user nothing.