Viewport

“In web browser terms, it refers to the part of the document being viewed in the browser window (or on-screen, if the document is being viewed on a mobile browser or a desktop browser in full-screen mode).”

also: window, screen

Container

The type area of the page: in Müller-Brockmann’s system, the field inside the margins that carries text and image. On screen, a centred column held to a maximum width so that measure and grid keep their proportions on wide displays.

also: wrapper, content column, max-width

Page margin

The unprinted space between the type area and the edge of the format. Müller-Brockmann and Bringhurst treat the margins as proportions of the page rather than leftovers: the margins fix the type area, and the type area fixes the columns.

also: outer margin, side gutter

Column grid

A system of vertical fields and gutters dividing the type area, to which every element on the page is aligned. Müller-Brockmann builds the grid from the leading of the body type, so that every field is a whole number of lines. “Like tables, grid layout enables an author to align elements into columns and rows.”

also: 12-column grid, grid system, columns

Gutter

“Gutters or alleys are spacing between content tracks.”

also: column gap

Span

“A grid column is a vertical track in a CSS grid layout, and is the space between two vertical grid lines.” A span is the number of such tracks an item occupies.

also: column span

Row

“A grid row is a horizontal track in a CSS grid layout, that is the space between two horizontal grid lines.”

also: band

Section

“The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.”

also: band, block, strip

Hero

Nielsen Norman Group’s name for the large image or banner placed at the top of a page as the first thing a visitor sees, usually carrying the page’s main message.

also: opener, lead

Header

“The <header> HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.”

also: masthead, top bar, site header

Nav

“The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.”

also: navigation, menu

Sidebar

“This example uses <aside> to mark up a paragraph in an article.” The sidebar is the column beside the main content that carries navigation, an index, or related material.

also: rail, side column

Footer

“The <footer> HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data or links to related documents.”

also: page foot

Aside

“The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content.”

also: sidenote, marginal note, callout

Fold

Nielsen’s term, borrowed from the newspaper fold, for the bottom edge of the first screen: what sits above it is seen without scrolling, and his eyetracking studies found that readers spend most of their viewing time there.

also: above the fold, below the fold

Full-bleed

Bleed: a printed image that runs past the trim edge of the page so that no margin shows after cutting. On screen, an element that runs to the viewport edges, ignoring the container.

also: edge-to-edge, bleed

Inset

Positioned inward from its parent’s edges by a fixed distance on every side.

also: set in, indented

Offset

Moved from its natural grid position by a deliberate distance, usually to break alignment on purpose.

also: shifted, nudged, staggered

Overlap

“The z-index CSS property sets the z-order of a positioned element and its descendants or flex and grid items. Overlapping elements with a larger z-index cover those with a smaller one.”

also: layering, stacking, z-order

Sticky

“The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left.”

also: pinned on scroll

Fixed

“The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its initial containing block, which is the viewport in the case of visual media.”

also: pinned, locked

Stack

Items placed one under another in a single column with a set gap. The default when a row wraps at phone width.

also: vertical stack, stacked

Split

Two or more panes sharing a row. A 60/40 split leans one side; two-up and three-up name the count.

also: two-up, 50/50, side by side

Aspect ratio

“The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box.” Common ratios: 1:1, 3:2, 16:9, 4:5.

also: proportion, ratio

Breakpoint

“The points at which a media query is introduced, and the layout changes, are known as breakpoints.”

also: media query

Fluid

“The term responsive design, coined by Ethan Marcotte in 2010, described using fluid grids, fluid images, and media queries to create responsive content.”

also: responsive, elastic

Masonry

“Grid lanes layout is a layout method where one axis uses a strict grid layout and the other uses a stacking algorithm. Each item is placed into the lane with the most available space, producing a tightly packed layout without strict tracks on the stacking axis.”

also: Pinterest grid

Padding

“An element's padding area is the space between its content and its border.”

also: inner spacing, inset spacing

Margin

“Margin box: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using margin and related properties.” “The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing.”

also: outer spacing

Gap

“The gap CSS shorthand property sets the gaps (also called gutters) between rows and columns on multi-column, flex, and grid containers.”

also: grid gap, spacing between items

Whitespace

The unprinted area of the composition. In Müller-Brockmann’s grid systems empty space is an active element of the design with the same standing as type and image, not what remains after they are placed.

also: negative space, empty space, air

Baseline grid

In Müller-Brockmann’s method the leading of the body text sets a horizontal grid across the whole type area. Every line of every column sits on it, so lines register across columns and every field of the grid is a whole number of lines tall.

also: 4px grid, 8px grid, vertical grid

Spacing scale

Material Design’s spacing method: every measurement is taken from an 8 dp grid, with a 4 dp grid for small elements, so that spacing is chosen from a fixed set rather than case by case.

also: spacing tokens, space system

Modular scale

“A modular scale is a sequence of numbers that relate to one another in a meaningful way.”

also: type scale, ratio

Vertical rhythm

Rutter: “vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding.” Bringhurst: “Space in typography is like time in music.”

also: rhythm

Optical centering

Arnheim’s observation that the perceptual centre of a field lies above its geometric centre: an element placed at the mathematical middle reads as sitting low.

also: optical vs mathematical

Density

Material Design’s term for how much content a component fits into a given area; higher density fits more, lower density gives more room.

also: tight, loose, airy

Registration

Register: in printing, the exact alignment of successive impressions or colours with one another. In layout, elements sharing a common edge.

also: alignment edge, shared edge

Hang

Bringhurst’s hanging indent and hanging punctuation: setting a first line, a bullet, or a quotation mark past the left margin so that the text block itself keeps a clean edge.

also: outdent, hanging

Breathing room

Spacing generous enough that elements read as separate objects at rest. In this studio the floors are 16px gaps, 18 to 24px card padding, and 36px above section heads.

also: air, room

Proximity

The Gestalt law of proximity (Wertheimer, 1923): elements close to one another are perceived as a group. Robin Williams’s first principle of design: group related items together.

also: grouping

Typeface vs font

Lupton draws the line: a typeface is the design of the letterforms; a font is the software (or once, the metal) that delivers it. In CSS, font-family names the typeface.

also: family, face, cut

Weight

“The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.” The CSS scale runs 100 to 900; 400 is normal, 700 is bold.

also: thin, light, regular

Size

“The font-size CSS property sets the size of the font.” In Bringhurst’s terms the size is the body of the type, the em, not the height of any letter.

also: point size, px

Leading

“In typography, leading is an amount of space included above and below text to provide spacing between lines. Historically, in physical typesetting, pieces of actual lead were used to implement this spacing, which is where the name comes from.”

also: line-height, line spacing

Tracking

“The letter-spacing CSS property sets the spacing between text characters. This value is added to the natural spacing between characters while rendering the text.”

also: letter-spacing

Kerning

“Kerning affects how letters are spaced. In well-kerned fonts, this feature makes character spacing more uniform and pleasant to read by reducing white space between certain character combinations.”

also: pair spacing

Measure

Bringhurst’s guidance: 45 to 75 characters per line is satisfactory for a single column of text; 66 characters, counting letters and spaces, is widely regarded as ideal.

also: line length, column width

Baseline

“A baseline is an imaginary line along the inline axis of a line box along which individual glyphs of text are aligned.”

also: base line

x-height / cap height

In Bringhurst’s glossary the x-height is the height of the lowercase letters without ascenders or descenders, taken from the x; the cap height is the height of the capitals.

also: x-height, cap height

Ascender / descender

Bringhurst: ascenders are the strokes of lowercase letters that rise above the x-height (b, d, k); descenders are the strokes that fall below the baseline (g, p, y).

also: ascender, descender

Case

“The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.”

also: uppercase, lowercase, sentence case

Alignment

“The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.” Bringhurst prefers flush left with a ragged right for continuous text.

also: flush left, ragged right, centered

Rag

