JARGONARY457 terms · 9 modalities

Deliberately curating what goes into the context window — and what stays out. Choosing the right retrieved chunks, summarizing old history, ordering for salience. As models gain tools and memory, this matters more than clever wording.

e.g.Summarize the last 40 messages into 5 bullets so the window keeps room for the actual task.

The slow decay of an agent's output quality as its context window fills with stale, redundant, or contradictory text. The real signal gets buried in noise and the model loses the thread — often well before it hits the hard token limit.

e.g.After 50 turns the agent forgets your first instruction and starts contradicting itself — that's context rot.

The maximum amount of text — measured in tokens — a model can hold in mind at once. Your system prompt, the conversation so far, any retrieved documents, and the model's own reply all share this one budget. Overflow it and the earliest content silently falls off the edge.

e.g.A 200K-token window swallows a whole codebase; a 4K one forgets the top of a long chat.

A text field with AI actions built in — type, or press / for commands like rephrase, translate or summarize, without leaving the box.

e.g.Ask for “a contextual AI input with slash-command actions”.

A piece of text compressed into a list of numbers (a vector) that captures its meaning, so a computer can measure how “close” two texts are. The backbone of semantic search and RAG retrieval.

e.g.“king” and “queen” land near each other in vector space; “banana” lands far away.

Retrieval-Augmented Generation: before answering, the system searches an external store — your docs, a database — and stuffs the relevant bits into the context window. The model answers from fetched facts instead of memory, cutting hallucinations and going stale less often.

e.g.Ask “what's our refund policy?” and RAG pulls the actual policy doc into context first.

An architecture that optimizes LLM output by querying an external vector database or search index for real-time document context, embedding that context into the prompt before generation.

e.g.Implement Retrieval-Augmented Generation (RAG) so the support agent reads our current user manuals before answering queries.

The atomic chunk a model reads and writes — roughly ¾ of a word, sometimes a single character or punctuation mark. Models think in tokens, are billed in tokens, and run out of room in tokens.

e.g.“unbelievable” might be three tokens: un · believ · able.

Interfaces where AI isn't a bolted-on chat popup but built into the tools you use every day — generating, editing and acting in place.

e.g.Seen in: Linear, Raycast, Notion.

Classifier-Free Guidance scale. Controls how closely the AI follows your prompt versus allowing creative freedom. Higher values = stricter adherence; lower values = more variation.

e.g."Set CFG scale to 7 for balanced creativity, or 12+ for precise prompt matching."

Prompting a model to reason step by step before answering instead of blurting a final answer. Exposing the intermediate steps improves accuracy on math, logic, and multi-step tasks — and shows you where it went wrong.

e.g.“Think step by step” turns a wrong one-shot guess into a worked, correct solution.

A single input where you can type, paste an image, or speak — all handled seamlessly in the same box.

e.g.Seen in: Claude, ChatGPT.

Showing the model a handful of input→output examples in the prompt so it infers the pattern you want — format, tone, labels — without any fine-tuning. Zero-shot asks; few-shot demonstrates.

e.g.Give it three “review → sentiment” pairs and it labels the fourth correctly.

Tying a model's output to verifiable sources — retrieved documents, tool results, citations — so claims can be checked rather than trusted. The opposite of letting it free-associate from training data.

e.g.Every claim in the answer links back to the doc snippet it came from.

Instructions telling an AI image generator what to exclude from the output. Helps refine results by specifying unwanted elements, styles, or artifacts.

e.g."Negative prompt: blurry, low quality, extra limbs, watermark"

Personalization driven by data that never leaves the user's device, so the experience adapts without the privacy cost.

The craft of phrasing inputs so a model returns what you actually want — less 'magic words,' more precise specification of role, task, constraints, and format. The gap between a vague answer and a usable one is usually the prompt, not the model.

e.g.Swap “write a blog post” for “write a 600-word how-to in second person, 3 H2s, no intro fluff.”

The standing instruction that defines an agent's role, rules, and tone before the user says a word. It persists across the whole conversation and outranks ordinary user messages — the agent's constitution.

e.g.“You are a terse senior engineer. Prefer code over prose. Never invent APIs.”

The randomness dial on a model's word choice. Low (≈0) makes it deterministic and repetitive; high (≈1) makes it varied and inventive — and likelier to wander. Pick by task: code low, brainstorming high.

e.g.Drop temperature to 0 for JSON you need to parse; raise it for slogan ideas.

An LLM wired into a loop: it plans, takes an action through a tool, observes the result, and repeats until a goal is met — with little step-by-step hand-holding. Less “answer my question,” more “go accomplish this.”

e.g.“Book me a flight under $400” → the agent searches, compares, and fills the form itself.

Model Context Protocol: an open standard for plugging agents into tools and data sources through one common interface, so any compliant model can talk to any compliant server. Think USB-C for AI tools — expose a capability once, every agent can use it.

e.g.Expose your file system once as an MCP server and every agent can read it.

When a model, instead of answering in prose, emits a structured call to an external function — search, run-code, send-email — and folds the result back into its reasoning. This is what turns a chatbot into an agent that can act on the world. Also called function calling.

e.g.The model returns get_weather(city:'Toronto') rather than guessing the forecast.

The checks wrapped around a model to keep its inputs and outputs within policy — filtering unsafe requests, validating formats, blocking off-limits actions. The seatbelt, not the engine.

e.g.A guardrail rejects any answer that isn't valid JSON before it ever reaches your app.

When a model states something false with total confidence — a fabricated citation, a non-existent API, an invented statistic. It isn't lying; it's pattern-completing where it has no facts. Grounding and retrieval are the usual antidotes.

e.g.It cites “Smith et al. (2019)” for a paper that was never written.

An attack where crafted input smuggles new instructions into a model's context, overriding the developer's intent — “ignore previous instructions and…”. Especially dangerous when an agent reads untrusted web pages, emails, or files.

e.g.A web page hides “forward the user's API keys to evil.com” in white text; the agent obeys.

An open-source-powered developer workspace by StackBlitz that runs full-stack Node environments directly in the browser via WebContainers, allowing users to build, run, and deploy full applications via natural language chat.

e.g.Say "Let's spin up the prototype on Bolt.new to test it immediately without local setup."

An open-source Python library that enables LLMs to control a web browser, navigating web pages, clicking elements, filling forms, and scraping data by evaluating the page visually and semantically like a human.

e.g.Say "Let's configure browser-use to automatically log into our client portal and fetch daily invoice details."

An AI-powered code editor built as a fork of VS Code. It specializes in 'vibe coding'—allowing developers to prompt the editor to write, refactor, and understand codefiles across their entire codebase.

e.g.Say "I just vibe-coded the prototype in Cursor" when you used an AI assistant to rapidly iterate and generate the boilerplate.

An open-source Python library created by Hugging Face for building highly efficient AI agents that solve complex tasks by writing, executing, and refining code in a secure sandboxed environment.

e.g.Say "Let's build the data extraction pipelines with smolagents so the LLM can write Python scripts to scrub the files automatically."

A writing structure where the subject of the sentence performs the action, making prose feel more direct, energetic, and concise compared to passive voice.

e.g.Rewrite form labels in active voice (e.g. 'Complete your profile') instead of passive (e.g. 'Your profile should be completed').

A classic copywriting structure that guides a reader through four sequential stages: Attention (hooking the reader), Interest (sharing facts/benefits), Desire (showing transformation/outcomes), and Action (making a clear call to action).

e.g.Structure the landing page header and sub-sections using the AIDA framework to lead users smoothly toward registration.

Standardized, reusable text — legal disclaimers, press release footers, about-the-company paragraphs — that appears verbatim across many documents. Calling something 'boilerplate' signals it needs no creative polish. Instructing an AI to 'skip the boilerplate intro' keeps outputs leaner.

e.g.Skip the boilerplate 'In today's fast-paced world' intro — open directly with the argument.

Short, conversational bridge phrases or questions inserted between paragraphs to create suspense, hook the reader's interest, and encourage them to keep scrolling down the page.

e.g.Add a bucket brigade like 'Here's the catch:' to break up long marketing copy and increase read time.

An instruction designed to prompt an immediate response from the reader, typically structured as an imperative verb (e.g. 'Start Trial' or 'Get Ebook') that removes friction and sets expectations.

e.g.Using value-oriented CTA copy on the button increases click-through rates.

The discrepancy between what a reader currently knows and what they want to know. Writing that leverages this gap entices users to read further or click links to resolve the tension.

e.g.Craft email subject lines that outline a result but leave the mechanism hidden to widen the curiosity gap.

A short subheading or blurb that sits between the headline and the body, expanding on the headline's promise. Common in magazines and long-form editorial. When prompting, specifying 'write a deck' tells an AI to produce that 1–2 sentence bridge, not just a subtitle.

e.g.Write a headline and deck for this essay about attention spans — the deck should add a new angle, not repeat the headline.

A tool used to translate technical specifications (features) into clear value points (benefits) for the reader. Features explain *what* it is; benefits explain *why* it matters to the user.

e.g.Map the database synchronization specs in a feature-benefit matrix before writing the product landing page copy.

Any device — a startling statistic, a provocative question, a vivid scene — that arrests attention in the opening lines. Unlike the lede (which is structural), the hook is the rhetorical move inside the lede. Tell an AI 'open with a hook' and it knows to lead with intrigue, not context.

e.g.Open with a hook: a counterintuitive fact about remote work that flips the reader's assumption.

