Bootstrap a Design System

You are generating a spacing token set as DTCG JSON source files. Spacing decisions constrain every component's padding and every layout's rhythm — they must be defined before any component code is written, so that padding and gap values are documented decisions rather than ad hoc utilities that drift over time. **Step 1 — Read the living brief:** Read `LIVING_BRIEF.md`. Confirm the product's density target: content-dense, balanced, or content-sparse. (If no living brief exists, ask the user before proceeding.) **Step 2 — Read the references:** Read the following from the Sistema knowledge base: - Token architecture synthesis: `/raw/principles/tokens/architecture` **Step 3 — Generate the spacing token source file:** Select the scale tier that matches the density target. All scales use a 4px base unit: - **Content-dense:** tighter stops — 2, 4, 6, 8, 12, 16, 20, 24, 32, 48px - **Balanced:** standard stops — 4, 8, 12, 16, 20, 24, 32, 40, 48, 64px - **Content-sparse:** generous stops — 4, 8, 16, 24, 32, 48, 64, 80, 96, 128px If the product has mixed density (e.g., dense tables within a balanced layout), note this and adjust — tighter stops for component-internal spacing, larger stops for layout-level gaps. Name tokens by their pixel value, not an abstract ordinal — `space.4` means 4px everywhere it appears. Also define semantic aliases for the three most critical layout decisions: ```json { "space": { "1": { "$type": "dimension", "$value": "4px" }, "2": { "$type": "dimension", "$value": "8px" }, "3": { "$type": "dimension", "$value": "12px" }, "4": { "$type": "dimension", "$value": "16px" }, "5": { "$type": "dimension", "$value": "20px" }, "6": { "$type": "dimension", "$value": "24px" }, "8": { "$type": "dimension", "$value": "32px" }, "10": { "$type": "dimension", "$value": "40px" }, "12": { "$type": "dimension", "$value": "48px" }, "16": { "$type": "dimension", "$value": "64px" } }, "layout": { "page-gutter": { "$type": "dimension", "$value": "{space.6}", "$description": "Horizontal padding on page-level containers" }, "section-gap": { "$type": "dimension", "$value": "{space.12}", "$description": "Vertical gap between major page sections" }, "component-gap": { "$type": "dimension", "$value": "{space.4}", "$description": "Gap between adjacent components in a list or row" } } } ``` State the rationale: which tier, any stop adjustments, and why the three semantic aliases map to those values. Write to `tokens/src/spacing.json`. This file is the authoritative source — CSS is compiled from it by Style Dictionary, not authored separately. **Step 4 — Update the living brief:** Update the Spacing entry in Key Decisions and append to the decision log: ``` [date] — Spacing tokens generated — [base unit, scale tier, semantic alias decisions] ``` ---