The uneven right-hand edge of unjustified text. Bringhurst asks for a rag that is soft and unpatterned: no shapes, steps, or holes.

also: ragged edge

Widow / orphan

“In typography, an orphan is the first line of a paragraph that appears alone at the bottom of a page.” “In typography, a widow is the last line of a paragraph that appears alone at the top of a page.”

also: widow, orphan

Hierarchy

Lupton: typographic hierarchy expresses the organisation of content, emphasising some elements and subordinating others, through size, weight, placement, and space.

also: type scale, levels

Display vs text

“The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.” Bringhurst: display sizes want tighter fit and finer detail; text sizes want sturdier strokes and open spacing.

also: headline face, reading face, optical size

Eyebrow

Harrower: in newspaper make-up a kicker is a short line set above the main headline. On the web the same device is called an eyebrow or overline.

also: kicker, overline, superhead

see Anchor / scaffolding

Dek

Harrower: a deck is a smaller headline set below the main headline, expanding it in a sentence.

also: subhead, standfirst, deck

Rule

A rule is a printed line. A hairline is the finest rule a process will render.

also: hairline, divider, separator

Indent

“The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.”

also: first-line indent, hanging indent, outdent

Figures

“The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.” Bringhurst’s terms: lining figures stand on the baseline at cap height; text (old-style) figures rise and fall like lowercase; tabular figures share one width, proportional figures do not.

also: numerals, lining, oldstyle

Optical alignment

“The hanging-punctuation CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.”

also: hanging punctuation, optical margin

Classification

Vox’s 1954 system, adopted by ATypI, groups typefaces by historical form: humanist, garalde, transitional, and didone serifs; mechanistic (slab) serifs; and the lineals, the sans serifs, divided into grotesque, neo-grotesque, geometric, and humanist.

also: grotesk, geometric, humanist

Drop cap / pull quote

“The initial-letter CSS property sets the size and sink for dropped, raised, and sunken initial letters.” Harrower: a pull quote is a line lifted from the story and set in larger type to draw the reader in.

also: drop cap, pull quote, initial

Running head / folio

Bringhurst’s glossary: the running head is the line at the head of each page repeating the title or chapter; the folio is the page number.

also: running head, folio, page furniture

Hyphenation

“The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines.”

also: hyphens, word break

Hue

In Munsell’s notation (1905) hue is the attribute that names a colour red, yellow, green, blue or purple and places it on the hue circle; value and chroma are its other two dimensions. “The hsl() functional notation expresses a color in the sRGB color space according to its hue, saturation, and lightness components.”

also: color family

Saturation

Munsell’s chroma: the strength or purity of a hue, its distance from neutral grey at the same value. CSS calls the same dimension saturation.

also: chroma, vividness, intensity

Lightness

Munsell’s value: the lightness of a colour on the scale from black to white, independent of hue and chroma. CSS calls it lightness.

also: value, tone, luminance

Tint / shade / tone

Itten’s terms: a tint is a hue lightened with white, a shade is a hue darkened with black, a tone is a hue greyed with grey or with its complement.

also: tint, shade, tone

Accent

Material Design’s secondary (accent) colour: a colour used sparingly to distinguish selected states, links, and controls against the primary and neutral colours.

also: highlight color, brand color

Neutral

Colours of little or no chroma, the greys, used for grounds and text. Albers shows that a neutral takes on the cast of the colours placed beside it.

also: grey, warm grey, cool grey

Foreground / background

Albers: colour is relative. A foreground reads only against its ground, and the same colour on two different grounds reads as two colours.

also: fg/bg, ground, text color

Surface

Material Design’s surface: the background of a component layer (sheet, card, dialog) on which content sits; in the dark theme surfaces are tinted according to their elevation.

also: layer ground, panel background

Contrast

“The color contrast between background and foreground content (that is, usually text) should be great enough to ensure legibility.” WCAG 2.1, 1.4.3: “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1”, with 3:1 for large-scale text.

also: contrast ratio

Opacity

“The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.”

also: alpha, transparency, translucent

Muted

Reduced in chroma or contrast so that it recedes. Itten’s contrast of saturation: a pure hue set against a dulled one.

also: knocked back, desaturated, subdued

Warm / cool

Itten’s contrast of cold and warm: hues from yellow through red-violet read as warm, from yellow-green through violet as cold, and the effect is relative to the neighbouring colours.

also: warm, cool, temperature

Monochrome

A scheme in a single hue varied in value and chroma, or in no hue at all (achromatic: black, white, and greys).

also: single hue, greyscale, black and white

Duotone

Pocket Pal: a two-colour halftone reproduction made from a one-colour photograph.

also: two-color

Gradient

“The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors.”

also: fade, ramp, blend

Overlay / scrim

Material Design’s scrim: a temporary, translucent layer placed over content so that a surface above it stands out, as behind a dialog or over an image under text.

also: wash, tint layer, scrim

Inverted

“The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in.” Material Design’s dark theme: light content on dark surfaces, with surfaces lightened by elevation.

also: dark mode, reversed out, knockout type

Token

“Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.” The W3C Design Tokens Community Group defines a token as a named design decision (a colour, a size, a spacing) stored so that tools and platforms share one value.

also: variable, CSS variable, design token

see Hard-coded

Swatch / palette

Pocket Pal: a swatch is a printed colour sample used as a specification; a palette is the chosen set of colours for a work.

also: swatch, palette, color set

Border

“The border CSS shorthand property sets an element's border. It sets the values of border-width, border-style, and border-color.”

also: stroke, outline, keyline

Shadow

“The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.” Material Design’s elevation expresses the height of a surface with the size and softness of its shadow.

also: drop shadow, elevation

Grain / noise / texture

Pocket Pal: grain is the clumping of silver in a photographic emulsion that shows as texture when enlarged; noise is the random variation in a digital image.

also: grain, noise, texture

Crop

Pocket Pal: cropping is the elimination of portions of an image so that the remainder is more useful, pleasing, or better fitted to the space.

also: trim, reframe

Cover vs contain

cover: “The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.” contain: “The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.”

also: fit, object-fit, fill the box

Letterbox / pillarbox

Bordwell and Thompson: letterboxing preserves a wide film frame on a narrower screen by masking bands above and below the image; pillarboxing is the same masking at the sides. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" or "pillarboxed" if its aspect ratio does not match the aspect ratio of the box.”

also: letterbox, pillarbox, bars

Bounding box

The rectangle an image is placed in. When the image does not fill it, the box shows through; in this studio the box is never a visible grey.

also: image box, container box

Focal point

“The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.”

also: object-position, anchor point

Retina / 2x

“The devicePixelRatio of Window interface returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.”

also: DPR, srcset, high-density

Lazy load

“Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.”

also: deferred loading

Placeholder / blur-up

A low-quality image placeholder: a tiny, blurred version of the image shown until the full file arrives, so that the layout never jumps.

also: LQIP, low-res preview, blur-up

Poster frame

“A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.”

also: poster, still frame

Autoplay / loop / muted / inline

autoplay: “A Boolean attribute; if specified, the video automatically begins to play back as soon as it can without stopping to finish loading the data.” loop: “A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.” muted: “A Boolean attribute that indicates the default audio mute setting contained in the video.” playsinline: “A Boolean attribute indicating that the video is to be played "inline", that is, within the element's playback area.”

also: autoplay, loop, muted

Knockout / alpha

The PNG specification defines an alpha channel: a value carried with each pixel giving its opacity, so that an image can be composited over any background. A knockout is such an image with its ground fully transparent.

also: transparent background, cut out, matte

Halftone / dither

Pocket Pal: a halftone is the reproduction of continuous-tone artwork through a screen that converts the image into dots of varying size; dithering approximates tones with a scattering of pixels from a limited palette.

also: halftone, dither, dot screen

Vignette

Pocket Pal: a vignette is an illustration whose background fades gradually away until it blends into the unprinted paper.

also: edge darkening