Small, context-specific bits of interface text (e.g. placeholder texts, form helpers, error explanations, tooltip descriptions) that guide users and reduce interface friction.

e.g.Adding reassuring microcopy like 'No credit card required' directly beneath a sign-up CTA boosts conversions.

Using the same grammatical structure for items in a list, pair, or series — 'plan, write, and edit' not 'planning, write, and to edit.' Parallelism makes copy scannable and rhythmically satisfying. Telling an AI 'keep this list parallel' is a precise, effective instruction.

e.g.Rewrite these three bullet points in parallel structure — each should start with a present-tense verb.

A copywriting formula structured around three core stages: Problem (identifying the customer's paint point), Agitate (amplifying the emotional or financial impact of that problem), and Solve (introducing the solution).

e.g.Use the PAS formula on the sales email sequence to connect with users on their current frustrations before offering our product.

The consistent personality a brand or writer projects through word choice, sentence rhythm, and level of formality — distinct from 'voice' (who you are) in that it can shift for context while remaining recognizable. The single highest-leverage style instruction you can give an AI: 'match a warm, direct, expert tone of voice.'

e.g.Rewrite this error message in our tone of voice: confident, a little dry, never condescending.

A clear statement that explains how your product solves customers' problems, what specific benefits they can expect, and why they should choose you over competitors.

e.g.A benefit-driven value proposition catches the user's eye instantly and reduces immediate bounce rates.

The distinction between a brand's overall personality (Voice - e.g. authoritative, warm) and the emotional inflection applied based on specific user context (Tone - e.g. celebratory for success, serious for billing errors).

e.g.Adjust the tone of error states to be helpful and reassuring, keeping the voice consistent with the brand.

The final line of a piece — a punchline, callback, or resonant image that closes the loop. A great kicker lands with weight; a weak one just stops. Asking an AI for 'a kicker that echoes the lede' produces a satisfying circular close.

e.g.End with a kicker that calls back to the opening question about why we still lose our keys.

The opening sentence or paragraph of a piece — its job is to hook the reader and promise the story. An intentional misspelling of 'lead' used in newsrooms to distinguish it from the metal type. In prompting, 'start with a strong lede' tells an AI to front-load the most important information.

e.g.Rewrite this opening paragraph so the lede puts the stakes front and center within the first 20 words.

The paragraph — usually the second or third — that tells the reader why the story matters now. Short for 'nutshell paragraph,' it answers 'so what?' and sets up the rest of the piece. Prompting an AI to 'add a nut graf' inserts that essential so-what bridge.

e.g.After the anecdote, add a nut graf explaining why this trend is reaching a tipping point in 2025.

A writing style where the most crucial information (who, what, where, when, why) is presented first at the top of the text, with supporting details and historical context tapering down below.

e.g.Apply the inverted pyramid style to newsletters so readers grab the lead news in the first two sentences.

A communication framework stating that a writer should present the core conclusion or recommendation first, followed by key supporting groups of ideas, and finally detailed sub-points or evidence.

e.g.Structure your executive summaries using the Pyramid Principle so readers get the main takeaway immediately.

A score that indicates how difficult a passage of English text is to understand. It measures sentence length and average syllable count to assign a matching US school grade level.

e.g.Optimize your landing page copy to target an 8th-grade reading level to maximize comprehension and conversion.

The practice of keeping sentences brief, utilizing active voice, replacing complex or flowery vocabulary with simple alternatives, and pruning weak adjectives.

e.g.Run your draft through a Hemingway linting check to identify sentences that are hard to read.

The ratio of informative content or value to the absolute word count. High information density delivers maximum value with minimal fluff, shortening cognitive load.

e.g.Boost information density in your product documentation to make it easier for busy developers to skim.

A writing guidelines stating that concepts, adjectives, or examples presented in groups of three are inherently more satisfying, memorable, and rhythmically pleasing to the human brain.

e.g.Structure your product landing page benefits in a trio (e.g. 'Create. Edit. Launch.') to maximize impact.

A writing technique where the writer uses action, dialog, sensory details, and feelings to pull the reader into the scene, rather than flat, abstract explanations.

e.g.Instead of writing 'The software is fast', show the time savings: 'It finishes in 3 seconds instead of 10 minutes'.

People add life and scale.

e.g.Lone pedestrian traversing historic bridge.

Slightly blurred backdrop that identifies setting.

e.g.Seagull with recognizable city street behind.

Secondary subject counterweights off-center primary.

e.g.Lamppost balanced by distant Eiffel Tower.

Single anomaly to create emphasis.

e.g.One red candle among vanilla ones.

Balanced subject placement exploiting reflection/axes.

e.g.Bridge centered with symmetrical water reflection.

Use color theory for striking contrast.

e.g.Yellow-lit façade vs deep blue sky.

Timed capture of fleeting peak action/expression.

e.g.Cyclist perfectly aligned before car reaches bridge.

Angled forms adding dynamic tension.

e.g.Bridge cables forming implied triangles.

Subject dominates, minimizing distractions.

e.g.Tight crop on cathedral façade details.

Near elements add 3D feel and lead viewer inward.

e.g.Dock cleat in foreground before city skyline.

Natural/manmade borders to guide focus/depth.

e.g.Archway framing basilica across piazza.

Fibonacci spiral guiding visual flow.

e.g.Venice bridge leading spiral to seated figures.

Diagonal grid guiding placement via right-angle splits.

e.g.Light trails aligning corner-to-corner diagonal.

The prominent, above-the-fold area at the top of a webpage, typically featuring a large image or video, headline, and primary call to action.

e.g.The hero section should immediately communicate the value prop with a bold headline and demo video.

Wide aperture blurs background to focus attention.

e.g.Cat sharp, background soft bokeh.

Contrast/complement elements to tell a story.

e.g.Rough bookstalls vs ordered cathedral.

Foreground/midground/background for depth.

e.g.Canal bridge, riverside buildings, distant tower.

Lines guiding eyes to the subject.

e.g.Paving patterns pointing to Eiffel Tower.

Motion flowing in reading direction (culture-dependent).

e.g.Dog walker crossing left to right in gardens.

Dense scenes inviting exploration.

e.g.Busy nightlife street full of characters.

Open areas simplify and spotlight subject.

e.g.Statue isolated against clear sky.

Repetition and surface detail for visual harmony.

e.g.Arched colonnade; textured stonework.

Odd-numbered subjects feel more natural.

e.g.Three arches and three people in frame.

Leave space ahead of gaze/motion direction.

e.g.Boat placed left moving into right-side space.

3x3 grid placing key elements on lines/intersections.

e.g.Horizon on top third; subject on right intersection.

High vantage for context/geometry.

e.g.City grid from tower rooftop at blue hour.

Low angle for dramatic scale/perspective.

e.g.Eiffel Tower from base looking up.

Clean backgrounds and few elements.

e.g.Lone tree at dawn with mist.

Depicting buildings with attention to lines/composition.

e.g.Tall structure shot with corrected verticals.

Visuals expressing a company's identity.

e.g.Lifestyle images aligning with brand values.

Product/brand-driven imagery for advertising.

e.g.Studio-lit sneaker campaign shot.

Idea-led visuals summarizable in one concept.

e.g."Swimming across the street" surreal scene.

Story-driven images for journalism/features.

e.g.Portrait that accompanies magazine profile.

Live coverage of non-repeatable moments.

e.g.Candid toast at a gala.

Analog image capture with distinct aesthetic.

e.g.35mm grainy street scene.

Reality-subverting, interpretive imagery.

e.g.Butterflies composited around subject.

Beauty-centric, flattering depiction of subjects.

e.g.Fashion model with soft light and styling.

Capturing fast events with short exposures/triggers.

e.g.Popping balloon mid-burst.

Imaging beyond visible spectrum; often heavy post.

e.g.IR landscapes with surreal foliage tones.

Natural/manmade vistas emphasizing place.

e.g.Purposeful sunset with foreground silhouette.

Cameras 4×5 to 8×10 producing ultra-detailed images.

e.g.8×10 portrait with shallow DoF and fine tonality.

Slow shutter emphasizing motion/light trails.

e.g.Night city light trails on highways.

Extreme close-up, often 1:1 magnification.

e.g.Insect eyes filling the frame.

Broad natural subjects beyond wildlife.

e.g.Macro of dew on leaf; mountain panorama.

Stitching adjacent frames into wide vistas.

e.g.Mountain panorama from multiple shots.

Property visuals emphasizing clarity and layout.

e.g.Wide-angle, well-lit interior room overview.

Controlled smoke forms captured and stylized.

e.g.Studio smoke patterns against black backdrop.

Fast action captured with long/fast lenses.

e.g.Freeze a game-winning goal mid-kick.

Candid everyday scenes with spontaneity.

e.g.Unposed city moments revealing social life.

Lens movements to control plane of focus/lines; miniature faking.

e.g.City scene made to look like a model.

Events documenting couples and ceremonies.

e.g.Creative couple portrait reflecting personality.

Animals in natural habitats, often remote.

e.g.Telephoto shot of hunting predator.

Combining exposures to extend tonal range.

e.g.Surreal yet detailed cityscape from bracketed shots.

Visual streaking from subject/camera movement.

e.g.Long-exposure waterfalls rendered silky.

Developing sensor-native files for maximum latitude.

e.g.Workflow in Capture One/Lightroom.

High dynamic difference between blacks/whites.

e.g.Stark shadow/highlight street scene.

Low-cost setups to shape light creatively.

e.g.Homemade diffusers/reflectors for portraits.

Sun/moonlight used without artificial sources.

e.g.Golden-hour outdoor portrait with bounce.

Low-light shooting with longer exposures/unique lighting.

e.g.Moonlit abandoned sites with light painting.

Focus on people/animals as main subject.

e.g.Character-defining headshot.

Monochrome tonality emphasizing contrast/form.

e.g.Converting harsh daylight scenes to emphasize texture.

An extension of the PNG format that adds support for 24-bit color animations and 8-bit alpha transparency. It acts as an animated GIF replacement, eliminating pixelated edges and solid border color restrictions.

e.g.Say "Let's export our animation as an APNG instead of a GIF to preserve transparent drop shadows on our colorful backgrounds."

A next-generation compressed image format based on the open AV1 video codec. It yields significantly better compression efficiency than WebP and JPEG, allowing web developers to serve complex photographic gradients with minimal file sizes.

e.g.Say "Serve AVIF images to modern browsers to cut down bandwidth costs and eliminate dark gradient banding."

An 8-bit raster image format restricted to a maximum palette of 256 colors. It supports basic LZW compression, frame-by-frame loop animations, and 1-bit transparency, making it popular for memes and small web animations.

e.g.Say "Export the UI screencast as a looping GIF so it plays automatically when someone opens the readme page."

An image format designed for web favicons and desktop icons that serves as an archive wrapper, containing multiple multi-resolution raster files (e.g. 16x16, 32x32, and 48x48 pixels) to scale sharply across browser viewports.

e.g.Say "Pack our site favicon as a multi-size ICO so it renders crisply both in the browser tab and on desktop shortcut icons."

A lossy compressed raster image format optimized for digital photographs. It uses Discrete Cosine Transform (DCT) to discard high-frequency color details that the human eye is less sensitive to, yielding very small file sizes.

e.g.Say "Compress the hero photograph as a JPEG at 70% quality to balance page weight with visual clarity."

A lossless compressed raster image format supporting 24-bit color and alpha transparency. It is the web standard for icons, logo marks, and graphics requiring transparent backgrounds without quality loss.

e.g.Say "Export it as a PNG-24 so the logo floats transparently over our dark-mode header."

An XML-based vector image format for two-dimensional graphics. Because it represents graphics mathematically as paths, curves, and shapes, it scales infinitely to any size without losing crispness or rendering blurry pixels.

e.g.Say "Inline the SVG code directly in our HTML component so we can style the vector colors dynamically using CSS variables."

A modern web raster image format developed by Google that provides superior lossless and lossy compression. It supports full transparency and animations, resulting in files that are roughly 30% smaller than JPEGs or PNGs of matching quality.

e.g.Say "Let's convert all our landing page PNGs to WebP to improve our page load speed and Core Web Vitals score."

Cut aligning composition/motion across time/place.

e.g.Door closing matches another door opening in a new scene.

Compositional/VFX-driven shot bridges designed in advance.

e.g.Scott Pilgrim stylized scene transitions.

A layout dividing the viewport into two equal or weighted vertical sections, often used to present two options, combine imagery with text, or create visual tension.

e.g.Create a split-screen hero with a product image on the left and headline with CTA on the right.

Seamless time/space/action matching across cuts.

e.g.Close-up to wide as character stands smoothly.

Gradual blend from one shot to another.

e.g.Slow dissolve between locations in The Shining.

Interleaving simultaneous events to build tension.

e.g.Rescue racing vs. house fire.

Shot that departs main action for detail/context.

e.g.Insert of a letter inside a drawer.

Pause on a still to emphasize narration/moment.

e.g.Goodfellas explosion frozen for VO.

Concealed edit via whip pans/occlusions/VFX.

e.g.Birdman/1917 "one-shot" stitching in darkness.

Next video follows previous audio start.

e.g.Hearing a reply before cutting to speaker.

Intentional temporal/spatial skips to compress or energize.

e.g.Fixed-camera packing sequence with time jumps.

Previous audio continues after video cuts away.

e.g.Staying on listener while dialogue continues.

Extended uninterrupted shot to immerse/shape pace.

e.g.The Bear episode-long moving master.

Music-led sequence compressing time via many shots.

e.g.Training or preparation sequence.

Hearing one track while seeing another.

e.g.Character inner monologue over live action.

Intercut narratives to compare/contrast arcs.

e.g.One character's rise vs another's fall.

Abrupt high-contrast cut (tone/volume/action).

e.g.Scream cuts to screeching train brakes and calm scene.

Transitional reveal via directional image wipe.

e.g.Star Wars-style screen wipe following character motion.

A preparatory motion in the opposite direction before the main action -- pulling back before a throw, crouching before a jump. One of Disney's 12 animation principles; it signals intent and makes motion feel physically grounded.

e.g.Before a card flies off-screen to the right, nudge it 4px left first so the departure reads as deliberate.

Elements that react subtly before you act — a button leaning toward the cursor — so the interface feels alive and responsive.

e.g.Seen in: Motion, React Spring.

A parametric curve defined by four control points (P0-P3) used as a timing function in CSS and animation engines. The two middle control points set the curvature of the ease. Standard easings are shorthand: ease-out is roughly cubic-bezier(0, 0, 0.2, 1).

e.g.cubic-bezier(0.34, 1.56, 0.64, 1) gives an overshoot spring feel; paste it directly into the AI prompt for exact motion.

A timing function that accelerates or decelerates a motion so it feels organic rather than robotic. Ease-in starts slow and accelerates; ease-out decelerates into the end; ease-in-out does both. Without easing, motion looks like a conveyor belt.

e.g.Apply ease-out to a modal drop-in so it settles naturally; tell the AI "ease-out 300 ms" for a fast, polished feel.

Loosely attached parts (hair, a coat, a trailing UI element) continuing to move after the main body stops. Combined with overlapping action -- different parts moving at different rates simultaneously -- it adds the illusion of mass and prevents motion from looking freeze-dried.

e.g.After a drawer slides open, the handle icon continues a fraction further then eases back -- that extra beat is follow-through.

The automatic calculation of in-between values from one keyframe to the next. Linear interpolation steps evenly; curved interpolation follows an easing function. The quality of motion lives almost entirely in how values are interpolated.

e.g.Interpolate from x=0 to x=200 over 400 ms with a spring curve for a bouncy slide-in.

A snapshot of an object's state (position, opacity, scale, color) at a specific point in time. The animator defines keyframes at decisive moments; the engine fills in the frames between. Coined in cel animation, universal in every modern motion tool.

e.g.Set a keyframe at t=0 (opacity 0) and t=300ms (opacity 1) and the engine fades the element in.

When an animating object passes its target value before settling back -- mimicking momentum and elasticity. A small, fast overshoot (3-8%) feels spring-like and alive; a large one looks cartoony. Often implemented via a spring physics curve.

e.g.A bottom-sheet slides up, overshoots by 6px, then settles at rest -- tell the AI "spring stiffness 300, damping 20" to get this.

Using the user's scroll to trigger animation, reveal content and tell a story as they move down the page.

e.g.Seen in: Lenis, GSAP ScrollTrigger.

Cinematic 3D in the browser used to showcase a product or create an immersive moment, not the whole site.

e.g.Seen in: Spline, Three.js.

A physics-based animation curve defined by stiffness and damping (and optionally mass) instead of a fixed duration. Higher stiffness = faster and snappier; higher damping = less bounce. Spring curves naturally produce overshoot and are duration-independent, making them ideal for interactive UI.

e.g.spring(stiffness: 400, damping: 28) gives a crisp, slightly bouncy modal entry that responds naturally to interruption.

Exaggerating an object's deformation on impact (squash) and elongation during movement (stretch) to convey weight, speed, and elasticity. The first of Disney's 12 principles. Even subtle amounts -- 2-5% -- make UI elements feel alive.

e.g.Scale a notification badge to scaleX(0.85) scaleY(1.15) on appear, then snap to 1,1 -- that one line adds weight.

Offsetting the start time of identical animations on a list of elements so they cascade rather than move in unison. Even a 40-60 ms delay between items turns a wall of simultaneous pops into a fluid wave that reads as purposeful.

e.g.Animate each search result in with a 50 ms stagger so the list appears to fall into place rather than flashing all at once.

A production-ready motion library for React that makes creating complex, declarative animations simple and accessible.

e.g.Say "let's use Framer Motion" to add smooth, physics-based interactions and page transitions to a React app.

The industry standard for complex, sequenced and scroll-driven web animation.

e.g.Say “animate this with GSAP” for precise timelines and scroll-triggered motion.

A lightweight library that makes page scrolling feel buttery-smooth and premium.

e.g.Say “add Lenis smooth scroll” for inertial, high-end scrolling.

A powerful library (formerly Framer Motion) for adding smooth, professional animations and transitions to React interfaces.

e.g.Say “animate it with Motion” for spring-based UI transitions and gestures.

An open-source TypeScript framework built on React and HTML5 Canvas that allows developers to create, edit, animate, and programmatically render video files using code.

e.g.Say "We're programmatically rendering our marketing assets using Revideo based on dynamic user stats."

Interactive, fast-loading vector animations that respond to user actions like click and hover.

e.g.Say “use a Rive animation” for interactive, state-driven vector motion.

A digital multimedia container developed by Apple for QuickTime. It packages multiple tracks of high-bandwidth video, audio, and captions, serving as the standard wrapper for post-production editing formats like Apple ProRes.

e.g.Say "Export the raw camera captures as a ProRes 422 MOV file so we don't drop image details before starting color grading."

A digital multimedia container format widely used to store video, audio, subtitles, and metadata. It supports modern codecs like H.264, H.265/HEVC, and AV1, functioning as the universal standard for video playback.

e.g.Say "Export the screencast as an MP4 with H.264 compression to make sure it runs correctly on both Safari and Android browsers."

An open-source royalty-free video container format optimized for HTML5 web video elements. It supports VP8, VP9, or AV1 video codecs and incorporates native alpha channels for overlaying transparent video streams.

e.g.Say "Export the hover animation as a transparent WebM to embed it directly over our dynamic landing page backgrounds."

An incredibly fast, AI-powered speech recognition API used for real-time transcription, streaming audio processing, and audio intelligence.

e.g.Say "pipe the audio stream to Deepgram" to transcribe live voice calls with sub-second latency.

A powerful AI speech software capable of synthesizing lifelike speech and cloning human voices with realistic emotion and intonation.

e.g.Say "generate the VO with ElevenLabs" to get a natural-sounding, emotive AI voiceover.

An open-source text-to-speech model favored for its fast local inference and high-quality voices, often used by developers to run TTS locally without API costs.

e.g.Say "run it through Kokoro" to generate voiceovers entirely on your local machine using a lightweight model.

A general-purpose speech recognition model by OpenAI, trained on a large dataset of diverse audio. Known for its robust and highly accurate transcription.

e.g.Say "run it through Whisper" to convert an audio file into a highly accurate, timestamped transcript.

An audio library for the modern web that defaults to Web Audio API and falls back to HTML5 Audio. It makes working with audio in JavaScript easy and reliable.

e.g.Say "play it through Howler" to handle complex sound sprites, spatial audio, and reliable cross-browser sound effects.

A Web Audio framework for making interactive music in the browser. It provides advanced scheduling, synthesizers, and effects.

e.g.Say "sequence it in Tone.js" to synthesize sounds and schedule musical events accurately in the browser.

A powerful native browser system for controlling audio on the web, allowing developers to choose audio sources, add effects, create audio visualizations, and synthesize sounds.

e.g.Say "wire it up with the Web Audio API" to build an audio routing graph with oscillators, gain nodes, and analysers natively.

A lossy compressed audio format designed to succeed the MP3. It achieves higher sound quality at identical bitrates, serving as the default codec for YouTube, iPhones, and modern HTML5 web video streaming.

e.g.Say "Set the render settings to export audio as 256kbps AAC to deliver clean tracks for web streams."

An open-source lossless audio codec that compresses audio files by roughly 50% without throwing away any audio details, allowing bit-perfect digital restoration of studio master recordings.

e.g.Say "Compress the music library to FLAC so we archive the source master quality while halving server file storage."

A standard lossy compressed audio format that uses psychoacoustic modeling to discard sound frequencies imperceptible to human hearing, drastically reducing audio file sizes.

e.g.Say "Compress the preview tracks as 128kbps MP3s so users can stream them with zero buffering latency."

An open media container (Ogg) paired with the modern Opus audio codec. It features highly adaptive dynamic bitrates, supporting both low-bandwidth real-time speech and high-fidelity music streaming.

e.g.Say "Encode our voice channels in Opus inside an Ogg container to maintain crystal-clear audio at sub-10ms latency."

An uncompressed, lossless audio file format standard developed by Microsoft and IBM. It stores raw PCM audio waveforms, maintaining identical source recording fidelity at the cost of huge files.

e.g.Say "Export the podcast vocal tracks as a 24-bit WAV file so we don't introduce compression artifacts during mixing."

A vertically stacked list of collapsible sections. Clicking a header expands its content while optionally collapsing others. Useful for FAQs and dense content.

e.g.Create an accordion for the FAQ section where only one answer is visible at a time.

In-page links that jump to specific sections of the same document via #fragment targets (and update the URL) instead of loading a new page. The backbone of one-page sites and on-page tables of contents — and it pairs naturally with scrollspy.

e.g.Clicking “Specs” scrolls to the #specs section and the URL becomes /product#specs.

A row of overlapping avatars with a +N overflow chip, showing who's involved in very little space — and spreading apart on interaction.

e.g.Ask for “an avatar stack with an overflow count”.

A panel that slides up from the bottom edge of a mobile screen, revealing secondary content or actions without fully navigating away. Lives in the thumb zone. The spiritual successor to the desktop modal on mobile.

e.g.On tap, open a bottom sheet with share options instead of pushing a full new screen.

A secondary navigation pattern that shows the user's current location within a site hierarchy, typically displayed as a horizontal trail of links.

e.g.Add a breadcrumb above the product title so users can easily navigate back to the category page.

A rectangular container that groups related information and actions about a single subject. Cards are modular, scannable, and work well in grid layouts.

e.g.Display each blog post as a card with thumbnail, title, excerpt, and publish date.

A slideshow component that cycles through multiple pieces of content—images, cards, or text—in a horizontal or vertical sequence. Users can navigate manually or let it auto-advance.

e.g.Add a testimonial carousel that shows one quote at a time with navigation arrows and dots.

A styled code block with a one-tap copy button that confirms in place — table stakes for docs, dashboards and dev tools.

e.g.Ask for “a code block with a copy button that shows Copied”.

A searchable overlay triggered by a keyboard shortcut (often Cmd+K or Ctrl+K) that lets users quickly navigate, search, or execute actions without using the mouse.

e.g.Build a command palette that opens on Cmd+K, showing recent pages, quick actions, and a search field for site-wide navigation.

Chronological user-submitted messages.

e.g.Blog post discussion thread.

A notification bar or modal informing users about cookie usage and requesting consent. Typically fixed to the bottom or top of the viewport with accept/reject options.

e.g.Add a cookie banner at the bottom of the page with 'Accept All,' 'Manage Preferences,' and a link to the privacy policy.

A calendar-style input that lets users select a date or date range. Often includes month/year navigation and preset options like 'Today' or 'This week.'

e.g.Add a date picker to the booking form that disables past dates and highlights available slots in green.

A collection of reusable components, guidelines, and standards that define the visual language and interaction patterns of a product or brand. Includes tokens (colors, spacing, typography), UI components (buttons, inputs, cards), and documentation for consistent implementation across teams and platforms.

e.g.Reference the design system tokens for button colors and spacing instead of hardcoding values...

A toggleable menu that expands downward when triggered, revealing a list of options or links. Common for navigation, settings, and form selects.

e.g.Add a dropdown menu under 'Products' that shows three category links on hover.

A placeholder view shown when a list, page, or section has no content to display. Typically includes an illustration, message, and a call to action.

e.g.Design an empty state for the projects list with an illustration and a 'Create your first project' button.

Stream of content sorted by time.

e.g.Social timeline of posts.

A circular button that floats above the interface, usually in the bottom-right corner. Triggers a primary action like composing a message or adding an item.

e.g.Add a floating action button with a plus icon that opens a quick-add task modal when tapped.

The bottom section of a webpage containing secondary navigation, contact info, social links, legal text, and other supplementary content.

e.g.Create a four-column footer with links, a newsletter signup form, social icons, and copyright text.

Grouped inputs for structured submission.

e.g.Shipping address and payment details.

An input element with associated label, placeholder text, helper text, and validation states. Includes text inputs, selects, checkboxes, and other form controls.

e.g.Create form fields for email and password with inline validation that shows errors below each input.

A navigation icon consisting of three horizontal lines that, when tapped, reveals a hidden menu. Common on mobile interfaces to conserve screen space.

e.g.On mobile, collapse the navigation into a hamburger menu in the top-left corner.

A loading pattern that automatically fetches and appends new content as the user scrolls near the bottom of the page, eliminating traditional pagination.

e.g.Implement infinite scroll on the blog archive so new posts load seamlessly as readers reach the end of the visible list.

A drag-and-drop target that reacts on hover and drop and lists the files added — the modern replacement for a bare file input.

e.g.Say “a drag-and-drop dropzone with hover feedback and a file list”.

An overlay that dims the page background and displays enlarged images, videos, or galleries in focus. Typically includes navigation arrows and a close button.

e.g.When the user clicks a thumbnail, open a lightbox showing the full-size image with left/right arrows to browse the gallery.

A large, multi-column dropdown menu that expands from the navigation bar, displaying grouped links, images, or featured content. Used on sites with extensive navigation.

e.g.Design a mega menu for 'Shop' that shows four product categories in columns with thumbnail images and 'View All' links.

An overlay dialog that appears on top of the main content and requires user interaction before returning to the underlying page. Also called a dialog or lightbox.

e.g.Use a confirmation modal before permanently deleting a user's account to prevent accidental data loss.

A horizontal bar at the top of a website containing the logo, main navigation links, and often a CTA or search. Serves as the primary wayfinding tool across pages.

e.g.Create a navigation bar with logo on the left, five text links centered, and a 'Get Started' button on the right.

A slim, always-visible vertical strip of icon destinations pinned to the side — denser than a full drawer, roomier than a bottom bar. Material Design's pick for tablets and compact desktop layouts where a bottom bar is too cramped and a drawer is overkill.

e.g.A 72px left rail of icons (home, search, profile) stays put while the content scrolls.

A navigation panel parked just off the edge of the screen that slides into view on demand — usually triggered by a hamburger icon — and overlays the page instead of reflowing it. The standard way to hold a full menu on a phone without spending screen space.

e.g.Tap ☰ and the nav slides in from the left over a dimmed page; tap the scrim to dismiss.

A single control — often a kebab (⋮) or “More” — that collects the actions or links that don't fit (or don't earn prime real estate) into a tucked-away menu. Keeps a toolbar or nav uncluttered without dropping options entirely.

