Design System

Accessibility (often abbreviated a11y) is the practice of designing and building websites and apps so they can be used by everyone, including people with visual, motor, auditory, or cognitive disabilities. This involves proper semantic markup, keyboard navigation support, sufficient color contrast, and screen reader compatibility. Beyond being an ethical responsibility, accessibility is increasingly a legal requirement in many jurisdictions.

Responsive design is an approach to web development where layouts, images, and UI elements adapt fluidly to different screen sizes and devices. It relies on flexible grids, media queries, and relative units like `rem`, `%`, and `vw` to ensure a consistent experience from mobile phones to large monitors. Modern responsive design increasingly uses CSS Container Queries and intrinsic sizing techniques to create components that respond to their own container rather than the viewport.

Reconciliation is React's algorithm for comparing the previous and current Virtual DOM trees to determine the minimum number of changes needed to update the actual DOM. React uses heuristics like element type comparison and the `key` prop to efficiently decide whether to update, replace, or remove DOM nodes. Understanding reconciliation explains why unique `key` props on list items matter — without them, React can't reliably track which items changed, leading to bugs and poor performance.

A modal (or modal dialog) is a UI element that overlays the main content to demand user attention and interaction before they can return to the underlying page. Modals are used for confirmations, forms, alerts, and content previews. Proper implementation requires focus trapping, keyboard accessibility (Escape to close), and preventing background scroll — making accessible modals more complex than they appear.

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.

A skeleton screen is a placeholder UI that mimics the page layout with simple shapes and animated gradients while content is loading. Unlike spinners, skeletons give users an immediate sense of the page structure, reducing perceived loading time. They are widely used in apps like Facebook, YouTube, and LinkedIn to create a smoother transition from loading to loaded state.