Alt text

WCAG 1.1.1: “All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.” “In these cases, the browser may replace the image with the text in the element's alt attribute.”

also: alt, image description

Vector / raster

“Scalable Vector Graphics (SVG) is a 2D vector image format based on an XML syntax.” “A raster image is an image file defined as a grid of pixels. They're also referred to as bitmaps. Common raster image formats on the Web are JPEG, PNG, GIF, and ICO.”

also: SVG, PNG, JPG

Still

Bordwell and Thompson: a still is a single frame of a film reproduced as a photograph; on the web, any non-moving image, including the frame a video shows before it plays.

also: frame, static image

Button

“A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.” “The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology.”

also: solid button, ghost button, text button

Link

“A link widget provides an interactive reference to a resource.” “The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.”

also: text link, inline link, anchor

Pill / chip / tag / badge

Material Design: chips are compact elements that represent an input, attribute, or action; a badge conveys dynamic information, such as a count or status, attached to another element. A pill is the rounded form; a tag is a chip used as a label.

also: pill, chip, tag

Label

“The <label> HTML element represents a caption for an item in a user interface.”

also: field label

Field

“The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.” “The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.”

also: input, text field, textarea

Select

“The <select> HTML element represents a control that provides a menu of options.” “A combobox is an input widget that has an associated popup. The popup enables users to choose a value for the input from a collection.”

also: dropdown, menu, combobox

Toggle / checkbox / radio

“A switch is an input widget that allows users to choose one of two values: on or off. Switches are similar to checkboxes and toggle buttons, which can also serve as binary inputs.” “Only one radio button in a given group can be selected at the same time.”

also: toggle, switch, checkbox

Slider / stepper

“A slider is an input where the user selects a value from within a given range. Sliders typically have a slider thumb that can be moved along a bar, rail, or track to change the value of the slider.” “The spinbutton role defines a type of range that expects the user to select a value from among discrete choices.”

also: slider, range, fader

Segmented control / tabs

“Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel.” Material Design’s segmented buttons: a single row of related, mutually exclusive options that switch a view or setting in place.

also: segmented control, tabs, tab bar

Accordion

“An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content.” “A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible).”

also: disclosure, expandable, collapsible

Card / tile

Material Design: a card is a contained surface that presents content and actions about a single subject; cards are independent of one another and can be rearranged. A tile is a card reduced to its image, set in a grid.

also: card, tile

List / table

“The ARIA list role can be used to identify a list of items.” “The <table> HTML element represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.”

also: list, table, ledger

Modal / dialog

“A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window.” “The <dialog> HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.”

also: modal, dialog, popup

Sheet / drawer / panel

Material Design: a bottom sheet is a surface anchored to the bottom edge of the screen that slides up to show supplementary content; a navigation drawer slides in from the side edge to hold destinations. A panel is either one docked open.

also: sheet, drawer, panel

Popover / tooltip

“A tooltip is a contextual text bubble that displays a description for an element that appears on pointer hover or keyboard focus.” A popover is the same anchored layer opened by a press and able to hold controls.

also: popover, tooltip, hover card

Toast / snackbar / banner

Material Design: snackbars provide brief messages about app processes at the bottom of the screen; banners display a prominent message and related actions at the top. “The status role defines a live region containing advisory information for the user that is not important enough to be an alert.”

also: toast, snackbar, banner

Breadcrumb / pagination

“A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application.” Pagination divides a long list into numbered pages with controls to move between them.

also: breadcrumb, pagination, page numbers

Progress / spinner / skeleton

“The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.” “The progressbar role defines an element that displays the progress status for tasks that take a long time.” A skeleton shows the shape of content before it arrives.

also: progress bar, spinner, skeleton

Icon / glyph

Bringhurst’s glossary: a glyph is the image of a character, a single mark in a font. Material Design: icons are symbols that represent actions, files, devices, or directories.

also: icon, glyph, pictogram

Mark / wordmark / lockup

Wheeler’s taxonomy of brandmarks: a wordmark sets the name itself in type; a pictorial or abstract mark is a symbol alone; a lockup is the fixed arrangement of mark and wordmark together.

also: mark, wordmark, logotype

Avatar / thumbnail

Material Design: an avatar is an image or symbol that represents a person or entity. Pocket Pal: a thumbnail is a small rough sketch or a reduced preview of a page or image.

also: avatar, thumbnail, thumb

Carousel

“A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides. Typically, one slide is displayed at a time, and users can activate a next or previous slide control that hides the current slide and "rotates" the next or previous slide into view.”

also: content slider, slideshow

Lightbox

A modal that shows an image or video large over the dimmed page, with next and previous controls; named after the photographer’s light box for viewing transparencies.

also: image viewer

Marquee / ticker

“A marquee is a type of live region containing non-essential information which changes frequently.” Examples are stock tickers and news crawls.

also: marquee, ticker, scrolling text

Caption / footnote

“The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element, providing the <figure> an accessible name.” Bringhurst: a footnote is a note set at the foot of the page, keyed to the text by a superior figure or symbol.

also: caption, footnote

Index / table of contents

“The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.” The Chicago Manual of Style: an index is an alphabetical list of subjects with locators; a table of contents lists the parts of a work in order.

also: index, TOC, table of contents

Form

“The <form> HTML element represents a document section containing interactive controls for submitting information.”

also: form

Rest

Material Design’s enabled state: the default state of a component, interactive but not yet acted on. Every other state is a departure from it.

also: default state, idle

Hover

“The :hover CSS pseudo-class matches an element when a user interacts with it using a pointing device. The pseudo-class is generally triggered when the user moves the cursor (mouse pointer) over an element without pressing the mouse button.”

also: rollover, mouseover

Focus

“The :focus CSS pseudo-class represents an element (such as a form input) that has received focus.” WCAG 2.4.7: “Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.”

also: focus ring, keyboard focus

Active

“The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.”

also: pressed, down

Selected

“The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select> element) that is checked or toggled to an on state.” “The aria-selected attribute indicates the current "selected" state of various widgets.”

also: checked, on, current

Disabled

“The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus.”

also: greyed out, inactive

Loading

“The aria-busy attribute is a global ARIA state that indicates whether an element is currently being modified.”

also: pending, busy

Empty state

Material Design’s empty state: what a container shows when it has nothing to display, explaining why it is empty and what to do next.

also: zero state, blank slate

Error / success / warning

“The aria-invalid state indicates the entered value does not conform to the format expected by the application.” Material Design: error, success, and warning are semantic colour roles kept separate from the brand colours.

also: validation, semantic state, feedback state

Expanded / collapsed

“The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden.”

also: open, closed, toggled

Affordance

Gibson’s term (1979) for what the environment offers an animal for action. Norman (1988) brought it into design as the perceived properties of a thing that suggest how it can be used, and later reserved the word signifier for the visible cue.

also: cue, signifier

Hit area

WCAG 2.2, 2.5.8: “The size of the target for pointer inputs is at least 24 by 24 CSS pixels”; the enhanced criterion 2.5.5 asks for at least 44 by 44.

also: target, tap target, clickable area

Cursor

“The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.”

also: pointer, hand, grab

Tap / drag / swipe / scrub

Apple’s Human Interface Guidelines: a tap activates a control; a drag moves an element while the finger stays down; a swipe is a quick directional stroke; a scrub moves through content by dragging along a track.

also: tap, click, long-press

Scroll snap

“The scroll-snap-type CSS property is set on a scroll container, opting it into scroll snapping by setting the direction and strictness of snap point enforcement within the snap port.”

also: snap points

Scroll-driven

“The animation-timeline CSS property specifies the timeline used to control the progress of a CSS animation.”

also: scrubbed by scroll, scroll-linked

Scroll-triggered

“The IntersectionObserver interface of the Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.”

also: reveal on scroll, fade in on enter

Parallax

Layers moving at different speeds on scroll to suggest depth.