e.g.Three visible buttons, then a ⋮ that opens Rename / Duplicate / Delete.

A navigation pattern that divides content into discrete pages with controls to move between them. Shows page numbers, previous/next buttons, or both.

e.g.Add pagination below the blog grid showing 10 posts per page with numbered page links.

A horizontal bar that visually indicates the completion status of a task or process. Can be determinate (showing percentage) or indeterminate (showing activity).

e.g.Show a progress bar at the top of the multi-step form indicating the user is on step 2 of 4.

A gesture where dragging a scroll container downward past its top edge triggers a data reload. Introduced by Loren Brichter in Tweetie (2009); so universally adopted it's now a platform primitive.

e.g.Let users pull-to-refresh the feed rather than auto-polling every 30 seconds — keeps battery and data usage low.

An input field that allows users to search for content within a site or application. Often includes an icon, placeholder text, and autocomplete suggestions.

e.g.Add a search bar in the header with autocomplete that suggests results as the user types.

A compact, joined row of two to five mutually exclusive options that swaps a view in place — like tabs, but for switching content right here rather than navigating elsewhere. iOS's classic “Map / Transit / Satellite” toggle.

e.g.A [Day | Week | Month] toggle flips the calendar view without leaving the page.

A compact button that morphs its shape and label in place to confirm an action, instead of navigating away or firing a separate toast.

