Single Source of Truth (SSOT): One Place for All UI

WHY IT EXISTS To solve the chaos of inconsistent UI and duplicated effort. Without a central authority, different teams build slightly different versions of the same components, leading to a fragmented user experience and a maintenance nightmare where a simple branding change requires updating dozens of codebases.

THE MENTAL MODEL Think of a dictionary. If everyone could define words however they wanted, communication would break down. A design system acts as the official dictionary for your UI's "words" (components) and "grammar" (spacing, layout). The SSOT is the principle that there is only ONE official dictionary, not multiple competing drafts.

HOW IT WORKS SSOT is implemented as a shared library of code and design assets. For developers, this is typically a package (e.g., on npm) containing reusable components. For designers, it's a shared Figma library. A change to a component, like updating the color of a primary button, is made once in the central library. Publishing a new version makes that change available to all consuming applications. Teams then update their dependency to receive the change, ensuring universal consistency.

WHEN TO USE IT Use SSOT when multiple teams or applications need to share a common brand identity and user experience. It is critical for scaling design and engineering in larger organizations and for projects that need to support multiple platforms (web, iOS, Android) with a consistent look and feel.

WHEN NOT TO USE IT For a small, single-team project or a quick prototype, the overhead of setting up and maintaining a formal design system as an SSOT can be overkill. If there's only one "consumer" of the designs, the project's own codebase can serve as a de facto source of truth without the need for a separate, distributable library.

ONE CANONICAL EXAMPLE A company's marketing site, web app, and mobile app all use the same "BrandButton" component from a shared design system package. A designer changes the button's corner radius from 4px to 8px in the central Figma file. A developer implements this in the component library and publishes version 2.1.0. All three applications update their dependency, and their buttons are now consistent without any team needing to manually change their local code.