also: depth scroll

Scroll-jacking

Nielsen Norman Group’s term for overriding the browser’s native scrolling with scripted movement; their usability studies find it disorients users and removes their sense of control.

also: hijacked scroll

Momentum

Apple’s Human Interface Guidelines: content flicked by the user keeps moving and decelerates smoothly, so that scrolling feels physical.

also: inertia, fling

Debounce / throttle

“Debouncing, in the context of programming, means to discard operations that occur too close together during a specific interval, and consolidate them into a single invocation.” “Throttling originally meant slowing down the rate of fluid flow using an obstruction.”

also: debounce, throttle, rate limit

Persist

“The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.”

also: remember, saved state

Transition

“Transitions enable you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.”

also: state change

Animation

“The animation CSS shorthand property applies an animation between styles.” “The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.”

also: keyframes, motion

Duration

“The transition-duration CSS property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.”

also: length, timing

Delay

“The transition-delay CSS property specifies the duration to wait before starting a property's transition effect when its value changes.” “The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.”

also: wait, offset in time

Easing

“The <easing-function> CSS data type represents a mathematical function that describes the rate at which a value changes.” “The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.” Thomas and Johnston’s principle of slow in and slow out: movement accelerates from rest and decelerates into it.

also: timing function, curve, ease-in

Spring

Thomas and Johnston’s follow through and overlapping action: parts of a moving body continue past the stopping point and settle back. A spring animation models that physically: mass, stiffness, and damping decide the overshoot and how quickly it settles.

also: overshoot, bounce, damping

Stagger

“The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.” A stagger applies the same animation to a sequence of elements with a small, regular increase in delay for each.

also: cascade, sequence

Keyframe

“The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.”

also: key, pose

Loop

“The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.”

also: repeat, infinite, cycle

Ping-pong

“The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.”

also: alternate, palindrome loop, reverse

Hold

“The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.” Thomas and Johnston’s timing: a held drawing, kept on screen for several frames, lets the audience read a pose before the next movement.

also: dwell, pause, settle

Fade

Bordwell and Thompson: a fade-in brightens the image from black, a fade-out darkens it to black; a dissolve superimposes the end of one shot on the beginning of the next. In CSS, an opacity transition. “The opacity CSS property sets the opacity of an element.”

also: crossfade, dissolve, opacity transition

Slide

“The transform CSS property lets you rotate, scale, skew, or translate an element.” A slide is a translate transition from just outside the resting position.

also: translate, move in

Scale

“The transform CSS property lets you rotate, scale, skew, or translate an element.” A scale changes size about a transform origin, without changing the layout.

also: zoom, grow, shrink

Wipe / mask / clip

Bordwell and Thompson: a wipe is a transition in which a line passes across the screen, revealing the next shot as it goes. “The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.”

also: wipe, mask, clip-path

Draw-on

“The stroke-dashoffset attribute is a presentation attribute defining an offset on the rendering of the associated dash array.” Animating the offset from the path’s full length to zero makes a line appear to draw itself.

also: trace, stroke reveal, line animation

Morph

An interpolation between two shapes with the same number of points, so that one outline becomes the other over time.

also: shape tween

Cut

Bordwell and Thompson: a cut is an instantaneous change from one shot to another; the most common transition in cinema and the one the viewer notices least.

also: no transition, hard change, instant

Ambient

Thomas and Johnston’s secondary action: movement that supports the main action without drawing attention to itself. Ambient motion runs continuously at low amplitude with no trigger.

also: idle animation, background motion, ambient loop

Frame rate

“The frequency of calls to the callback function will generally match the display refresh rate. The most common refresh rate is 60hz, (60 cycles/frames per second), though 75hz, 120hz, and 144hz are also widely used. requestAnimationFrame() calls are paused in most browsers when running in background tabs or hidden <iframe>s, in order to improve performance and battery life.”

also: 60fps, jank, stutter

Reduced motion

“The prefers-reduced-motion CSS media feature is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion.” WCAG 2.3.3: “Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.”

also: prefers-reduced-motion

Trigger

“The view-timeline CSS shorthand property defines a named view progress timeline's name, direction, and inset values.” GSAP’s ScrollTrigger names the same idea: a start and an end, each the meeting of a point on the element with a point in the viewport.

also: scroll trigger, start, end

see Scroll-triggered

Markers

GSAP’s ScrollTrigger markers: on-screen lines drawn during development to show where each trigger’s start and end fall in the page.

also: debug markers, start and end lines

Pin

GSAP’s ScrollTrigger pin: the triggered element is held fixed in the viewport for the scroll distance of the trigger, then released back into the flow; the space it occupied is preserved by a spacer.

also: pinned section, pinned scene, pin distance

see Sticky

Scrub

GSAP’s ScrollTrigger scrub: links the animation’s progress directly to the scrollbar, so that scrolling back plays it in reverse; a numeric scrub adds a lag, in seconds, over which progress catches up with the scroll position.

also: scrubbed, scroll-scrubbed, tied to scroll

see Scroll-driven

Progress

“The scroll-timeline CSS shorthand property is used to define a named scroll progress timeline, which is progressed through by scrolling a scrollable element (scroller) between top and bottom (or left and right).” Progress is the position along that timeline, from 0 at the start to 1 at the end.

also: progress value, 0 to 1, normalized progress

Timeline

GSAP’s timeline: a container that sequences tweens in time, so that a group of animations can be positioned relative to one another and played, paused, reversed, or scrubbed as a single unit.

also: sequence, master timeline

Tween

GSAP’s tween: a single animation of one or more properties of one or more targets from a start value to an end value over a duration with an ease.

also: tween, from / to, fromTo

see Keyframe

Label / position

GSAP’s position parameter: where a tween is placed on its timeline, expressed as an absolute time, a named label, or a value relative to the previous tween (“<” for with it, “+=” for after it).

also: label, position parameter, offset

Beat

A named moment in a sequence that other movements are keyed to. Thomas and Johnston’s timing: the number of frames given to an action decides how it reads, and the accents in a sequence are placed on the beats.

also: beat, hit, moment

Dead-hold

“The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.” A dead-hold is a stretch of a pinned scroll in which nothing animates, so the finished state can be read before release.

also: hold, freeze, tail hold

see Hold

Lead-in

Thomas and Johnston’s anticipation: a preparatory pause or counter-movement before the main action, so the audience is ready to see it.

also: lead, quiet start, pre-roll

Release

GSAP’s ScrollTrigger end: the scroll position at which a pin releases and the element returns to the document flow.

also: unpin, let go, release point

Toggle actions

GSAP’s toggleActions: the four actions a ScrollTrigger performs on entering, leaving, entering back, and leaving back (for example play, pause, resume, reverse, restart, complete, none).

also: toggleActions, play once, reverse on leave

Refresh

GSAP’s ScrollTrigger.refresh(): recalculates every trigger’s start and end positions after the layout changes; the library runs it on resize and load, and fonts or images arriving late call for another.

also: recalculate, recalc, lateRefresh

Scroll velocity

GSAP’s getVelocity(): the speed of the scroll position, in pixels per second, available inside a ScrollTrigger callback for effects driven by how fast the user scrolls.

also: velocity, scroll speed, skew on scroll

see Momentum

Smooth scroll

“The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.” A smooth-scroll library replaces the browser’s native scrolling with an interpolated position.

also: smooth scrolling, Lenis, inertia scroll library

see Scroll-jacking

Stacked cards

Successive sections pinned at the same viewport position, so that each new one covers the last as it arrives.

also: card stack, stacking sections, pile on scroll

Horizontal section

A pinned section whose content translates horizontally as the page is scrolled vertically; GSAP documents it as the horizontal-scroll ScrollTrigger pattern.

also: horizontal scroll, sideways section, horizontal pin

Progress indicator