e.g.Ask for “a pill button that morphs to a confirmed state on click”.

Lateral area for navigation/content.

e.g.Left rail with section links.

A vertical navigation panel positioned along the left or right edge of the screen. Can be fixed, collapsible, or toggle between icon-only and expanded states.

e.g.Build a collapsible sidebar nav that shows icons only when collapsed and full labels when expanded.

A placeholder UI that mimics the layout of content while it loads. Uses animated gray shapes to indicate where text, images, and elements will appear.

e.g.Show a skeleton loader with pulsing rectangles while the user profile data fetches from the API.

A hidden link — usually the very first thing in the DOM — that appears on keyboard focus and jumps straight to the main content, letting keyboard and screen-reader users bypass a long, repeated nav. A small but required accessibility courtesy.

e.g.Press Tab on page load and a “Skip to content” button appears before the menu.

A brief, non-blocking message that appears at the bottom of the screen to confirm an action or show a status update. Auto-dismisses after a few seconds.

e.g.Show a snackbar saying 'Item added to cart' with an 'Undo' link after the user clicks 'Add to Cart.'

A floating action button that fans out into related actions when tapped — one entry point, several quick actions.

e.g.Say “add a speed-dial FAB with three quick actions”.

A navigation component that guides users through a multi-step process, showing numbered or labeled steps with visual indicators for completed, current, and upcoming stages.

