Design System
Reusable components, patterns, tokens, guidelines — consistent UI।
Famous Examples
Material (Google), Ant Design, Carbon (IBM), Polaris (Shopify), Lightning (Salesforce)।
Design Tokens ⭐
{
"color": { "primary": "#3B82F6", "danger": "#EF4444" },
"spacing": { "xs":"4px", "md":"16px", "lg":"24px" },
"radius": { "sm":"4px", "full":"9999px" }
}
/* CSS variables */
:root { --color-primary: #3B82F6; --spacing-md: 16px; }
Atomic Design (Brad Frost) ⭐
Atoms (Button, Input)
→ Molecules (SearchBar)
→ Organisms (Header)
→ Templates (Page layout)
→ Pages (with real data)
Component API Design
<Button variant="primary|secondary" size="sm|md|lg"
loading disabled iconLeft={<Icon/>}>Save</Button>
Sensible defaults, boolean props, variants, composition over config, forward ref, accept className।
Storybook ⭐
export default { title: 'Components/Button', component: Button };
export const Primary = { args: { variant: 'primary', children: 'Click' } };
export const Loading = { args: { loading: true } };
Component isolation, visual testing, documentation।
Theming / Dark Mode
:root[data-theme="light"] { --bg: #fff; --text: #111; }
:root[data-theme="dark"] { --bg: #111; --text: #f5f5f5; }
document.documentElement.dataset.theme = isDark ? "dark" : "light";
Tailwind
<button class="px-4 py-2 bg-blue-500 text-white rounded
hover:bg-blue-600 disabled:opacity-50">Click</button>
Popular Libs
shadcn/ui (Radix+Tailwind), MUI, Chakra, Mantine, Ant Design, Headless UI।
Maintenance
Semver, CHANGELOG, deprecation plan, visual regression testing (Chromatic)।