“The scroll-timeline CSS shorthand property is used to define a named scroll progress timeline, which is progressed through by scrolling a scrollable element (scroller) between top and bottom (or left and right).” A progress bar reads the same scroll timeline and shows how far through the page or chapter the reader is.

also: progress bar, reading bar, scroll progress

In view

“The IntersectionObserver interface of the Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. The ancestor element or viewport is referred to as the root.”

also: IntersectionObserver, intersection, threshold

Compositing

“The will-change CSS property enables optimizing animations by providing a rendering hint to a browser about how an element is expected to change.” Animating only transform and opacity lets the browser composite the element on its own layer without laying the page out again.

also: GPU layer, transform-only, will-change

see Frame rate

Pin spacing

GSAP’s pinSpacing: the padding added below a pinned element equal to the pin’s scroll distance, so that following content is pushed down for the duration of the pin; set to false, the next section slides underneath instead.

also: pin spacer, spacer, extra height

Curtain

A masked image band that opens to a set height during a pin and closes again before release: a stage-curtain reveal keyed to scroll progress.

also: stage curtain, unfurl, well

Choreography

Material Design’s choreography: the coordinated sequence of motion across elements in a transition, so that things move with a clear order and shared timing.

also: orchestration, sequence design, motion plan

see Spec

Overlap

Thomas and Johnston’s overlapping action: parts of a movement begin before the previous movement has ended, so that the sequence reads as continuous rather than mechanical.

also: overlapping tweens, negative offset, crossing motion

see Stagger

Settle

Thomas and Johnston’s follow through: after the main action stops, appendages continue and settle into rest; in motion design, the final ease into the resting state.

also: come to rest, land, resting state

see Easing, Spring

Split text

GSAP’s SplitText: divides a block of text into characters, words, and lines, wrapping each in its own element so they can be animated separately; lines are re-split when the width changes.

also: split, chars, words

see Stagger

Telescoping title

A title that arrives by scaling from a much larger size down to its resting size, as in Saul Bass’s film title sequences. In CSS, a scale transform from a large value to 1.

also: telescope, scale-in title, Saul Bass title

Typewriter

Characters revealed one at a time, in order, as if typed, usually with a blinking caret at the insertion point.

also: typing effect, character by character, type-on

Scramble

Characters cycling through random glyphs before settling on the real ones; GSAP’s ScrambleTextPlugin animates the effect.

also: decode, shuffle, glitch text

Mask reveal

“The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.” A mask reveal moves the text up from behind a clipped line so it appears to rise from its baseline.

also: line mask, clip reveal, rise from the baseline

see Wipe / mask / clip

Counter

A numeral animated from a starting value to its final value, either by counting through the intermediate numbers or by rolling each digit like an odometer.

also: count-up, rolling number, odometer

Kinetic type

Kinetic typography: text whose movement in time carries meaning, a form dating from film title sequences of the 1950s and 1960s, notably Saul Bass’s work for Hitchcock and Preminger.

also: kinetic typography, moving type, animated type

Axis animation

“The font-variation-settings CSS property provides low-level control over variable font characteristics by letting you specify the four letter axis names of the characteristics you want to vary along with their values.” Animating an axis value, such as weight or width, changes the letterforms continuously.

also: variable font animation, weight animation, width axis

Link motion

“The text-decoration CSS shorthand property sets the appearance of decorative lines on text.” Animating the decoration’s thickness, offset, or extent produces the underline that draws in on hover.

also: underline draw, text swap, hover reveal

see Hover

Caret

The insertion bar of a text field, blinking to show where typed characters will appear; in typewriter effects, drawn as a bar at the end of the revealed text.

also: blinking caret, text cursor

see Cursor

Tracking animation

“The letter-spacing CSS property sets the spacing between text characters.” Animated from a wide value to zero, the letters of a word appear to gather.

also: letter-spacing tween, tracking in, expand and contract

Fade-up

“The transform CSS property lets you rotate, scale, skew, or translate an element.” A fade-up combines a short upward translate with an opacity transition from zero.

also: rise in, fade and rise, word-by-word

see Mask reveal

Blur-in

“The filter CSS property applies graphical effects like blur or color shift to an element.” A blur-in animates the blur radius to zero.

also: focus in, unblur, defocus

Outline text

“The -webkit-text-stroke CSS shorthand property specifies the width and color of strokes for text characters.” With the fill set to transparent, only the outline of the letters shows.

also: hollow text, stroked type, text-stroke

Knockout text

Pocket Pal: a reverse (knockout) is type or an image left unprinted so that the paper, or what lies beneath, shows through the surrounding ink.

also: cutout text, punched out, text as a window

see Inverted

Image-filled text

“The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.” With the value text and a transparent fill, the background shows only through the letterforms.

also: background-clip text, image in the letters, gradient text

Fill wipe

A second colour moved across the text, letter by letter or as a gradient position, so that the letters change colour in sequence.

also: color sweep, fill sweep, light through the letters

Highlighter

A coloured band behind a phrase, drawn in from one side like a marker stroke; the text itself keeps its colour.

also: marker highlight, highlight sweep, band behind text

Strikethrough draw

“The text-decoration CSS shorthand property sets the appearance of decorative lines on text.” A strikethrough draw animates the line-through from zero width to the width of the text.

also: cross out, line-through animated, cancel

Text shadow

“The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its text-decoration. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.”

also: drop shadow on text, long shadow, extruded type

Glitch

A brief, deliberate misregistration of the text: colour channels offset, horizontal slices displaced, then restored. Pocket Pal: out of register describes printed colours that fail to align.

also: RGB split, misregistration, displacement

Wave

Each character offset on the vertical axis by a sine function, with the phase advanced by the character’s index, so that a ripple travels along the word.

also: ripple, per-letter wave, sine text

Jitter

Small random offsets applied to the text on every frame, continuously.

also: shake, vibrate, nervous text

Rubber band

Thomas and Johnston’s squash and stretch: a body flattens on impact and lengthens in motion, its volume kept constant. Applied to type, a scale that overshoots on one axis and settles.

also: elastic, squash and stretch, bounce scale

see Spring

Split-flap

Characters that flip over on a horizontal axis, as on a split-flap departure board, cycling until they reach the target glyph.

also: flip board, rolodex, departure board

see Counter

Text morph

One word becoming another, either by cross-fading corresponding characters or by interpolating between glyph outlines with matching point counts.

also: word to word, character cross-fade, shape morph

see Morph

Text on a path

“The <textPath> SVG element is used to render text along the shape of a <path> element.”

also: circular text, curved type, textPath

Vertical text

“The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which text flows.”

also: writing-mode, sideways text, rotated label

Fit text

A headline sized so that it fills its container on one line, computed by measuring the text and scaling the font size, or with a fluid clamp() value.

also: fluid headline, viewport-fit, fills the width

see Fluid

Blend-mode text

“The mix-blend-mode CSS property sets how an element's content should blend with its backdrop — the content rendered behind the element within the same stacking context.”

also: difference, mix-blend-mode, inverting text

Video-masked text

“The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.” A video-masked text uses the letterforms as a mask over moving footage.

also: video in the letters, text as mask, moving fill

see Image-filled text

Stagger order

GSAP’s stagger object: the interval between each element’s start and the order in which elements begin, from the start, the end, the center, the edges, or at random.

also: from the center, from the ends, random order

see Stagger

Cursor-reactive text

Letters whose weight, position, or size respond to the pointer’s distance, computed from pointer events on every frame.

also: magnetic, follows the mouse, proximity effect

see Axis animation

Loading dots

Three dots pulsing in sequence to show that the system is waiting, the text equivalent of a spinner.

also: typing indicator, three dots, ellipsis pulse

see Progress / spinner / skeleton

Underline style

“The text-decoration CSS shorthand property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.”

also: text-decoration, offset underline, thick underline

see Link

Breathe

Thomas and Johnston’s moving hold: a held pose kept slightly in motion so that it does not die on screen. Applied to type, a slow, small, repeated scale.

