Unlocking Design Systems: How Buttons Reveal Core Component Relationships
This article explains what a design system is, its evolution and composition, distinguishes components from controls, breaks down a button into foundational elements, and shows how atomic properties of color, symbol, and position combine to create reusable UI components following DRY principles.
Design System Definition
Design systems currently lack a single unified definition; a common description is a collection of reusable components guided by clear standards, which can be assembled to build any number of applications.
Design System Development
In recent years design systems have expanded rapidly, with examples such as Goldman Sachs' "Design at Goldman Sachs" and the UK government's GOV.UK Design System, illustrating cross‑industry efficiency gains and standardized collaboration.
Composition of Design Systems
Typical design systems consist of five parts: brand (overview, principles, values), content strategy (terminology, glossary, copy style), foundations (color, typography, icons, layout), components (common, layout, navigation, input, display, feedback), and design patterns (global rules).
What Is a Component?
A component is a simple encapsulation of data and behavior, emphasizing high reusability and analogous to a mechanical part, but it has no visual “appearance”. A control (widget) is a visual component that adds a concrete appearance.
Design vs. Code Components
Components are divided into design components (Figma, Sketch) and code components (Web, iOS, Android).
Basic Component Elements
Using a button as an example, its foundation consists of two parts: button background (color, border‑radius, size, shadow, state) and font (text color, font size, internal padding). These map to three atomic elements: color, symbol, and position.
Atomic Element Relationships
Color modifies symbols to convey semantics and state; symbols occupy positions in a plane or space, establishing ordered distribution. The combination of these atomic properties yields diverse component variations.
Attribute Combinations and Component Assembly
By enumerating attribute values, designers can generate a full set of button variants; not every combination is needed in design tools, but the relationships are explicit.
Component Principles and Value
Both design systems and components follow the DRY principle—avoid duplication—to reduce internal complexity, standardize output, and accelerate scalable development.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
JD.com Experience Design Center
Professional, creative, passionate about design. The JD.com User Experience Design Department is committed to creating better e-commerce shopping experiences.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.