Design Systems

Long-Term Support (LTS): Stability Over New Features

LTS is a promise of stability for a specific software version, trading new features for long-term bug fixes and security patches. It's crucial for production systems like Node.js or Ubuntu. The footgun is assuming all bugs get fixed, not just critical ones.

Design System Versioning: One Package or Many?

Do you version your design system as one big package or as many small ones? The first ensures consistency, the second offers flexibility. This choice impacts how product teams consume updates.

Theme Provider Pattern: Centralized UI Styling

A Theme Provider acts like a global style guide, injecting design tokens like colors and fonts into all child components. It's used in frameworks like React to ensure a consistent look and feel. The footgun: components outside the provider won't get the theme.

CSS Custom Properties: Variables for Your Stylesheet

CSS custom properties are variables for your design system. Define a value like --primary-color once on :root and reuse it everywhere. This is ideal for theming, like switching between light and dark modes.

prefers-color-scheme: Respect User Theme Preferences

The prefers-color-scheme media query lets your CSS automatically adapt to a user's system-wide light or dark mode. It's used to create themes that respect user preferences.

Theme Object: Your Design System's Single Source of Truth

A theme object is a central dictionary for your UI's design tokens, like colors and font sizes. It ensures consistency across components by providing a single, shared source for styling values.

White-Label UI: Design Once, Rebrand Infinitely

White-label UI is like a WordPress theme for your product: a single design that other companies can rebrand. It lets agencies serve multiple clients without rebuilding the UI from scratch.

Dynamic Theme Switching with CSS

Let your app's theme automatically follow the user's OS setting. CSS's prefers-color-scheme media query lets you define styles for light and dark modes. The footgun is forgetting the 'no-preference' state, which can result in an unstyled default.

CSS `color-scheme`: Opting Into Browser UI Themes

The color-scheme property tells the browser your site supports light/dark modes, automatically styling UI like scrollbars and form controls to match the user's OS preference.

Theming with CSS data-* Attributes

Think of data- attributes as labels for UI state, like data-theme='dark'. CSS uses attribute selectors ([data-theme='dark']) to apply styles directly, avoiding complex class logic.

Apple HIG Compliance

Apple's HIG is the rulebook for native iOS and macOS apps. Compliance means matching platform conventions for layout and navigation. The footgun is treating it as a visual skin while ignoring interaction patterns, making apps that look right but feel wrong.

VUI Design: Making Computers Talk Like People

Think of VUI design as scripting a helpful human conversation, not just a command-line interface with a voice. It's key for voice assistants and smart speakers. The footgun is ignoring persona; if you don't design one, you'll get 'boring' by default.

Using Component Libraries in React Native

A component library is a pre-fab UI kit for your app. Instead of building every button from scratch, you get polished, ready-to-use pieces that handle platform-specific animations and accessibility.

Systematizing Haptics: Beyond Simple Vibrations

Treat haptics like a design system for touch, not just random vibrations. Use them to confirm actions or signal state changes. The biggest footgun is overuse, which turns meaningful feedback into annoying noise that users will disable.

Jetpack Compose Theming for Design Systems

Compose theming uses CompositionLocal to implicitly pass design tokens like colors and fonts down the UI tree. This is key for building a design system where you can swap themes (like light/dark) without rewriting components.

SwiftUI Theming with the Environment

Treat SwiftUI's Environment as a cascading style sheet for your app. You define design tokens like colors and fonts once at the top, and all child views automatically inherit them. This is key for building design systems or multi-brand apps.

Adaptive UI for Foldables: Thinking in Postures

An adaptive UI for foldables thinks in "postures," not just screen sizes, reacting to states like folded or tabletop mode. This is key for apps on devices like the Pixel Fold. The footgun is treating a foldable like a big tablet, ignoring its unique physical.

Spatial UI Design Systems

Spatial UI design systems define how interfaces behave in 3D space on devices like Vision Pro: depth-based hierarchy, distance-aware scale, and gaze-and-pinch interaction, replacing the flat, pointer-driven rules of traditional 2D design systems.

Design System Governance: A Process for Evolution

Design system governance is a process for when components don't meet a team's needs. It guides teams on whether to create a one-off "snowflake" or contribute a new component back to the system. The footgun is letting teams "find a way," leading to chaos.