also: attention pulse, gentle pulse, idle emphasis

see Ambient

Shimmer

A band of lighter tone passed across text or a placeholder shape, the motion used by skeleton screens to signal loading.

also: shine sweep, skeleton shimmer, light band

Tighten

Reduce space by one step on the scale: leading, tracking, gaps or padding. Say which.

also: close up, snug

Loosen

Increase space by one step on the scale. Say which: leading, tracking, gap, padding, margin.

also: open up, air out

Knock back

Make an element read as secondary: lower contrast, lighter weight, smaller size, or a muted color.

also: recede, quiet, dial down

Bring forward

Make an element read first: higher contrast, heavier weight, larger size, or the accent.

also: pop, lift, punch up

Flatten

Two meanings. In hierarchy: reduce the number of levels. In surface: remove depth cues, shadows and gradients.

also: reduce depth, fewer levels

Ground

Attach an element visually to an edge, a baseline or a surface so it stops floating.

also: settle, sit, land

see Anchor / scaffolding

Float

Let an element sit free of edges and other elements, with space on every side.

also: lift off, detach

Weight

Dondis: visual weight is the attraction an element exerts on the eye, from its size, tone, and position in the field.

also: heavy, light, mass

Hierarchy

Lupton: hierarchy expresses the organisation of content, emphasising some elements and subordinating others so that a reader can scan for what matters.

also: order of reading, emphasis order

Balance

Dondis: balance is the visual state in which the weights on either side of an axis are resolved; symmetry balances by mirroring, asymmetry by counterweight. Tension is the deliberate departure from it.

also: tension, asymmetry, symmetry

Rhythm

Dondis: rhythm is regularity of repetition, the measured recurrence of elements; Bringhurst: “Space in typography is like time in music.”

also: pulse, cadence

Restraint

Tufte’s principle: erase non-data-ink; remove every element that does not carry information.

also: spare, minimal, reductive

Register

Halliday’s linguistic register: the variety of language selected for a situation, its field, tenor, and mode. In design, the kind of document a piece is, which sets its conventions.

also: voice, tone, mode

Anchor / scaffolding

The framing layer added around content: eyebrows, kickers, legends, stat lines, labelled captions. In creative work here it is cut; content self-introduces.

also: eyebrows, kickers, meta-strips

see Eyebrow, Ground

Busy

Too many elements competing at the same level. Fixed by removing, grouping, or knocking back.

also: noisy, cluttered

Muddy

Values too close together to separate. Usually a contrast problem, sometimes a color one.

also: murky, low contrast

Cramped

Spacing below the floor: elements touching, text against edges. The most common fault in first drafts here.

also: smashed together, no room

Crisp / soft

Crisp: hard edges, high contrast, exact alignment. Soft: low contrast, rounded, blurred or gradient edges.

also: crisp, soft, hard-edged

Mechanical / organic

Mechanical follows the grid exactly; organic breaks it with hand-made irregularity. Both are choices; say which.

also: rigid, hand-touched, loose

Scale up / down

Change size, usually by one step of the type or spacing scale. Say the target.

also: bigger, smaller, step up

Cut

Remove entirely.

also: kill, nix, strip

Swap

Exchange one thing for another in the same place with the same role.

also: replace, substitute

Revert

Return to a previous state, named: the last commit, the version before the hero change.

also: roll back, undo, go back to

Fidelity

Buxton distinguishes the sketch, which is quick, tentative, and disposable, from the prototype, which is specific and testable; wireframes and mocks sit between them in finish.

also: sketch, wireframe, mock

Pass

One sweep through the whole piece changing one kind of thing.

also: type pass, polish pass, spacing pass

Variable

The single thing changed between two versions so the difference can be judged.

also: one variable per round

see Token

Placeholder

Pocket Pal: FPO, for position only, marks an image or block placed in a layout to show size and position, to be replaced by the final art.

also: FPO, lorem, dummy content

Spec

Pocket Pal: specifications are the written instructions for producing a job: sizes, materials, colours, and quantities, stated so that the work can be done without guessing.

also: specification, redline

Bug report

Mozilla’s bug-writing guidelines: a good report says what you did, what you expected, and what happened, with the steps to reproduce, the environment, and the exact error text, one bug per report.

also: report, write-up, ticket

Expected vs actual

ISTQB: the expected result is the predicted observable behaviour of a component or system under specified conditions; the actual result is the behaviour produced when it is executed.

also: expected, actual, should

Repro

ISTQB: a test procedure is the sequence of test cases in execution order. To reproduce a defect is to follow the steps that make it occur again from a known starting state.

also: steps to reproduce, reproducible, recipe

Intermittent

ISTQB: a flaky test produces different results on different runs of the same code; an intermittent defect is one that appears only on some executions, usually through timing or state that is not controlled.

also: flaky, sometimes, random

Regression

ISTQB: a regression is a degradation in the quality of a component or system due to a change; regression testing checks that changes have not caused unintended effects.

also: it used to work, broke after, worked before

Edge case

ISTQB’s boundary value analysis: defects cluster at the edges of equivalence partitions, the minimum, maximum, empty, and just-outside values, so those are tested first.

also: boundary, only when, corner case

Environment

ISTQB: the test environment is the hardware, software, and other components in which a test is executed; a defect report records the environment in which the failure was observed.

also: browser, device, viewport

Console error

An error message written to the browser’s developer console when a script throws, naming the exception, the message, and the file and line where it occurred.

also: red error, stack trace, dev tools

404 / missing asset

“The HTTP 404 Not Found client error response status code indicates that the server cannot find the requested resource. Links that lead to a 404 page are often called broken or dead links and can be subject to link rot.”

also: dead link, broken image, file not found

Blank page

A page that renders nothing: usually a script error before the first paint, a style rule hiding the content, or a file served with the wrong content type. The console holds the reason.

also: white screen, nothing renders, empty page

Layout shift

“Cumulative Layout Shift (CLS) is a usability metric for websites, designed by Google as one of the Core Web Vital metrics.” “Reflow happens when a browser recalculates the position and geometry of certain parts of a webpage, such as after an update on an interactive site.”

also: CLS, jumps, content moves after load

Overflow / cut off

“The overflow CSS shorthand property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction.”

also: clipped, text cut off, spills out

Misalignment

Pocket Pal: out of register is the failure of printed elements to align with one another; on screen, edges or baselines that should share a line and do not.

also: off by a pixel, not lined up, drifts

Stacking bug

“Stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage.”

also: behind, underneath, hidden behind the header

see Stacking context

Dead control

“The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.”

also: can’t click, nothing happens, unclickable

Double fire

A handler that runs twice for one action, because it was registered twice or because the event bubbles to two listeners.

also: fires twice, runs twice, duplicate

Stuck state

A state that should be cleared and is not: a class never removed, a timer cleared early, a hover that persists on a touch screen.

also: doesn’t reset, stays highlighted, hover stuck

Race condition

A defect that depends on the relative timing of two operations, so that the result differs by which finishes first; ISTQB classes it as a timing-dependent, non-deterministic failure.

also: timing, depends on order, loads too early

see Refresh

Stale cache

“A cache (web cache or HTTP cache) is a component that stores HTTP responses temporarily so that it can be used for subsequent HTTP requests as long as it meets certain conditions.” “The HTTP cache stores a response associated with a request and reuses the stored response for subsequent requests.”

also: old version, not showing my change, cached

see Hot reload

Partial deploy

A site observed while its files are still being replaced, so that new HTML references assets that have not yet arrived. GitHub Pages deployments are not atomic across files.

also: deploy lag, live but old, some files updated

see Deploy

Works locally

A difference between the development environment and production: file-name case, uncommitted files, locally installed fonts, absolute paths. ISTQB: the environments differ, so the results differ.

also: fine on my machine, broken live, only in production

Jank

“Jank refers to sluggishness in a user interface, usually caused by executing long tasks on the main thread, blocking rendering, or expending too much processor power on background processes.”

