Wireframe

Focus management is the practice of controlling which element receives keyboard focus in a web application, especially during dynamic content changes. When a modal opens, focus should move into it; when it closes, focus should return to the trigger element. Proper focus management is essential for keyboard and screen reader users, and involves techniques like focus trapping, roving tabindex, and programmatic focus with `element.focus()`.

Design tokens are the smallest units of a design system — named values representing colors, spacing, typography, border radii, and other visual properties. They act as a single source of truth that can be translated into platform-specific formats (CSS variables, Swift constants, XML resources). By changing token values in one place, you can update the look and feel of an entire application across multiple platforms simultaneously.

Figma is a browser-based collaborative design tool used for creating UI designs, prototypes, and design systems. Its real-time multiplayer editing, component system, auto layout, and dev mode have made it the industry standard for product design. Developers use Figma to inspect designs, extract CSS values, export assets, and — through plugins and APIs — automate the design-to-code workflow.

Dark mode is a UI color scheme that uses light-colored text and elements on a dark background. It reduces eye strain in low-light environments, can save battery on OLED screens, and has become an expected feature in modern applications. Implementation typically involves CSS custom properties or design tokens that switch between light and dark theme values, often respecting the user's system-level preference via the `prefers-color-scheme` media query.

A microinteraction is a small, contained moment in a user interface that accomplishes a single task — a button animation on click, a toggle switch, a pull-to-refresh gesture, or a "like" heart animation. These subtle design details provide feedback, guide users, and add personality to an interface. Well-crafted microinteractions make products feel polished and responsive without overwhelming users.

An affordance is a design property that suggests how an element should be used — a raised button looks clickable, a handle looks draggable, an underlined text looks like a link. In UI design, perceived affordances guide users toward correct interactions without explicit instructions. When affordances are missing or misleading (like text that looks clickable but isn't), users experience confusion and frustration.