/ˈjär-gə-ner-ē/ · noun· the dictionary for words that make you sound like you know what you’re doing. Every craft hoards its own vocabulary — here they’re all in one drawer, with 206 specimens you can actually look at.
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 single entry point that sits in front of multiple back-end services and routes requests to the right one. It handles cross-cutting concerns like authentication, rate limiting, logging, and request transformation in one place.
e.g.Route all API requests through an API gateway that handles auth before forwarding to services...
A unique string used to identify and authenticate a client making API requests. API keys are simpler than OAuth but less secure — they act as a basic password for machine-to-machine communication.
e.g.Pass your API key in the request header to authenticate with the service...
The process of verifying who a user or system is — confirming identity. Common methods include passwords, API keys, OAuth tokens, and biometrics. Answers the question: 'Who are you?'
e.g.Add authentication to your API so only registered users can access it...
The process of determining what an authenticated user or system is allowed to do. It controls access to resources based on roles, permissions, or policies. Answers the question: 'What can you do?'
e.g.Set up role-based authorization so only admins can delete records...
Storing a copy of data in a faster-access location so future requests can be served without hitting the original source. Reduces latency, server load, and API costs. Common tools include Redis, CDNs, and browser caches.
e.g.Cache API responses in Redis so repeated queries don't hit the database...
Continuous Integration / Continuous Deployment. A practice where code changes are automatically tested (CI) and deployed (CD) through a pipeline. Tools like GitHub Actions, Jenkins, and CircleCI automate the build-test-deploy cycle.
e.g.Set up a CI/CD pipeline so every push to main automatically runs tests and deploys...
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...
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...
Distributed Denial of Service. An attack that floods a server or network with massive traffic from many sources to overwhelm it and make it unavailable to legitimate users. Mitigated with CDNs, rate limiting, and services like Cloudflare.
e.g.Put your site behind Cloudflare to protect against DDoS attacks...
A container is a lightweight, standalone package that bundles an application with everything it needs to run (code, runtime, libraries). Docker is the most popular tool for building and running containers. Containers ensure your app runs the same everywhere.
e.g.Containerize your Node app with Docker so it runs identically in dev and production...
The process of converting readable data (plaintext) into an unreadable format (ciphertext) using an algorithm and key. Only someone with the correct key can decrypt it. Protects data at rest (stored) and in transit (moving over a network).
e.g.Encrypt user data at rest using AES-256 before storing it in the database...
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...
A query language and runtime for APIs that lets clients request exactly the data they need in a single request. Unlike REST, the client defines the shape of the response, reducing over-fetching and under-fetching.
e.g.Use a GraphQL query to fetch only the title and rating for each movie...
A one-way function that converts data into a fixed-length string of characters. Unlike encryption, hashing cannot be reversed. Used for password storage, data integrity checks, and digital signatures. Common algorithms: bcrypt, SHA-256.
e.g.Hash user passwords with bcrypt before storing them in the database...
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...
HTTPS (Hypertext Transfer Protocol Secure) is HTTP encrypted with TLS (Transport Layer Security). It encrypts data in transit between client and server, preventing eavesdropping and tampering. The padlock icon in your browser means TLS is active.
e.g.Enforce HTTPS on all API endpoints to encrypt data in transit...
Managing and provisioning servers, networks, and cloud resources through code files instead of manual setup. Tools like Terraform, Pulumi, and AWS CloudFormation let you version-control your infrastructure like application code.
e.g.Define your AWS infrastructure in Terraform so it's reproducible and version-controlled...
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...
An open-source platform for automating the deployment, scaling, and management of containerized applications. It groups containers into logical units called pods and manages them across a cluster of machines.
e.g.Deploy your app to a Kubernetes cluster so it auto-scales based on traffic...
A system that distributes incoming network traffic across multiple servers so no single server gets overwhelmed. Improves availability, reliability, and performance. Can operate at the network layer (L4) or application layer (L7).
e.g.Put a load balancer in front of your servers to distribute traffic evenly...
An open protocol that standardizes how AI applications connect to external tools, data sources, and services. It provides a universal interface so AI models can interact with the outside world in a consistent way.
e.g.Use MCP to let your AI assistant read and write files on your local machine...
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...
An architectural pattern where an application is built as a collection of small, independent services that each handle one specific function (e.g., auth, payments, email). Each service can be deployed, scaled, and updated independently.
e.g.Split the monolith into microservices so the auth service can scale independently...
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 Authorization. A standard protocol that lets users grant third-party apps limited access to their accounts (e.g., 'Sign in with Google') without sharing their password. Uses access tokens instead of credentials.
e.g.Implement OAuth 2.0 so users can sign in with their Google account...
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...
An authorized simulated cyberattack on a system to find security vulnerabilities before real attackers do. Pen testers use the same tools and techniques as hackers but report findings to the organization so they can be fixed.
e.g.Hire a pen testing firm to audit your app's security before launch...
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...
A technique that restricts how many requests a client can make to an API within a given time window (e.g., 100 requests per minute). Protects servers from abuse, brute-force attacks, and accidental overload.
e.g.Add rate limiting to your API to prevent abuse — max 100 requests per minute per user...
A method of restricting system access based on user roles (e.g., admin, editor, viewer). Permissions are assigned to roles, and users are assigned to roles — instead of granting permissions to each user individually.
e.g.Implement RBAC so editors can update content but only admins can delete it...
Representational State Transfer API. An architectural style for building APIs that uses standard HTTP methods (GET, POST, PUT, DELETE) and treats data as resources identified by URLs. The most common API pattern on the web.
e.g.Build a REST API with endpoints for creating, reading, updating, and deleting users...
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...
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...
The practice of securely storing, accessing, and rotating sensitive credentials like API keys, passwords, and tokens. Dedicated tools (e.g., AWS Secrets Manager, HashiCorp Vault) prevent secrets from being exposed in code or logs.
e.g.Use a secrets manager to store production API keys instead of .env files...
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...
A cloud computing model where the provider manages the servers and you only write functions that run in response to events. You pay per execution, not for idle servers. AWS Lambda, Vercel Functions, and Cloudflare Workers are common platforms.
e.g.Deploy a serverless function that resizes images on upload...
A security vulnerability where an attacker inserts malicious SQL code into user inputs (like form fields) to manipulate the database. One of the most common and dangerous web attacks. Prevented by using parameterized queries.
e.g.Use parameterized queries to prevent SQL injection on your login form...
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...
A security method that requires two different forms of verification to log in: something you know (password) and something you have (phone, hardware key) or something you are (fingerprint). Blocks most account takeover attacks.
e.g.Enable 2FA on all admin accounts using an authenticator app...
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...
A mechanism where one application sends an automatic HTTP POST request to another when a specific event occurs. Think of it as a reverse API — instead of you asking for data, the data comes to you.
e.g.Set up a webhook so Stripe notifies your server whenever a payment succeeds...
A communication protocol that provides a persistent, two-way connection between a client and server. Unlike HTTP (request-response), WebSockets let the server push data to the client in real time (e.g., chat apps, live dashboards).
e.g.Open a WebSocket connection to stream live price updates...
A vulnerability where an attacker injects malicious scripts into web pages viewed by other users. The script runs in the victim's browser and can steal cookies, sessions, or data. Prevented by sanitizing and escaping user input.
e.g.Sanitize all user-generated content to prevent XSS attacks on your forum...
A security model that assumes no user, device, or network should be trusted by default — even inside the corporate network. Every request must be authenticated, authorized, and continuously validated. 'Never trust, always verify.'
e.g.Adopt a zero trust architecture so every internal service verifies requests...
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.
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.
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.
Clickable control to trigger actions.
e.g."Submit" on a checkout form.
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.
Square input for multi-select options.
e.g.Choose interests: Art, Music, Sports.
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 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.
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...
List that expands to select one option.
e.g.Country selector in a profile form.
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.
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.
Small graphic representing actions/content.
e.g.Magnifying glass for search.
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.
Text-entry control for user data.
e.g.Email field in signup.
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.
Indicator that a process is running.
e.g.Spinner during file upload.
Status alerts (success, error, new items).
e.g.Red badge on messages icon.
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.
Structured selector (dates, times, values).
e.g.Date-of-birth calendar widget.
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.
Circular single-select options.
e.g.Choose one: Small, Medium, Large.
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.
Input optimized to find items in-system.
e.g.Site-wide search bar.
Lateral area for navigation/content.
e.g.Left rail with section links.
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.
Drag control to set a value/range.
e.g.Price range slider on marketplaces.
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 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.
Keyword label for categorization.
e.g.Chips showing "Design", "Photography".
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.
On/off switch for binary state.
e.g.Dark mode toggle.
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.
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 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.
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%.
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.'
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.
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.
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 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.'
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 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.
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 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.
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 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.
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.
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."
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 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 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 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 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 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 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 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 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.
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"
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 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 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.
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 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.
People add life and scale.
e.g.Lone pedestrian traversing historic bridge.
Depicting buildings with attention to lines/composition.
e.g.Tall structure shot with corrected verticals.
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.
Monochrome tonality emphasizing contrast/form.
e.g.Converting harsh daylight scenes to emphasize texture.
Visuals expressing a company's identity.
e.g.Lifestyle images aligning with brand values.
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.
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.
High dynamic difference between blacks/whites.
e.g.Stark shadow/highlight street scene.
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.
Low-cost setups to shape light creatively.
e.g.Homemade diffusers/reflectors for portraits.
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.
Subject dominates, minimizing distractions.
e.g.Tight crop on cathedral façade details.
Analog image capture with distinct aesthetic.
e.g.35mm grainy street scene.
Reality-subverting, interpretive imagery.
e.g.Butterflies composited around subject.
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.
Beauty-centric, flattering depiction of subjects.
e.g.Fashion model with soft light and styling.
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.
Combining exposures to extend tonal range.
e.g.Surreal yet detailed cityscape from bracketed shots.
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.
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.
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.
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.
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.
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.
Visual streaking from subject/camera movement.
e.g.Long-exposure waterfalls rendered silky.
Sun/moonlight used without artificial sources.
e.g.Golden-hour outdoor portrait with bounce.
Broad natural subjects beyond wildlife.
e.g.Macro of dew on leaf; mountain panorama.
Open areas simplify and spotlight subject.
e.g.Statue isolated against clear sky.
Low-light shooting with longer exposures/unique lighting.
e.g.Moonlit abandoned sites with light painting.
Stitching adjacent frames into wide vistas.
e.g.Mountain panorama from multiple shots.
Repetition and surface detail for visual harmony.
e.g.Arched colonnade; textured stonework.
Focus on people/animals as main subject.
e.g.Character-defining headshot.
Developing sensor-native files for maximum latitude.
e.g.Workflow in Capture One/Lightroom.
Property visuals emphasizing clarity and layout.
e.g.Wide-angle, well-lit interior room overview.
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.
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.
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.
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.
Cut aligning composition/motion across time/place.
e.g.Door closing matches another door opening in a new scene.
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.
Compositional/VFX-driven shot bridges designed in advance.
e.g.Scott Pilgrim stylized scene transitions.
Abrupt high-contrast cut (tone/volume/action).
e.g.Scream cuts to screeching train brakes and calm scene.
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.
Transitional reveal via directional image wipe.
e.g.Star Wars-style screen wipe following character motion.
No entry matches that. Even a dictionary has limits.