Establish Design System Context

You are establishing the full context for design system work on this project. Your job is to build a complete picture of what exists and what is needed before any decisions are made. Do not ask questions that can be answered by reading existing files. **Step 1 — Scan the project:** Before asking anything, read these files if they exist: - `LIVING_BRIEF.md` — existing positioning decisions and system state - `DESIGN.md` — existing token and visual language decisions - Any `package.json` or framework config — technology constraints - Any existing CSS or token files — what token naming and values are already in use - Any existing component files (spot-check 3–5) — current implementation patterns Summarize what you found. State explicitly: which of the questions below are already answered by reading the project. **Step 2 — Ask only what is missing:** Work through the following questions. Skip any already answered from Step 1. For any vague answer, ask for a specific clarification before moving on. 1. **Product type and context:** What kind of product is this? Who are the primary users and what are they trying to accomplish? 2. **Information density:** Is the UI primarily content-dense (tables, dashboards, data-heavy forms) or content-sparse (focused flows, marketing, simple consumer tasks)? Or does it need to serve both? 3. **Brand stance:** Where does this product sit on the expressive ↔ utilitarian spectrum? Expressive = personality, delight, visual distinctiveness. Utilitarian = clarity, efficiency, cognitive load reduction. 4. **Existing visual character (if any):** Is there an existing visual direction — a brand guide, a style tile, a reference design — that should be honored? Or is this a blank canvas? 5. **Color constraints:** An existing brand color (hex preferred)? Any colors that must be avoided? 6. **Theme requirements:** Light only, dark only, or both? If both — primary? 7. **Platform and scale:** Web, mobile, or cross-platform? One team or multiple? Estimated component count: small (<20), medium (20–60), large (60+)? 8. **Accessibility requirements:** Standard WCAG 2.2 AA, or a stronger requirement? 9. **Technology constraints:** Existing framework, CSS approach, design tool, or component library? Any constraints on token format or build tooling? **Step 3 — Produce the context document:** Write or update `LIVING_BRIEF.md` at the project root with this structure: ``` # LIVING_BRIEF.md *Per-project state document. Read at session start; append to at session end.* --- ## 1. Project Identity **Product:** [name and one-sentence description] **Audience:** [who uses it and what they are trying to do] **Density:** [content-dense / content-sparse / balanced] **Theme:** [light only / dark only / both — primary: light/dark] **Stance:** [expressive ↔ utilitarian placement and brief rationale] **Technology:** [framework, CSS approach, design tool] --- ## 2. Key Decisions **Color:** [existing brand color or TBD] **Typography:** [existing typeface decisions or TBD] **Spacing:** [to be determined] **Shape:** [to be determined] **Motion:** [to be determined] **Tokens:** [format and build tooling or TBD] --- ## 3. Current State **Token files:** [list or "none yet"] **Components implemented:** [list or "none yet"] **Components stubbed:** [list or "none yet"] **Known gaps:** [what is missing] --- ## 4. Open Questions - [ ] [Any unresolved questions from Step 2] --- ## 5. Decision Log *[today's date] — Context established — [one-line summary of key findings]* ``` **Step 4 — Confirm readiness:** State: "Context established. Here is what I found / here is what you told me. The next step is [positioning-brief / establish-visual-language] depending on whether a visual direction already exists." ---