also: stutter, choppy, drops frames

see Frame rate, Compositing

Hang

The main thread blocked by a task that never yields, so that the page cannot paint or respond to input.

also: freeze, infinite loop, locked up

Memory leak

“Low-level languages like C, have manual memory management primitives such as malloc() and free(). In contrast, JavaScript automatically allocates memory when objects are created and frees it when they are not used anymore (garbage collection).” A leak is memory that is no longer needed but still referenced, so it is never freed.

also: gets slower over time, tab grows, leaks

Flash of fallback

“The font-display descriptor for the @font-face at-rule determines how a font face is displayed based on whether and when it is downloaded and ready to use.” A flash of unstyled text is the fallback face showing until the web font loads and swaps in.

also: FOUT, flicker on load, font swaps

see Font loading

Wrong font rendering

“The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.” When a requested weight is missing, the browser synthesises it, and the result is a faux bold or faux italic.

also: fallback showing, faux bold, wrong weight

Squashed / blurry image

“The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.” “The devicePixelRatio of Window interface returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.”

also: stretched, distorted, pixelated

see Cover vs contain, Retina / 2x

Wrong value

“Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.” A value typed in place of the token is the usual cause of a colour or size that does not match the system.

also: wrong shade, not the token, hard-coded

see Token, Hard-coded

Off by one

A count or index wrong by exactly one: a loop that stops early or runs long, numbering that starts at zero where one was meant, the last item dropped.

also: one too many, missing the last one, starts at zero

Responsive break

“The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries.” A responsive break is a layout rule applied at the wrong width, or a fixed width inside a fluid one.

also: wrong breakpoint, squished at tablet, mobile layout on desktop

see Breakpoint

Scroll problem

“The scroll-margin-top property defines the top margin of the scroll snap area that is used for snapping this box to the snapport.” Anchors that land under a sticky header, scroll that stays locked after a modal, and libraries that fight native scrolling are the common cases.

also: scroll jumps, can’t scroll, scroll lock stuck

see Scroll-jacking

Keyboard trap

WCAG 2.1.2 No Keyboard Trap: if keyboard focus can be moved to a component, it can be moved away from it using only the keyboard.

also: focus trap, can’t tab out, focus lost

see Focus order, Focus

Not a bug

ISTQB: a defect is an imperfection or deficiency that fails to meet its requirements; behaviour that meets the specification is not a defect, and a wish for different behaviour is a change request.

also: by design, working as intended, expected behaviour

Root cause

ISTQB: the root cause is the source of a defect such that, if it is removed, the occurrence of that type of defect is decreased or removed; root cause analysis finds it before a fix is attempted.

also: the real reason, underlying cause, why it happens

Severity

ISTQB: severity is the degree of impact a defect has on the development or operation of a component or system; priority is the level of business importance assigned to it.

also: blocker, critical, minor

Revert or fix forward

Pro Git: git revert creates a new commit that undoes the changes of an earlier one, leaving history intact. Fixing forward means committing a correction on top instead.

also: roll back, patch, hotfix

see Revert

Bisect

Pro Git: git bisect performs a binary search through the commit history, marking each checked-out commit good or bad, to find the commit that introduced a defect.

also: what changed, narrow it down, which commit

see Commit / branch / diff

Typo

Chicago Manual of Style: a typographical error is an error in the typesetting of a text rather than in its composition; corrected at proof.

also: wrong word, misspelled, copy error

Wrong target

“The CSS class selector matches elements based on the contents of their class attribute.” A change lands on the wrong elements when the selector matches more than intended.

also: changed the wrong thing, applied everywhere, selector too broad

Static site

A site served as prebuilt files, with no server-side processing per request. GitHub Pages serves such files directly from a repository.

also: static HTML, flat files

Inline CSS

“The <style> HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element.”

also: styles in the file, stylesheet

Class / selector

“The CSS class selector matches elements based on the contents of their class attribute.”

also: class, selector, id

Component

A reusable unit of interface defined once and instantiated many times; Material Design’s components are its named, documented units.

also: partial, include, template

Media query

“The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.”

also: @media

see Breakpoint

Position

“The position CSS property sets how an element is positioned in a document.”

also: relative, absolute, fixed

see Sticky, Fixed

Overflow / clip

“The overflow CSS shorthand property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction.”

also: scroll container, cut off, overflow hidden

Stacking context

“Stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. The stacking context determines how elements are layered on top of one another along the z-axis (think of it as the "depth" dimension on your screen).”

also: z-index

Pseudo-element

“In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property.”

also: ::before, ::after

Flex / grid

“The CSS flexible box layout module defines a CSS box model optimized for user interface design, and the layout of items in one dimension.” “The CSS grid layout module excels at dividing a page into major regions or defining the relationship in terms of size, position, and layering between parts of a control built from HTML primitives.”

also: flexbox, CSS grid

see Column grid

Units

“The <length> CSS data type represents a distance value.”

also: px, rem, em

Hot reload

“The HTTP cache stores a response associated with a request and reuses the stored response for subsequent requests.” A hard refresh bypasses the cache; a cache-bust changes the URL so a fresh copy is fetched.

also: HMR, live reload, hard refresh

Local / live / staging

Local is the site served from the developer’s own machine (localhost); live, or production, is the public deployment; staging is a copy deployed for review before release.

also: localhost, port, deployed

Deploy

Publishing the current files to the live server. On GitHub Pages a push to the configured branch triggers the deployment.

also: push, ship, go live

Commit / branch / diff

Pro Git: a commit is a snapshot of the project recorded with a message; a branch is a movable pointer to a line of commits; a diff is the change between two states.

also: commit, branch, diff

Endpoint / JSON

“An API (Application Programming Interface) is a set of features and rules that exist inside a software program (the application) enabling interaction with it through software - as opposed to a human user interface.” “JavaScript Object Notation (JSON) is a data-interchange format.”

also: API, request, payload

Daemon / registry

A daemon is a background process that runs without a user interface, waiting for requests; a registry is the file or store it reads its entries from.

also: background process, service, daemon

Semantic HTML

“In programming, Semantics refers to the meaning of a piece of code — for example "what effect does running that line of JavaScript have?", or "what purpose or role does that HTML element have" (rather than "what does it look like?".)” “Accessibility (A11y) means enabling as many people as possible to use websites, including those with limited abilities.”

also: a11y, accessibility, ARIA

Focus order

WCAG 2.4.3 Focus Order: if a page can be navigated sequentially and the sequence affects meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

also: tab order

Meta

“The <meta> HTML element represents metadata that cannot be represented by other meta-related elements, such as <base>, <link>, <script>, <style>, or <title>.” “A favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu.”

also: favicon, OG image, title tag

Font loading

“The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.” “The font-display descriptor for the @font-face at-rule determines how a font face is displayed based on whether and when it is downloaded and ready to use.”

also: FOUT, fallback stack, web font

Hard-coded

“Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.” A hard-coded value is typed in place instead of read from such a property.

also: magic number, literal value

see Token

Artifact

A private page published by Claude at a claude.ai URL and updated in place.

also: published page, claude.ai artifact

Worktree

Pro Git: a working tree is a checkout of one version of the project; git worktree adds a second working tree attached to the same repository so that two branches can be checked out at once.

also: branch checkout, isolated copy

Handoff

The written state of a project for whoever picks it up next: what is live, what is parked, how to run it.

also: handoff doc, notes

Plug-in

Steinberg: a VST plug-in is a software module hosted by an audio application, either an effect, which processes audio, or an instrument, which generates it from MIDI.

also: plugin, effect, instrument

Format

Steinberg’s VST 3 is the current Virtual Studio Technology interface; Audio Units (AU) is Apple’s plug-in interface, required by Logic; AAX is Avid’s for Pro Tools; CLAP is an open format published in 2022.

also: VST3, AU, Audio Unit

