The Vibe Coder's Lexicon

The large, prominent area at the top of a page — typically the first thing a visitor sees. Usually contains a headline, subtext, and a call-to-action.

A vertical panel along the left or right edge of the screen, often used for navigation, filters, or secondary content.

The horizontal bar across the top of a page containing links, a logo, and sometimes a search field or user menu.

A layout system that organizes content into rows and columns. Most modern sites use a 12-column grid under the hood.

A self-contained rectangular container for a piece of content — typically an image, title, description, and action. Think of it as a digital index card.

The section at the very bottom of the page, usually containing links, copyright, contact info, or social icons.

Empty space between elements. Not wasted space — it gives content room to breathe and guides the eye.

Padding is the space inside an element (between the content and its border). Margin is the space outside it (between the element and its neighbors).

A wrapper that constrains content to a maximum width and centers it on the page. Prevents text from stretching edge-to-edge on wide screens.

A component that cycles through multiple items (images, cards, testimonials) in a horizontal strip — usually with arrows or swipe gestures.

A row of labeled sections where clicking one label shows its content and hides the others. Think of it like folder tabs in a filing cabinet.

A vertically stacked list of headings that expand/collapse to reveal content when clicked. Great for FAQs.

A panel that slides in from the side of the screen (usually right), overlaying the main content. Common for mobile menus, filters, or shopping carts.

Splitting long lists of content across numbered pages (Page 1, 2, 3…) instead of showing everything at once.

A trail of links showing the user's path through the site hierarchy (Home → Products → Category → Item).

A link that jumps to a specific section on the same page instead of navigating to a new page.

A navbar or element that stays fixed at the top of the viewport as the user scrolls down the page.

A clickable element that triggers an action — submitting a form, opening a dialog, navigating somewhere. The most fundamental interactive element.

A control that flips between two states — on/off, yes/no, dark mode/light mode. Looks like a small physical switch.

A button or field that, when clicked, reveals a list of options below it. The user picks one and the list closes.

A box that pops up in the center of the screen, dimming the background. Demands attention — the user must interact with it or close it before continuing.

A small floating text bubble that appears when hovering over an element. Used for brief explanations without cluttering the UI.

Similar to a tooltip but richer — can contain buttons, links, or forms. Stays open until dismissed.

A small preview card that appears when hovering over a link or element — showing a summary without navigating away.

Not a component per se — it's a design concept. The primary action you want the user to take, usually styled as a prominent button or link.

A single-line text box where users type information — name, email, search query. The workhorse of forms.

A multi-line text box for longer content — messages, descriptions, notes. Usually resizable.

A small square that can be checked or unchecked. Used when multiple selections from a list are allowed.

A small circle that selects one option from a group. Unlike checkboxes, only one radio button in a group can be selected at a time.

A form control that looks like a dropdown — click to reveal options, pick one. More native-feeling than a custom dropdown on some platforms.

The rules that check user input before submission — is the email valid? Is the field empty? Are the passwords matching?

The light gray text inside an input field that disappears when the user starts typing. Provides a hint about what to enter.

The text above or beside a form field that describes what information belongs there. Crucial for accessibility.

A small, temporary notification that slides in (usually bottom or top corner), displays a message, and auto-dismisses after a few seconds.

A prominent, usually colored bar across the top of a page or section communicating something important — errors, warnings, or announcements.

A small colored dot or label attached to another element — often showing a count (notifications: 3) or status (New, Beta, Pro).

A horizontal bar that fills from left to right, showing how far along a process is — file upload, onboarding steps, loading.

A rotating circular animation indicating that something is loading. Simple but universal.

Placeholder shapes (gray rectangles and circles) that mimic the layout of content while it loads. Feels faster than a spinner because the user sees the structure immediately.

A small circular image representing a user — usually their profile photo or their initials if no photo is available.

How thick or thin the characters are. Ranges from 100 (thin) to 900 (black/extra-bold). Regular is 400, bold is 700.

The space between individual letters. Wider tracking gives text an elegant, editorial feel. Tight tracking feels dense and compact.

The vertical space between lines of text. More leading = more breathing room between lines. Too little = text looks cramped.

Foreground = the color of text and icons. Background = the color behind them. In design systems, these are semantic tokens, not hardcoded colors.

A secondary brand color used for highlights, links, active states, and visual emphasis. Not the primary color — it's the color that makes things pop.

How rounded the corners of an element are. 0 = sharp square corners. High values = pill-shaped. Affects the feel — sharp = modern/brutalist, rounded = friendly/soft.

A simulated drop shadow beneath an element, creating the illusion of depth. Subtle shadows = modern and clean. Heavy shadows = 2010s skeuomorphism.

How transparent an element is. 1 = fully visible. 0 = invisible. 0.5 = 50% see-through. Used for overlays, disabled states, and layered effects.

Responsive = the design adapts to different screen sizes. Breakpoints = the specific widths where the layout changes (e.g., 768px for tablets, 1024px for desktop).