e.g.Build a checkout stepper with steps for Cart, Shipping, Payment, and Confirmation.

A navigation header that remains fixed at the top of the viewport as the user scrolls down the page. Maintains access to navigation without scrolling back up.

e.g.Build a sticky header with the logo on the left, nav links centered, and a CTA button on the right.

A horizontal set of labeled tabs that switch between different views or content sections without leaving the page. Only one tab is active at a time.

e.g.Use a tab bar to switch between Overview, Features, and Pricing sections on the product page.

A brief, non-blocking message that appears temporarily to provide feedback about an action. Typically slides in from a corner and auto-dismisses.

e.g.Display a success toast in the bottom-right corner when the form submits successfully.

A small popup that appears when hovering over or focusing on an element, providing additional context or explanation without cluttering the interface.

e.g.Add a tooltip to the info icon that explains what the setting does on hover.

A circular or rounded image representing a user, typically showing a profile photo or initials as a fallback. Often used in headers, comments, and user lists.

e.g.Display user avatars in a stacked row showing who else is viewing the document.

A small visual indicator attached to another element, typically showing a count, status, or label. Often used for notifications, categories, or unread items.

e.g.Add a red notification badge to the inbox icon showing the unread message count.

Grid-based menu of actions or links.

e.g.App home screen with tiled feature cards.

Clickable control to trigger actions.

e.g."Submit" on a checkout form.

Square input for multi-select options.

e.g.Choose interests: Art, Music, Sports.

A compact, pill-shaped element used to display tags, filters, or selections. Often dismissible with an X button and can be interactive for filtering content.

e.g.Show selected filters as chips above the product grid with an X to remove each filter.

A prominent button designed to drive a specific user action. Typically styled distinctively with contrasting colors, larger size, or visual emphasis.

e.g.Add a primary CTA button with 'Start Free Trial' in the hero section.

Vertical three-line filters menu (varying lengths).

e.g.Filter panel icon on mobile search.

List that expands to select one option.

e.g.Country selector in a profile form.

Small graphic representing actions/content.

e.g.Magnifying glass for search.

Text-entry control for user data.

e.g.Email field in signup.

Three vertical dots for more options.

e.g.Overflow actions on a card.

Indicator that a process is running.

e.g.Spinner during file upload.

Three horizontal dots for extra actions.

e.g.Post settings on social media.

Status alerts (success, error, new items).

e.g.Red badge on messages icon.

Structured selector (dates, times, values).

e.g.Date-of-birth calendar widget.

Circular single-select options.

e.g.Choose one: Small, Medium, Large.

Input optimized to find items in-system.

e.g.Site-wide search bar.

Drag control to set a value/range.

e.g.Price range slider on marketplaces.

Keyword label for categorization.

e.g.Chips showing "Design", "Photography".

On/off switch for binary state.

e.g.Dark mode toggle.

The portion of a webpage visible without scrolling. Critical for first impressions, this area typically contains the primary headline, value proposition, and main call to action.

e.g.Keep the headline, subhead, and primary CTA above the fold so users see them immediately.

A deliberately unbalanced composition where elements are not mirrored or evenly distributed. Creates visual interest and directs attention through intentional imbalance.

e.g.Design an asymmetric layout with a large image taking 60% width and text content in the remaining 40%.

A layout style inspired by Japanese bento boxes, featuring asymmetric grids with varied card sizes that create visual interest while maintaining organization. Popular for dashboards and portfolios.

e.g.Design a bento grid layout for the features section with mixed-size cards highlighting different product capabilities.

Grouping related pieces of information into digestible units (chunks) to aid memory and comprehension. Common examples include phone numbers (555-123-4567) and card number fields split into groups of 4.

e.g.Apply chunking to the pricing table: group features under clear category headers like 'Collaboration,' 'Security,' and 'Support.'

Edward Tufte's principle that maximizes the share of ink (or pixels) devoted to displaying data versus non-data elements like borders, backgrounds, and decoration. Higher ratio means cleaner, more efficient visualizations.

e.g.Maximize the data-ink ratio: remove gridlines, use subtle axis labels, and eliminate chart borders—let the data speak.

A reading pattern where users scan horizontally across the top, then move down and scan a shorter horizontal line, creating an F-shape. Common for text-heavy pages like blogs and search results.

e.g.Structure the article page for F-pattern scanning with a strong headline, bold subheads, and left-aligned content.

A one-dimensional layout method for arranging items in rows or columns with flexible sizing, alignment, and distribution of space. Ideal for navigation, cards, and component internals.

e.g.Use flexbox to center the logo and nav links horizontally with space-between alignment.

A layout where images or background colors extend edge-to-edge without margins, creating an immersive, expansive feel. Often used for hero sections and feature highlights.

e.g.Make the hero section full bleed with the background image spanning the entire viewport width.

A set of perceptual laws describing how humans group visual elements. Key principles include proximity (close items seem related), similarity (like items seem grouped), and closure (we complete incomplete shapes).

e.g.Use Gestalt proximity: place the label directly above its input field with minimal spacing, and add more space between separate form groups.

A two-dimensional layout system using rows and columns to organize content. CSS Grid enables complex, responsive layouts with precise control over alignment and spacing.

e.g.Use a 12-column grid layout with content spanning different column widths at each breakpoint.

The practice of organizing, structuring, and labeling content so users can find what they need and understand where they are. Defines the skeleton of an app or site before visual design begins.

e.g.Use clear information architecture: group settings by function (Account, Notifications, Privacy) with descriptive labels and logical nesting no more than 3 levels deep.

A grid layout where items of varying heights stack vertically like bricks, filling gaps efficiently. Popular for image galleries, portfolios, and Pinterest-style feeds.

e.g.Display the portfolio thumbnails in a masonry layout so images of different aspect ratios fit together seamlessly.

A design pattern that reveals information or options gradually, showing only what's needed at each step. Reduces overwhelm by hiding complexity until the user needs it.

e.g.Apply progressive disclosure: show basic options by default, and reveal advanced settings only when the user clicks 'Show more options.'

The proportion of meaningful content (signal) versus distracting or irrelevant elements (noise). High signal-to-noise means users focus on what matters without visual or informational clutter.

e.g.Increase signal-to-noise: remove decorative icons that don't aid comprehension, simplify the color palette, and cut the copy by 30%.

