Easy concepts in Design Systems
Single Source of Truth (SSOT): One Place for All UI
A Single Source of Truth (SSOT) is the "don't repeat yourself" principle for UI. Define a component or style once in a central design system, and reference it everywhere. This prevents UI drift across teams.
A Design System is a Shared Toolbox, Not Just a Sticker Sheet
A design system is a shared toolbox of reusable UI components and rules, not just a style guide. It ensures consistency and speed when multiple teams build products at scale.
Design System: The Whole vs. Its Parts
A design system is the parent; style guides and component libraries are its children. It's the full toolkit for building consistent products at scale, containing rules, patterns, and ready-to-use code.
Typographic Scale: A System for Consistent Text
A typographic scale is a predefined set of font sizes and line heights that creates visual harmony. Design systems use it for consistent, readable text across devices. The footgun is adding one-off font sizes, which breaks the system's rhythm and consistency.
Spacing Scales: Using Multiples for Consistent UI
A spacing scale builds consistent UI layouts from a limited set of values, usually multiples of a base unit like 8px. It's used for everything from button padding to page gaps. The footgun is using arbitrary pixel values, which breaks the system's rhythm.
Component Variants: One Component, Many Forms
Component variants are like Lego bricks for your UI: one block can build many things. Instead of creating a unique component for every button state or size, you define properties to manage its variations.
Component Composition: Treat a Group Like an Individual
Component composition treats a group of objects the same as a single one. This allows building complex UIs by nesting simple components, like putting a Button inside a Form. The footgun is creating monolithic components instead of small, reusable ones.
Footer Layout Patterns
A footer is a safety net for users who reach the bottom of a page without finding what they need. Use a "Big" footer for complex sites, "Medium" for standard ones, and "Slim" for simple pages.
Modal Dialogs: The Focus Trap Pattern
A modal dialog is a "focus trap" that overlays the UI, forcing a user to complete a task. It's used for critical confirmations or focused inputs, like a date picker. The main footgun is failing to trap keyboard focus, letting users tab into the inert.
Storybook: Design System Documentation
Storybook is a workshop for building UI components in isolation, then auto-publishing docs from those living examples. Teams use it to catalog design systems without maintaining a separate documentation site.
Design System Onboarding: The Welcome Mat
Design system onboarding is a welcome mat, not a full manual. It orients new users by explaining the system's purpose and scope, then routes designers to interactive guides and engineers to implementation docs. The footgun is information overload.
Figma Team Libraries: A Single Source of Truth
Think of a Figma Library as a shared box of official LEGOs for your team. It ensures everyone uses the same approved components, styles, and variables, keeping designs consistent. The biggest footgun is forgetting to publish changes to the main components.
Storybook: A Workshop for Isolated UI Components
Storybook is a workshop for building UI components in isolation, separate from your app's business logic. It's ideal for developing edge cases and documenting a design system.
Package Publishing: Sharing Your Code with the World
Publishing a package is like adding a book to a public library, making your code reusable with one command. It's essential for sharing design system components or utilities. The footgun: accidentally publishing secrets or making a private package public.
WCAG Conformance Levels: A, AA, and AAA
WCAG levels are a tiered rating for web accessibility. Level A is the minimum, AA is the widely accepted standard, and AAA is the highest. This helps teams set clear, testable goals. The footgun: don't require AAA for an entire site, as it's often impossible.
Keyboard Focus Order: Navigating by Tab
Keyboard focus order is the path a user takes through your UI using only the Tab key. It must follow a logical sequence that preserves meaning, especially in forms and modals. The footgun is when CSS creates a visual layout that diverges from the HTML.
Image Alt Text: What Screen Readers Say About Pictures
Alt text tells screen readers what to say when an image can't be seen. For a photo, describe the scene. For a button, describe its action ("Submit form"). For pure decoration, use an empty alt="" to tell screen readers to skip it.
Design System Triage: Treating Your DS Like a Product
Treat your design system like a product, not a static library. It requires a triage process to handle bugs and feature requests from its users—your designers and developers. This applies when a component breaks or needs a new feature.
Driving Design System Adoption
A design system's value isn't in its components, but in its use. Drive adoption by creating collaborative feedback loops with users through interactive workshops and dedicated office hours.
Design System Feedback: Start with User Needs
A design system's success depends on feedback from the end-users of the products it builds, not just its internal consumers. Prioritize features and validate designs by continuously testing with real people to ensure the system solves actual user problems.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles