#design-system

Design a scalable SVG icon set for a design system. Guidelines: 1. Set up a pixel grid (24x24). 2. Define stroke width and corner radius. 3. Ensure visual consistency (filled vs outlined). 4. Organize naming convention (e.g., ic_home_outlined.svg). 5. Minimize anchor points. 6. Convert text and strokes to paths. 7. Test at multiple sizes (16px, 24px, 32px). 8. Export for multiple platforms (web, iOS, Android). Include icon grid template.

Build production-ready design system. Framework: 1. Define design tokens (colors, typography, spacing, shadows). 2. Create atomic components (buttons, inputs, cards, modals). 3. Build composite patterns (forms, navigation, data tables). 4. Document component API and usage guidelines. 5. Implement accessibility standards (WCAG 2.1 AA). 6. Set up Storybook for component showcase. 7. Create Figma library with auto-layout components. 8. Establish contribution and versioning guidelines. Include dark mode support and responsive breakpoints.

Document a complete design system in code. Components to include: 1. Typography scale (H1-H6, Body, Caption). 2. Color variables for Primary, Secondary, Error, Success. 3. Button set (Primary, Outline, Ghost, Sizes). 4. Modal/Dialog patterns. 5. Form inputs with error states. Use Storybook for documentation and Tailwind for utility-first implementation.

Build a framework-agnostic design system with Lit. Components: 1. Custom elements with @customElement decorator. 2. Reactive properties with @property. 3. Shadow DOM for style encapsulation. 4. Slots for content projection. 5. CSS custom properties for theming. 6. Event dispatching with CustomEvent. 7. Form-associated custom elements. 8. TypeScript for type safety. Package as npm library, document with web-component-analyzer, and test with @web/test-runner.

Document components effectively with Storybook 7. Setup: 1. CSF3 format for stories. 2. Autodocs for prop table generation. 3. Controls addon for prop manipulation. 4. Actions addon for event logging. 5. Interactions testing with @storybook/test. 6. Accessibility checks with a11y addon. 7. Design tokens documentation. 8. MDX for custom documentation pages. Use composition for multiple projects and implement visual testing with Chromatic.