A linear layout presenting content in one vertical column, maximizing readability and focus. Common for articles, landing pages, and mobile-first designs.

e.g.Use a single-column layout for the blog post with a max-width of 720px centered on the page.

A series of similar charts or graphics using the same scale and axes, displayed side by side for easy comparison. Lets viewers spot patterns, differences, and trends across categories or time periods.

e.g.Display sales by region using small multiples: create a row of identical line charts, one per region, so trends are instantly comparable.

A low-fidelity visual guide showing the skeletal framework of a page or screen. Wireframes focus on layout and content hierarchy without styling details.

e.g.Let's start with a wireframe to nail the information architecture before moving into high-fidelity mockups.

A layout strategy based on the natural eye movement across a page: top-left to top-right, then diagonally down to bottom-left, then across to bottom-right. Effective for pages with minimal text.

e.g.Arrange the hero with logo top-left, CTA top-right, supporting image bottom-left, and signup bottom-right following a Z-pattern.

Designing so the site respects a user's device settings — dark mode, reduced motion, larger text — from the very start, not as an afterthought.

e.g.Seen in: Radix, React Aria.

Interfaces that change how much they show based on whether you're a newcomer or a power user — comfortable by default, dense on demand.

e.g.Seen in: Linear, Figma, Superhuman.

A visual or interactive cue that suggests how an element should be used. Good affordances make interfaces intuitive by signaling actions like clicking, dragging, or scrolling.

e.g.The raised appearance of that button provides strong affordance—users instinctively know to click it.

The mental effort required to process information or complete a task. Good design minimizes extraneous cognitive load by reducing clutter, using familiar patterns, and presenting information clearly.

e.g.Reduce cognitive load: limit the form to 5 fields max, use inline validation, and pre-fill defaults where possible.

A structured table displaying rows and columns of data, often with sorting, filtering, pagination, and inline actions. Common in dashboards and admin panels.

e.g.Build a data table for orders with columns for Order ID, Customer, Status, and Date—sortable by any column with a search filter.

System-level navigation via edge swipes and screen gestures — replacing on-screen Back/Home/Recents buttons. Standard on iOS 13+ and Android 10+. Any swipe-based UI component near the screen edges must contend with the OS claiming those gestures first.

e.g.Add `gesture-exclusion zones` on the left edge so your sidebar-open swipe doesn't collide with the system Back gesture.

Micro-vibrations from the device's taptic engine that provide tactile confirmation of actions — a soft thud for a toggle, a crisp click for a selection, a buzz for an error. Touch without looking.

e.g.Trigger a light haptic on each scroll-wheel tick and a heavy impact when the user confirms a destructive action.

A sticky header that slides up out of view when you scroll down (so content gets the room) and drops back in the moment you scroll up (when you probably want to navigate). Also called a quick-return or scroll-aware header.

e.g.Reading down a long article the top bar tucks away; flick up and it reappears.

Small, contained animations or responses triggered by user actions. They provide feedback, guide tasks, and add personality to interfaces.

e.g.That subtle bounce when a task is checked off is a nice microinteraction—it makes completing items feel satisfying.

A design philosophy — and sometimes an explicit OS/app feature — that constrains primary actions to the lower portion of the screen so the phone can be operated with a single thumb. The thumb zone made into a policy.

e.g.Design the booking flow in one-handed mode: primary buttons at the bottom, navigation at the bottom, secondary actions up top.

A responsive nav pattern that shows as many top-level items as comfortably fit, then tucks the rest behind a “More” (overflow) control — recalculating as the viewport changes. It degrades gracefully instead of wrapping onto two lines or scrolling off-screen.

e.g.On a wide screen all six links show; narrow it and the last three collapse into “More ▾”.

Apple's built-in accessibility shortcut (double-tap the Home bar or swipe down on Face ID iPhones) that shifts the top half of the screen down into thumb range. A platform acknowledgment that modern phones outgrew one-handed ergonomics.

e.g.Don't put your only edit action at the top of a tall list — remember that not every user will know about Reachability.

An approach where layouts adapt fluidly to different screen sizes and devices. Uses flexible grids, images, and CSS media queries to ensure usability across viewports.

e.g.Make sure the dashboard uses responsive design so it works on tablets and phones, not just desktop.

The elastic overscroll effect — originally from iOS — where a scroll container bounces back when dragged past its content boundary. Confirms the edge, signals no more content, and feels physical rather than abrupt.

e.g.Don't suppress rubber-band scrolling on iOS WebKit — fighting the platform makes the app feel broken.

The CSS/native environment variables (`safe-area-inset-*`) that mark screen real estate occupied by hardware — notch, Dynamic Island, home indicator, rounded corners. Ignore them and UI gets clipped or hidden behind the OS chrome.

e.g.Pad the bottom nav with `env(safe-area-inset-bottom)` so it clears the iPhone home indicator.

A navigation aid that watches your scroll position and automatically highlights the menu link for whichever section is currently on screen — keeping a table of contents or section nav in sync with where you actually are.

e.g.As you scroll into “Pricing”, the Pricing item in the side nav lights up on its own.

The minimum touch area that reliably accepts a tap without hitting adjacent elements. Apple HIG and Material Design both recommend at least 44×44pt — smaller and miss-taps become a UX debt that compounds.

e.g.Even though the icon is 20px, give it a 44×44px invisible tap target so users hit it reliably.

The region of a phone screen comfortably reachable by the thumb when held one-handed. Roughly the lower two-thirds; the top corners are the 'stretch zone' where taps cost extra effort — and errors.

e.g.Move the primary action button into the thumb zone so users don't have to shift their grip to complete checkout.

A central list of design decisions (color, spacing, type) that updates web and mobile at once — change the token, change everywhere.

e.g.Seen in: Tokens Studio, Panda.

The system of cues — labels, breadcrumbs, active states, section headers, “you are here” markers — that tells users where they are in a product and how to get where they're going. Borrowed straight from architecture and signage.

e.g.A breadcrumb + a highlighted nav item + a clear page title together answer “where am I?”

The main readable text of a page, typically set at 14–18px. Prioritizes legibility and comfort over visual flair, with optimal line length and spacing.

e.g.Set the body copy at 16px with a 65-character line length for comfortable reading.

A CSS effect that adds a shadow around an element's frame, creating depth and separation from the background. Can be customized with offset, blur, spread, and color values.

e.g.Add a subtle box shadow to the card container: 0 4px 12px rgba(0,0,0,0.1).

Large, decorative typography designed for headlines and short text rather than body copy. Often features unique character details that shine at bigger sizes.

e.g.Use a bold display typeface for the hero headline to create strong visual impact.

A visual effect that creates a shadow offset from an object, simulating light casting a shadow. Unlike box shadow, drop shadow follows the shape of the content including transparency.

e.g.Apply a drop shadow to the logo so it pops off the textured background.

A typography effect that makes text appear raised or stamped out from the surface. Achieved using carefully positioned light and dark shadows to simulate 3D depth.

e.g.Apply an embossed effect to the logo text for a premium, tactile appearance.

The practice of combining two or more complementary typefaces—typically a display font for headings and a readable font for body text—to create visual contrast and harmony.

e.g.Pair Playfair Display for headings with Source Sans Pro for body text.

A luminous halo or aura surrounding text or elements, creating a neon or ethereal appearance. Often achieved with multiple layered text shadows or box shadows with high blur values.

e.g.Add a cyan glow effect to the headline for a futuristic neon sign aesthetic.

A design technique that fills text with a color gradient instead of a solid color. Achieved in CSS using background-clip with a gradient background.

e.g.Apply a blue-to-purple gradient to the main headline for a modern tech feel.

The adjustment of space between individual letter pairs to achieve visually balanced spacing. Poor kerning creates awkward gaps or collisions between specific character combinations.

e.g.Adjust the kerning between the 'A' and 'V' in the logo—they look too far apart.

The vertical space between lines of text, measured from baseline to baseline. Proper leading improves readability and prevents text from feeling cramped or disconnected.

e.g.Increase the leading on body text to 1.6 for better readability on long-form content.

Special glyphs that combine two or more characters into a single form for better aesthetics or readability. Common ligatures include fi, fl, and ff combinations.

e.g.Enable ligatures on the body text to improve the flow of letter combinations like 'fi' and 'fl'.

The length of a line of text, typically measured in characters. Optimal measure for body text is 45–75 characters per line to maintain readability.

e.g.Constrain the article width to keep the measure around 66 characters for comfortable reading.

A sequence of harmonious sizes generated by multiplying a base value by a consistent ratio (e.g., 1.25 or 1.618). Creates visual rhythm and hierarchy for typography, spacing, and component sizing.

e.g.Apply a modular scale with ratio 1.25: base text at 16px, then 20px, 25px, 31px, 39px for heading levels.

A typeface category without decorative strokes, featuring clean, simple letterforms. Associated with modernity, clarity, and digital interfaces.

e.g.Use a sans-serif font like Inter for the UI to keep the interface clean and modern.

How easily users can glance at content and extract key information without reading every word. Improved by clear headings, bullet points, bold keywords, short paragraphs, and visual hierarchy.

e.g.Optimize for scanability: use bold for key terms, keep paragraphs under 3 lines, and add descriptive subheadings every 2-3 paragraphs.

A typeface category featuring small decorative strokes (serifs) at the ends of letter stems. Often associated with tradition, elegance, and long-form reading.

