# Your design system on Web Awesome Web Awesome is the foundation. A project's own design system is the **delta** on top of it: which theme and palette it picked, which tokens it overrides, the house recipes it built from components, and the conventions it settled on. Your job in an existing project is to find that delta, follow it, and extend it in the same shape, so new work is indistinguishable from what the team already shipped. This matters because the most common way agents break a design system isn't misusing a token; it's never looking, then re-creating something the project already has. Reading the project first is cheaper than any amount of correction afterwards. **Contents** - [1. Discover before you build](#1-discover-before-you-build) - [2. Where customizations live](#2-where-customizations-live) - [3. Extend without forking](#3-extend-without-forking) - [4. Keep a DESIGN.md for agents](#4-keep-a-designmd-for-agents) - [5. Optional guardrails](#5-optional-guardrails) - [Anti-patterns](#anti-patterns) --- ## 1. Discover before you build Spend the first minute of any task in an existing project answering these questions. Search the project (excluding `node_modules`, `dist`, and build output) and note what you find before generating anything. | Look for | Where | What it tells you | | ---------------------------------------------------------------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- | | `wa-theme-*`, `wa-palette-*`, `wa-brand-*`, `wa-light`/`wa-dark` | The class list on `` (or the root layout template) | The chosen theme, palette, brand hue, and color scheme. Use them; don't add a second theme class. | | `data-fa-kit-code` or `setKitCode(` | ``, the loader `