Feature Flag

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.

React Server Components (RSC) are components that render exclusively on the server and send only their HTML output to the client, with zero JavaScript bundle impact. They can directly access databases, file systems, and backend services without API endpoints. Combined with Client Components (marked with `'use client'`), RSC enables a hybrid architecture where interactive parts ship JavaScript while static or data-heavy parts remain server-only. Next.js App Router uses RSC as its default component model.

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.

Semantic HTML means using HTML elements that clearly describe their meaning and purpose, such as `<article>`, `<nav>`, `<header>`, and `<section>`, instead of generic `<div>` tags. This practice improves accessibility for screen readers, boosts SEO by helping search engines understand page structure, and makes code far more readable for other developers. It's considered a foundational best practice in modern web development.

A design system is a collection of reusable components, guidelines, and standards that ensure visual and functional consistency across a product or suite of products. It typically includes a component library, design tokens, typography rules, color palettes, and documentation. Design systems bridge the gap between designers and developers, enabling teams to build interfaces faster while maintaining a unified look and feel.

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.