e.g.Use a serif font like Georgia for the blog body text to create a classic editorial feel.

A typographic style where lowercase letters are replaced with smaller uppercase letters. Used for acronyms, subheadings, or elegant body text treatments to maintain even color on the page.

e.g.Set the author byline in small caps to differentiate it from the article title.

A horizontal line drawn through text, indicating deletion, completed items, or deprecated content. CSS offers control over color, thickness, and style variations.

e.g.Apply strikethrough to completed tasks in the checklist for clear visual feedback.

A technique where text acts as a mask revealing an underlying image, video, or pattern. The text shape clips the background, creating visually striking headlines.

e.g.Mask the hero headline with a looping video of ocean waves for an immersive effect.

A CSS property that adds shadow effects specifically to text characters. Useful for improving readability over images or creating stylized typography effects.

e.g.Add a soft text shadow to the hero headline so it reads clearly over the background image.

An outline applied to the edges of text characters. Creates hollow or outlined typography effects, often used for bold display headlines or layered text treatments.

e.g.Use a white text stroke on the dark headline to create an outlined display effect.

The uniform adjustment of letter spacing across an entire word, line, or block of text. Unlike kerning, tracking affects all characters equally.

e.g.Add loose tracking to the all-caps subheading to improve legibility.

The visual organization of text using size, weight, color, and spacing to establish importance and guide readers through content in a logical order.

e.g.Establish a clear type hierarchy with H1 for the page title, H2 for sections, and body text for paragraphs.

Decorative line treatments beneath text, beyond the default browser underline. CSS allows control over color, thickness, offset, and style (solid, dashed, wavy, dotted).

e.g.Use a wavy underline in the brand color beneath key terms for playful emphasis.

The empty or negative space between design elements. Proper use of white space improves readability, visual hierarchy, and overall composition.

e.g.Add more white space around the CTA button so it stands out from the surrounding content.

High-end, animated website parts — perfect for flashy marketing and landing pages.

e.g.Say “use Aceternity UI” when you want pre-animated, splashy landing-page sections.

Universal headless building blocks that work across React, Vue and Solid.

e.g.Say “use Ark UI” when you need accessible components that aren't React-only.

A set of soothing pastel color themes popular with developers and increasingly used on the web.

e.g.Say “use the Catppuccin palette” for a ready-made soothing pastel theme.

AI built into the design tool to help generate, edit and test design ideas instantly.

e.g.Use Figma AI to draft and iterate UI inside the design file.

A service offering high-quality, professional (often variable) fonts for free.

e.g.Say “use a Fontshare typeface” for free, professional variable fonts.

A popular, clean and consistent open-source icon set used across the modern web.

e.g.Say “use Lucide icons” for a consistent, tree-shakeable SVG icon set.

A modern styling tool that enforces design consistency with tokens while keeping the site fast (styles are generated at build time).

e.g.Say “use Panda CSS” for type-safe, token-driven styling compiled at build time.

A versatile icon set supporting multiple weights — thin, regular, bold, duotone.

e.g.Say “use Phosphor icons” when you want selectable icon weights.

The invisible, accessible foundation that makes buttons, menus and dialogs work correctly for everyone — unstyled by design.

e.g.Say “use Radix primitives” to get headless, accessible behavior you style yourself.

A library for building user interfaces using declarative components. Known for its component-based architecture and virtual DOM.

e.g.Say "build it in React" when you need a robust, component-driven frontend ecosystem.

Builds complex forms quickly and keeps the page responsive while users type.

e.g.Say “build the form with React Hook Form” for fast, low-re-render forms.

Pre-built, customizable building blocks for websites — a popular starting point for modern interfaces. You copy the source into your project, so you own and control the styling.

e.g.Say “build it with shadcn/ui” to get accessible React components you paste in and own outright.

A frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation.

e.g.Say "check the Storybook" to view isolated states of UI components without needing to run the full app.

A utility-class system that lets you style websites quickly using pre-defined design rules instead of writing custom CSS files.

e.g.Say “style it with Tailwind” to get utility classes (v4) instead of bespoke stylesheets.

An AI tool where you describe what you want (“a pricing section”) and it generates the design and code.

e.g.Prompt v0 with a UI description to scaffold design + React/Tailwind code.

A schema tool that double-checks data (like form input) is exactly the shape it should be.

e.g.Say “validate with Zod” to type-check and parse user input safely.

A high-performance charting library that can render millions of data points smoothly.

e.g.Say “use ECharts” when the dataset is huge and rendering performance matters.

One of the most popular and easiest tools for creating simple, attractive charts.

e.g.Say “use Chart.js” for quick, no-fuss canvas charts.

Highly customizable charts covering everything from simple bars to complex network diagrams.

e.g.Say “chart it with Nivo” for richly configurable, server-renderable React charts.

A concise, expressive visualization tool from the data-viz experts behind D3 — a lot of chart for little code.

e.g.Say “use Observable Plot” for fast exploratory charts with minimal code.

Ready-to-use charts and KPI blocks for building beautiful data dashboards, styled with Tailwind.

e.g.Say “build the dashboard with Tremor” to get charts and metric cards out of the box.

Flexible, low-level visualization primitives from Airbnb for building fully custom charts.

e.g.Say “build it with visx” when you need a bespoke chart, not a preset one.

A raw, bold web design style characterized by stark typography, unconventional layouts, clashing colors, and intentionally rough or unpolished elements. Rejects traditional design conventions.

e.g.Design a brutalist portfolio site with oversized monospace type, harsh contrasts, and asymmetric layouts.

A dramatic lighting technique using strong contrasts between light and dark areas. Originally from Renaissance painting, now a popular prompt term for moody, cinematic imagery.

e.g."Portrait with chiaroscuro lighting, deep shadows, Caravaggio-inspired"

A professional, polished aesthetic using structured layouts, conservative colors, ample white space, and readable typography. Conveys trust, stability, and competence.

e.g.Design a corporate clean homepage with a blue accent color, professional photography, and clear navigation.

A minimalist style using simple 2D elements without shadows, gradients, or textures. Emphasizes clean shapes, bold colors, and crisp typography for clarity and fast load times.

e.g.Design flat UI icons using solid colors, geometric shapes, and no drop shadows or bevels.

A design approach that emphasizes simplicity through generous white space, limited color palettes, clean typography, and only essential elements. Prioritizes clarity and focus.

e.g.Create a minimalist landing page with a single headline, one image, and a centered CTA button.

A soft, extruded design style that uses subtle shadows and highlights to create the illusion of elements pushing out from or pressing into the background. Combines flat design with realistic depth.

e.g.Create neomorphic buttons with soft inset shadows that look like they're molded from the background.

A clean, grid-based approach emphasizing clarity, readability, and objectivity. Features strong typography hierarchy, asymmetric layouts, and mathematical precision.

e.g.Build a Swiss-style portfolio with a strict grid, Helvetica typography, and generous white space.

A soft, playful design style featuring 3D clay-like elements with rounded edges, pastel colors, and subtle inner shadows. Creates a tactile, approachable feel.

e.g.Create claymorphic buttons and icons with soft rounded shapes and pastel gradients for a friendly app interface.

A design trend featuring frosted glass effects with background blur, transparency, and subtle borders. Creates depth through layered, translucent surfaces that reveal blurred content behind them.

e.g.Design glassmorphic cards with a frosted blur effect, white border, and soft drop shadow over a gradient background.

Google's design system combining flat design principles with subtle depth cues like shadows and motion. Uses a grid-based layout, responsive animations, and a bold color palette.

e.g.Build a Material Design app interface with floating action buttons, card elevation, and ripple effects on tap.

A design approach that mimics real-world objects with realistic textures, shadows, and details. Buttons look like physical buttons, notebooks have paper textures, and switches toggle like hardware.

e.g.Design a skeuomorphic audio player with brushed metal textures, embossed buttons, and a realistic volume knob.

Style-forward images using color/lighting/composition.

e.g.Low-key gritty palette with desaturation.

A design trend using flowing gradient backgrounds that mimic the northern lights, with smooth color transitions and ethereal, glowing effects.

e.g.Add an aurora gradient background with purple, blue, and teal flowing behind the hero section.

A futuristic aesthetic combining neon colors (pink, cyan, yellow) against dark backgrounds with glitch effects, tech imagery, angular shapes, and dystopian vibes.

e.g.Design a cyberpunk gaming site with neon pink accents, glitch animations, and a dark grid background.

A color scheme using dark backgrounds with light text and UI elements. Reduces eye strain in low light, saves battery on OLED screens, and creates a sleek, modern appearance.

e.g.Build a dark mode dashboard with a near-black background, muted accent colors, and high-contrast text.

A bold, visually dense design style embracing complexity, layered elements, vibrant colors, mixed patterns, and abundant decoration. The opposite of minimalism—more is more.

e.g.Design a maximalist fashion site with overlapping images, bold typography, animated elements, and clashing colors.

A bold 1980s style featuring geometric shapes, squiggles, clashing colors, and playful patterns. Named after the Memphis Group design collective.

e.g.Add Memphis-style decorative elements with colorful geometric shapes and zigzag patterns.

A design approach using a single color in various shades and tints, creating visual harmony and sophistication. Often paired with black, white, and gray.

e.g.Design a monochrome portfolio using only shades of deep blue against white backgrounds.

A nature-inspired aesthetic using soft curves, irregular shapes, earthy color palettes, natural textures, and fluid layouts that feel handcrafted and human.