Host / DAW

Steinberg: the host is the application that loads plug-ins, supplies them with audio and MIDI, and provides tempo, transport, and automation. A digital audio workstation is such a host with recording, editing, and mixing.

also: DAW, host, sequencer

Insert / send / bus

Ableton Reference Manual: an insert effect processes the whole signal of a track in series; a send routes a copy of the signal to a return track, where a shared effect is applied and mixed back.

also: insert, send, return

Signal chain

Roads: the order in which processing units are connected, each taking the output of the last; the result depends on the order.

also: signal flow, routing, path

Dry / wet

Zölzer: the dry signal is the unprocessed input, the wet signal the processed output; a mix control blends the two.

also: mix, blend, dry

Parameter

Steinberg: a parameter is a value of a plug-in exposed to the host, with a range, a default, and a display name, so that the host can show, automate, and store it. “The Web Audio API's AudioParam interface represents an audio-related parameter, usually a parameter of an AudioNode (such as GainNode.gain).”

also: param, control value, exposed control

Automation

Ableton Reference Manual: automation is the recording and playback of parameter changes over time in an envelope drawn on the track; the plug-in must report its parameters for them to be automated.

also: automation lane, write, read

Modulation

Roads: modulation is the control of one signal by another; a low-frequency oscillator or an envelope drives a parameter from inside the instrument.

also: mod, mod source, mod matrix

LFO

“The OscillatorNode interface represents a periodic waveform, such as a sine wave.” Roads: a low-frequency oscillator is one whose rate lies below the audio range, used as a control signal.

also: low frequency oscillator, wobble

Envelope

Roads: an envelope is a control function describing how a parameter changes over the course of an event; the ADSR envelope has attack, decay, sustain, and release segments.

also: ADSR, attack, decay

Gate

Zölzer: a noise gate passes the signal when it exceeds a threshold and attenuates it below. In Ableton’s Beat Repeat, gate sets how much of each repeat interval sounds.

also: gate length, noise gate, threshold

Sample rate / buffer size

“The sampleRate property of the BaseAudioContext interface returns a floating point number representing the sample rate, in samples per second, used by all nodes in this audio context.” Roads: the buffer is the block of samples processed at once; smaller buffers reduce latency and increase the processing load.

also: sample rate, buffer size, block size

Latency / lookahead

“The baseLatency read-only property of the AudioContext interface returns a double that represents the number of seconds of processing latency incurred by the AudioContext passing an audio buffer from the AudioDestinationNode — i.e., the end of the audio graph — into the host system's audio subsystem ready for playing.” Steinberg: a plug-in that delays the signal reports its latency so the host can compensate.

also: latency, lookahead, delay compensation

Tempo sync / transport

Steinberg: the host passes the plug-in its process context, including tempo, time signature, transport state, and the project position in quarter notes (PPQ).

also: BPM, host sync, playhead

Note division

Ableton Reference Manual: rhythmic values are expressed as fractions of a bar (1/4, 1/16); dotted values are one and a half times the length, triplet values two thirds.

also: rate, division, 1/16

MIDI

The MIDI 1.0 specification: a message protocol for musical events, chiefly note on and note off with pitch and velocity, and continuous controllers for other parameters.

also: notes, CC, velocity

Gain / level / dB

“The GainNode interface represents a change in volume. It is an AudioNode audio-processing module that causes a given gain to be applied to the input data before its propagation to the output.” Roads: level is expressed in decibels, a logarithmic ratio; 0 dBFS is full scale in a digital system.

also: gain, level, volume

Meter

Zölzer: a peak meter follows the instantaneous maximum of the signal; an RMS or VU meter follows its average power; loudness meters (LUFS) follow perceived level.

also: VU, peak meter, RMS

Waveform / scope

“The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information. It is an AudioNode that passes the audio stream unchanged from the input to the output, but allows you to take the generated data, process it, and create audio visualizations.” The time-domain view is the waveform.

also: waveform view, oscilloscope, scope

Spectrum / spectrogram

“The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information.” Roads: a spectrum shows the amplitude of each frequency at one moment; a spectrogram shows how the spectrum changes over time.

also: analyzer, FFT, EQ display

Filter

“The BiquadFilterNode interface represents a simple low-order filter, and is created using the BaseAudioContext/createBiquadFilter method.” Zölzer: a low-pass filter attenuates above its cutoff frequency, a high-pass below it, a band-pass outside a band; resonance boosts at the cutoff.

also: low-pass, high-pass, band-pass

Buffer / slice / grain

“The AudioBuffer interface represents a short audio asset residing in memory, created from an audio file using the AudioContext.decodeAudioData() method, or from raw data using AudioContext.createBuffer().” Roads: granular synthesis builds sound from grains, very short enveloped segments of sound.

also: buffer, slice, grain

Scrub / scan

Ableton Reference Manual: scrubbing plays audio from the position under the pointer as it is dragged through the waveform.

also: scrub, scan, read head

Retrigger / beat repeat

Ableton Reference Manual: Beat Repeat captures the incoming signal and repeats a slice of it at a chosen interval and grid; retriggering restarts the slice from its beginning.

also: beat repeat, stutter, retrigger

Voice

Roads: a voice is one instance of a synthesis or playback process; polyphony is the number of voices that can sound at once, and voice stealing reassigns a sounding voice when none is free.

also: voices, polyphony, mono

Declick / smoothing

Zölzer: an abrupt change in a signal or a parameter produces a click; interpolating the parameter over time, and crossfading at boundaries, removes it.

also: declick, crossfade, zipper

Oversampling / aliasing

Zölzer: nonlinear processing generates frequencies above half the sample rate, which fold back into the audible band as aliasing; oversampling runs the process at a higher rate to avoid it.

also: oversampling, aliasing, 2x

Preset / state

Steinberg: a plug-in’s state is the complete set of values the host stores with the project and restores on load; a preset is a state saved for recall by name.

also: preset, patch, state

Editor / processor

JUCE: the AudioProcessor handles the audio and parameters; the AudioProcessorEditor is the graphical component that displays and controls it. The editor may be closed while the processor runs.

also: GUI, UI, editor

Knob / fader / switch

JUCE’s Slider component has rotary and linear styles; a rotary slider is a knob, a linear one a fader; a ToggleButton switches between two states.

also: knob, rotary, fader

Bypass

Steinberg: bypass passes the input to the output unprocessed; the host provides its own bypass, and a plug-in may implement a smoothed one.

also: bypass, enable, on/off

Sidechain

Steinberg: a side-chain is an auxiliary audio input bus whose signal controls processing without being heard in the output.

also: sidechain, external input, key input

Stereo / mono / mid-side

Zölzer: mid is the sum of the left and right channels, side their difference; scaling the side signal changes the stereo width.

also: stereo, mono, mid-side

Audio thread

“The AudioWorklet interface of the Web Audio API is used to supply custom audio processing scripts that execute in a separate thread to provide very low latency audio processing.” JUCE: processBlock runs on the real-time audio thread, where allocation, locks, and I/O must be avoided.

also: real-time safety, audio callback, lock-free

CPU load

Ableton Reference Manual: the CPU load meter shows how much of the available processing time audio is consuming.

also: DSP load, performance, CPU meter

Capture / take / bounce

Ableton Reference Manual: a take is a recorded pass; resampling records the output of the master or a track to a new clip; freezing renders a track’s output to audio to save processing.

also: record, take, bounce

Ring buffer

Roads: a circular (ring) buffer is a fixed-length buffer whose write position wraps to the start when it reaches the end, so it always holds the most recent samples.

also: rolling buffer, circular buffer, ring

Validation

Apple’s auval validates an Audio Unit against the specification before Logic will load it; pluginval runs the same kind of checks across formats.

also: auval, pluginval, host scan

Demo / license

A time- or feature-limited version of a commercial plug-in, unlocked by a license key or an authorisation system.

also: trial, license key, activation