The design vocabulary for AI builders.

A two-column layout where the columns have intentionally unequal widths, often 60/40 or 70/30.

A row of slightly-overlapping circular avatars showing multiple people associated with an item, often with a +N overflow chip.

A modular grid of differently-sized rectangular cards arranged like a Japanese bento box.

A page-wide background grid of faint horizontal and vertical lines, evoking architectural drafting paper.

A horizontal trail of links showing the user's location in a hierarchical structure, separated by slashes or chevrons.

A web design aesthetic that rejects polish — using raw HTML defaults, harsh borders, system fonts, and deliberate ugliness as expressive choices.

A z-axis stack of overlapping cards where the top card is fully visible and lower cards peek out behind it.

A single column of content centered horizontally on the page with generous symmetric whitespace on both sides.

A keyboard-first search overlay (usually triggered with ⌘K) that exposes navigation, actions, and search in a single dialog.

A circular, multi-stop conic gradient used as an ambient glow behind hero elements, often blurred and slowly rotating.

The frosted-glass surface treatment applied on a dark base — translucent panels with backdrop blur over a deep, colorful backdrop.

A UI color scheme where backgrounds are dark and content is light, designed to reduce eye strain in low-light contexts.

Typography used at large sizes (48px+) where the typeface's personality dominates over readability concerns.

A subtle background texture of evenly-spaced dots, used as a quiet structural reference instead of a solid color.

An image or design treatment using exactly two colors — typically one dark, one light — replacing the full tonal range.

A high-contrast or transitional serif typeface used at display sizes to give a UI a magazine-quality feel.

A web design approach that borrows from print magazine craft — strong typographic hierarchy, baseline grids, generous whitespace, and treating the page like a spread.

A designed view shown when a list, table, or page has no content yet — explains what should be there and how to get it.

A design language that removes shadows, gradients, and skeuomorphic textures in favor of solid colors and 2D shapes.

A layout where content extends to the very edges of the viewport with no horizontal padding.

A button with no fill — just a border (or no border at all) and a text label, used as a low-emphasis secondary action.

A surface treatment that uses background blur and translucency to make UI panes look like frosted glass.

A smooth color gradient with film-grain noise overlaid to add tactile texture and prevent banding.

A 1px-or-thinner border at very low opacity, used to separate UI elements without visual weight.

A section where vertical scrolling is translated into horizontal movement, usually via position:sticky and transform.

Type that moves — words and letters animated as the primary visual element of a screen, not as decoration around static type.

An editorial composition mixing drop caps, pull-quotes, asymmetric image blocks, and column rules — print-magazine logic on the web.

An interaction where buttons and links pull the cursor toward them, or deform slightly when the cursor approaches.

A wide margin column running alongside the main content, used for footnotes, sidenotes, or metadata.

A horizontally-scrolling band of content (logos, words, images) that moves continuously at a constant speed.

A gradient generated by blending multiple colored points across a 2D surface, creating soft organic color washes.

A focused overlay that interrupts the page to confirm an action, collect input, or surface critical information.

A color scheme using a single hue across multiple lightness and saturation values.

A user interface that uses a monospace typeface — where every character occupies the same horizontal space — for body text, labels, or even headlines.

A surface effect where text or elements emit a saturated colored light, simulating neon tubes against dark surfaces.

A soft 3D surface style using paired inner and outer shadows on a single background color to simulate extruded plastic.

A color system using the OKLCH color space (perceptually uniform) and Display-P3 gamut for vibrant, accessible color.

A scroll effect where background and foreground layers move at different speeds, creating an illusion of depth.

A button with a fully-rounded radius (border-radius: 9999px) so the ends form perfect semicircles.

A print-inspired aesthetic mimicking the limited-palette, mis-registered, grainy look of Riso duplicator printing.

An animation pattern where elements fade, slide, or scale into view as they enter the viewport on scroll.

A horizontal row of mutually exclusive options where exactly one is selected, styled as connected pill buttons.

A placeholder UI that mimics the shape of upcoming content, usually with a shimmering animation, while real data loads.

A design approach that mimics real-world materials and objects — leather textures, metal surfaces, paper grain — in digital UI.

A hero section divided into two equal vertical halves, typically pairing a content side with a visual or accent side.

A card with a soft radial glow that follows the cursor, usually combined with a hairline border on a dark surface.

Horizontal full-width sections of alternating background color or texture, stacked top to bottom.

A horizontal sequence of numbered steps showing progress through a multi-step flow like checkout, onboarding, or a wizard.

A vertical sidebar that stays pinned to the viewport while the main content scrolls, typically holding navigation or a table of contents.

A scroll technique where an element pins to the viewport while surrounding content continues to scroll past it.

A strict modular grid system from mid-century Swiss design, using a baseline grid and sans-serif type for objective clarity.

An animation where characters cycle through random glyphs before resolving — or where a variable font's weight/width morphs on interaction.

A small, transient message that appears at the edge of the screen to confirm an action or surface a status update.

A small, transient label that appears on hover or focus to explain an icon, button, or truncated text.

Animating a font's design axes — weight, width, slant, optical size — over time, so a single typeface morphs without swapping files.

Native browser animations that morph elements between page states — a thumbnail can grow into a full hero on navigation.