[Animation / Motion Design](atomicglue.co/glossary/animation-motion-design) — Animation and motion design in interfaces use movement to guide attention, provide feedback, indicate transitions, and add personality. Effective motion is purposeful, performant, and respectful of user preferences.
[Atomic Design (Atoms / Molecules / Organisms)](atomicglue.co/glossary/atomic-design-atoms-molecules-organisms) — Atomic Design is a methodology for creating design systems by breaking interfaces into a hierarchy of components: atoms (basic elements), molecules (simple combinations), organisms (complex sections), templates (layouts), and pages (specific instances).
[Brand Guidelines](atomicglue.co/glossary/brand-guidelines) — Brand guidelines are the official rulebook for how a brand should be presented across every medium, covering logo usage, color values, typography, tone of voice, and application examples.
[Brand Identity](atomicglue.co/glossary/brand-identity) — Brand identity is the visible and tangible expression of a brand: its logo, colors, typography, imagery, voice, and all visual and verbal cues that distinguish it from competitors.
[Color Palette](atomicglue.co/glossary/color-palette) — A color palette is a defined set of colors used consistently across a brand or product interface to create visual harmony, hierarchy, and emotional tone.
[Design Handoff](atomicglue.co/glossary/design-handoff) — Design handoff is the process of transferring finalized designs from designers to developers for implementation. The goal is to bridge the gap between design intent and code with minimal misinterpretation.
[Design Sprint](atomicglue.co/glossary/design-sprint) — A Design Sprint is a five-day process developed by Google Ventures for answering critical business questions through design, prototyping, and testing with real users. It compresses months of work into a week.
[Design System](atomicglue.co/glossary/design-system-design) — A design system is a collection of reusable components, patterns, and standards governed by clear principles. It is the single source of truth for teams building digital products at scale.
[Design Tokens](atomicglue.co/glossary/design-tokens) — Design tokens are platform-agnostic variables that store design decisions like colors, spacing, typography, and shadows. They bridge design and code by replacing hardcoded values with named references.
[Emotional Design](atomicglue.co/glossary/emotional-design) — Emotional design is the practice of creating products that elicit specific emotional responses from users, building connection, delight, and loyalty. Don Norman's framework divides it into three levels: visceral, behavioral, and reflective.
[Empty State / Error State / Loading State](atomicglue.co/glossary/empty-state-error-state-loading-state) — These are three critical non-happy-path UI states. Empty states appear when there is no data to show. Error states handle failures. Loading states indicate that content is being fetched. Designing all three determines how resilient a product feels.
[Figma](atomicglue.co/glossary/figma) — Figma is a browser-based collaborative design tool used for UI/UX design, prototyping, and design system management. It enables real-time collaboration, version control, and shared component libraries.
[Grid System](atomicglue.co/glossary/grid-system) — A grid system is a structure of columns, gutters, and margins that provides a consistent framework for arranging content on a page. It brings order, alignment, and rhythm to layouts.
[Logo / Wordmark](atomicglue.co/glossary/logo-wordmark) — A logo is a graphic mark that identifies a brand. A wordmark is a type of logo made entirely of the brand name in a distinctive type treatment. Both are the most recognizable element of brand identity.
[Microinteractions](atomicglue.co/glossary/microinteractions) — Microinteractions are small, contained moments of interaction that accomplish a single task. Examples include toggling a switch, seeing a like animation, or pulling to refresh. They add personality, feedback, and polish.
[Mobile-First Design](atomicglue.co/glossary/mobile-first-design) — Mobile-first design is a strategy of designing for the smallest screen first, then scaling up to larger screens. It forces prioritization of essential content and features, leading to better experiences on every device.
[Mockup](atomicglue.co/glossary/mockup) — A mockup is a high-fidelity, static visual representation of a design that shows what the final product will look like, including colors, typography, imagery, and layout.
[Prototype](atomicglue.co/glossary/prototype) — A prototype is an interactive simulation of a product that allows users to click, navigate, and experience flows. It validates usability and behavior before development begins.
[Typography (Serif / Sans-Serif / Variable Font)](atomicglue.co/glossary/typography-serif-sans-serif-variable-font) — Typography is the art and technique of arranging type. Serif fonts have small strokes (serifs) at the ends of letters; sans-serif fonts do not. Variable fonts pack multiple weights, widths, and styles into a single file for better performance and design flexibility.
[UI (User Interface)](atomicglue.co/glossary/ui-user-interface) — UI is the visual layer people interact with on a screen: buttons, menus, icons, layout, colors, and typography that together form the interface of a website, app, or device.
[UX (User Experience)](atomicglue.co/glossary/ux-user-experience) — User Experience (UX) is the totality of how a person feels when interacting with a product, service, or system. It covers every touchpoint from first impression to ongoing use.
[Visual Design](atomicglue.co/glossary/visual-design) — Visual design is the craft of shaping a product's appearance using typography, color, spacing, imagery, and layout to support usability, hierarchy, and brand identity.
[Visual Hierarchy](atomicglue.co/glossary/visual-hierarchy) — Visual hierarchy is the arrangement of design elements in order of importance, guiding the viewer's eye through content using size, color, contrast, spacing, and positioning.
[Web Fonts](atomicglue.co/glossary/web-fonts) — Web fonts are typefaces loaded by a browser from a server or CDN so that text renders in a chosen typeface rather than falling back to system defaults. They make brand typography possible on the web.
[White Space / Negative Space](atomicglue.co/glossary/white-space-negative-space) — White space (or negative space) is the empty area between design elements. It is a deliberate design tool, not wasted space. It improves readability, creates visual breathing room, and signals importance.
[Wireframe](atomicglue.co/glossary/wireframe) — A wireframe is a low-fidelity, structural blueprint of a page or screen that shows layout, content hierarchy, and functionality without visual design details like color or typography.