A visual A–Z reference of every design term you'll see in modern UI. What is a bento grid? What's the difference between glassmorphism and neumorphism? Why does every AI app use a blueprint grid? Each term comes with a live demo, do/don't rules, and the systems on freedesignmd that exemplify it.
51 terms · 8 categories · all free, all linkable
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.
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.
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 designed view shown when a list, table, or page has no content yet — explains what should be there and how to get it.
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.
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.
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.
It's a free, visual A–Z reference of the design vocabulary used in modern UI — layouts, surfaces, typography, color, motion, aesthetic movements, components, and patterns. Each term has a live demo, do/don't rules, example systems, and its own FAQ.
Designers, founders, product managers, and especially people building with AI tools (Lovable, Cursor, Claude, v0). Knowing the right term — 'bento grid' vs. 'asymmetric split', 'glassmorphism' vs. 'neumorphism' — is the fastest way to get the output you actually want.
Each term page includes a copy-ready prompt snippet you can paste into your AI tool. Combine the term with the example system slugs (e.g., 'use a bento grid like vinyl-noir') for the most accurate results.
Some are (Swiss grid, monochrome, skeuomorphism — decades-old vocabulary). Others are working terms that emerged from the design community in the last few years (bento grid, glassmorphism, mesh gradient). The lexicon documents both with origin notes where useful.
Yes — every term, every visual, every example system is free, linkable, and indexable. There is no paywall, no signup, and no usage limit.
The lexicon grows as new patterns and aesthetics emerge in the field. If you'd like to suggest a missing term, use the feedback button at the bottom-right of any page.
Terms are grouped A–Z by default. You can also filter by category — Layout, Surface & Material, Typography, Color & Tone, Motion & Scroll, Aesthetic Movement, Component, and Pattern — using the chips above the list.
Yes. Every term has a stable URL at /lexicon/{slug} — for example, /lexicon/bento-grid. Share, cite, and embed freely.