Design System

A design system is a documented collection of reusable parts and rules for building a product's interface. It typically includes design tokens (colours, spacing, typography), UI components such as buttons and forms, usage guidelines, accessibility requirements and the code that implements them.

Why it matters

Without a shared system, each page or team invents its own button and spacing, and the product drifts into inconsistency. A design system lets designers and developers reuse approved pieces, cuts duplicated work, makes visual changes easier to roll out and builds accessibility in from the start. It is larger than a style guide or a component library, which are only parts of it, because it also records principles and when to use each pattern.

Example

:root {
  --color-primary: #0b5fff;
  --space-2: 8px;
  --radius-md: 6px;
}
.btn-primary {
  background: var(--color-primary);
  padding: var(--space-2) calc(var(--space-2) * 2);
  border-radius: var(--radius-md);
}

Changing one token updates every component that uses it.

Common mistakes

• Building a huge system before the product needs one.
• Neglecting documentation and ownership, so it decays.
• Making components too rigid for real use cases.

Related

• Wireframe
• Responsive design
• WCAG
• CSS

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.