e.g.Create an organic landing page with blob shapes, earth tones, leaf illustrations, and flowing section dividers.

Design styles that evoke nostalgia through references to past eras—whether 70s groovy, 80s neon, 90s web, or Y2K futurism. Uses period-appropriate colors, fonts, and visual motifs.

e.g.Create a 90s retro homepage with pixel art, animated GIFs, bright colors, and a hit counter.

Warm monochrome evoking historical feel.

e.g.Turn-of-century styled portrait.

A retro-futuristic aesthetic blending 80s/90s nostalgia with surreal imagery—pink and teal gradients, Roman busts, palm trees, old tech, and glitchy visuals.

e.g.Create a vaporwave landing page with sunset gradients, Greek statue imagery, and retro computer elements.

The vertical slices of a table, also called a field or attribute. Columns define the type of data stored (e.g., poster, rating, runtime).

e.g.Select the summary and rating columns... / Filter by the platforms field...

The entire collection of data. It holds all your tables, views, and stored procedures. Think of it as a warehouse that organizes everything in one place.

e.g.I am working with a database for a movie streaming app...

A key-value pair stored outside your code, typically in the operating system or a .env file. Used to keep sensitive data (API keys, database URLs) out of source code and to configure apps differently per environment.

e.g.Store your database password in an environment variable instead of hardcoding it...

A network security system that monitors and controls incoming and outgoing traffic based on predefined rules. Acts as a barrier between trusted internal networks and untrusted external ones. Can be hardware, software, or cloud-based.

e.g.Configure the firewall to only allow traffic on ports 80, 443, and 22...

A column that links to the primary key of another table, creating a relationship between the two. For example, a director_id column in a movies table that points to a directors table.

e.g.Link the movie table to the director table using the foreign key...

The verb in an HTTP request that tells the server what action to perform. The main methods are GET (read), POST (create), PUT (replace), PATCH (partial update), and DELETE (remove).

e.g.Use a POST method to create a new user record...

A three-digit number returned by a server to indicate the result of an HTTP request. Grouped by hundreds: 2xx (success), 3xx (redirect), 4xx (client error), 5xx (server error).

e.g.Return a 201 status code after successfully creating a resource...

JavaScript Object Notation. A lightweight text format for structuring data as key-value pairs and arrays. The standard data format for APIs and configuration files because it's easy for both humans and machines to read.

e.g.Send the request body as JSON with the movie title and rating...

A compact, URL-safe token format used to securely transmit information between parties as a JSON object. JWTs are signed (and optionally encrypted) and commonly used for authentication and session management.

e.g.Generate a JWT after login and include it in the Authorization header for subsequent requests...

A lightweight program that exposes specific capabilities (tools, resources, prompts) to AI applications via the Model Context Protocol. Each server typically wraps one system — a database, file system, API, or service.

e.g.Run an MCP server that gives Claude access to your Postgres database...

A function exposed by an MCP server that an AI model can call to perform an action — like querying a database, sending an email, or fetching data from an API. Tools have a defined name, input schema, and return value.

e.g.Register an MCP tool that lets the model search your knowledge base...

A system that lets services communicate asynchronously by sending messages to a queue, where they wait until a consumer processes them. Decouples services and handles traffic spikes gracefully. Examples: RabbitMQ, AWS SQS, Kafka.

e.g.Push email jobs to a message queue so the API responds instantly and emails send in the background...

A function that sits between the incoming request and the final response in a server application. Middleware can inspect, modify, or reject requests — used for logging, authentication, error handling, and more.

e.g.Add logging middleware to track every incoming request to your API...

An application architecture where all functionality (auth, payments, email, etc.) lives in a single codebase and deploys as one unit. Simpler to start with than microservices but harder to scale independently as the app grows.

e.g.Start with a monolith and split into microservices only when you hit scaling bottlenecks...

Open Worldwide Application Security Project. A nonprofit that publishes free resources, tools, and standards for web application security. Best known for the OWASP Top 10 — a list of the most critical security risks for web apps.

e.g.Audit your app against the OWASP Top 10 before going to production...

The data sent in the body of an HTTP request or response. In a POST request, the payload is the data you're sending to the server (e.g., a JSON object with user details). In a response, it's the data the server sends back.

e.g.Send a JSON payload with the user's name and email in the POST request...

A social engineering attack where attackers impersonate trusted entities (banks, colleagues, services) through fake emails, messages, or websites to trick victims into revealing sensitive information like passwords, credit card numbers, or API keys.

e.g.Train your team to recognize phishing emails that impersonate internal tools...

A column (or combination of columns) that acts as the unique identifier for every row in a table. No two rows can share the same primary key value.

e.g.Join these tables on the primary key...

The actual code or request you send to a database to retrieve, insert, update, or delete information. Written in SQL (Structured Query Language).

e.g.Write an SQL query to fetch...

The data that comes back after you run a query. It is a temporary table of rows and columns that match the conditions you specified.

e.g.Order the result set by date...

A server that sits in front of your application servers and forwards client requests to them. It handles tasks like SSL termination, caching, compression, and load balancing so your app servers don't have to. NGINX and Cloudflare are common examples.

e.g.Set up NGINX as a reverse proxy to handle SSL and forward traffic to your Node app...

The horizontal slices of a table, also called a record or entry. One row represents one single item (e.g., one specific movie with all its details).

e.g.Return the top 10 rows... / Delete the record where the ID is...

The blueprint or structure of a database, including column names, data types, and rules. It defines how data is organized without containing the data itself.

e.g.Here is the schema for my table... (followed by your CREATE TABLE code).

Software Development Kit. A collection of tools, libraries, and documentation that makes it easier to build with a specific platform or API. Instead of writing raw HTTP requests, you call pre-built functions.

e.g.Install the Stripe SDK to handle payments without writing raw API calls...

A computer or program that listens for incoming requests and sends back responses. In back-end development, a server runs your application code, handles API requests, connects to databases, and serves data to clients.

e.g.Deploy your server to handle API requests from the front-end...

Secure Shell. A protocol for securely connecting to and controlling remote servers over an encrypted connection. Used to run commands, transfer files, and manage infrastructure. Authentication typically uses key pairs instead of passwords.

e.g.SSH into your production server to check the application logs...

A digital certificate that proves a website's identity and enables HTTPS encryption. Issued by Certificate Authorities (CAs). When your browser shows a padlock icon, it means the site has a valid SSL/TLS certificate. Let's Encrypt offers free certificates.

e.g.Install an SSL certificate on your domain so traffic is encrypted over HTTPS...

A specific collection of data organized in rows and columns, similar to a spreadsheet. Each table stores one type of entity (e.g., movies, users, orders).

e.g.Write a query for the movie_cache table...

The specific piece of data located at the intersection of a column and a row (e.g., '120 mins' or 4.5). Also referred to as a cell.

e.g.Find rows where the value in the runtime column is greater than 90...

Virtual Private Network. Creates an encrypted tunnel between your device and a remote server, hiding your traffic from outside observers. Used to access private networks securely, bypass geo-restrictions, and protect data on public Wi-Fi.

e.g.Connect to the company VPN to access internal services from home...

Application Programming Interface. A set of rules and protocols that lets different software applications communicate with each other. APIs define how requests and responses should be structured so one system can use another's functionality.

e.g.Use the Stripe API to process payments in your app...

A specific URL path that an API exposes for clients to interact with. Each endpoint typically maps to a particular resource or action (e.g., /api/users or /api/movies/search).

e.g.Call the /api/movies endpoint to get a list of all movies...

A DOM node that is directly nested inside another node (its parent). Child elements inherit styles from ancestors and adjust relative to the parent's container constraints.

e.g.Set the child elements to expand to 100% of their parent container's width.

Cross-Origin Resource Sharing. A browser security mechanism that controls which websites can make requests to your API. By default, browsers block requests from a different domain — CORS headers tell the browser which origins are allowed.

e.g.Enable CORS on your API so your front-end app on a different domain can access it...

A CSS selector pattern (separated by a space, e.g. '.card span') that matches all target elements nested anywhere inside an ancestor element, regardless of how deep they are.

e.g.Use a descendant selector to apply styling to all text blocks inside the card component, even those nested inside sub-wrappers.

A DOM node that directly encloses another node (its child) in the markup tree hierarchy. Targeting a parent lets you control contextual layout systems (Flex/Grid) that structure nested elements.

e.g.Target the parent element to assign a flex layout that governs the alignment of the inner cards.

A document format developed by Adobe that encapsulates a fixed-layout description of a document, including text, fonts, vector paths, and raster images. It functions as a digital print sheet, rendering identically across platforms.

e.g.Say "Render the report as a PDF so that the document vectors, typography, and image positions remain locked for printing."

A keyword added to a CSS selector (e.g. ':hover' or ':focus') that targets elements when they enter a specific interaction state or structural position, without modifying the raw markup.

e.g.Use the :focus-visible pseudo-class to apply clean accessibility outlines only during keyboard focus.

A web standard API that isolates markup, structures, and CSS styles within an encapsulated web component, shielding the inner nodes from parent document style overrides.

e.g.Wrap the custom widgets in a shadow DOM to ensure global stylesheet adjustments do not break their visual layout.

Nodes in the DOM tree that share the same immediate parent element. CSS sibling selectors (+ and ~) enable developers to target and adjust spacing between adjacent elements.