use-the-design-systemlisted

# Use the design system Most existing projects already decided what a button looks like, what the spacing scale is, and which colors are allowed. When you drop in a freshly hand-rolled component with its own hardcoded colors and padding, it looks slightly off, it duplicates work, and it drifts from the rest of the app. The system is there so the UI stays consistent. Use it before you build anything new. The rule: in an existing codebase, find the UI system first and build with it. Hand-rolling is the last resort, not the default. ## Look before you build Before writing a new component, scan the project for what already exists: - A components folder: `components/`, `src/ui/`, `components/ui/`, a shared package. Is there already a `Button`, `Modal`, `Input`, `Card`? - A component library in `package.json`: shadcn/ui, MUI, Chakra, Mantine, Radix, Ant, Headless UI, DaisyUI, Bootstrap. Use its components and its API. - Design tokens and theme: CSS custom properties (`--color-primary`, spacing vars), a `theme.ts`, a Tailwind config with custom colors and scales. - Utility conventions: Tailwind classes, CSS modules, styled-components. Match how the rest of the code styles things. - Existing patterns: open a couple of nearby components and copy their structure, prop shapes, and naming. ## Build with it, not around it - Reuse the existing component instead of making a new one that does the same job. - Pull colors, spacing, radius, and typography from the tokens or the