Update DESIGN.md

DESIGN.md

@@ -0,0 +1,58 @@
+# Design Guide
+
+<!-- Generated by CodePress style analysis. -->
+
+SECTION 1: Primary Styling System
+‣ Brand feel / mood: Bare-bones Create React App demo for a single npm component, with a dark utilitarian header, plain sans-serif body type, and a few saturated accent swatches used to show off the loader.
+‣ One-word system: Plain CSS — each component imports its own hand-written .css file with global class names (App.css, Watermark.css, index.css); no Tailwind, no CSS-in-JS, no preprocessor.
+‣ Breakpoints found in the repo: None defined; no @media queries appear in src/*.css. Unknown.
+
+SECTION 2: Other Styling Signals
+‣ Plain global CSS via className: ~100% of styling.
+‣ Inline CSS-in-JS / styled-components / Tailwind / Sass: 0%.
+‣ External web fonts via <link> in public/index.html (Roboto Mono) plus a FontAwesome script tag: incidental.
+Evidence:
+‣ src/App.css: `.App-header { background-color: #222; height: 150px; padding: 20px; color: white; }`
+‣ src/App.css: `.redStyle { margin-bottom: 50px; font-size: 20px; color: #e53030; }`
+‣ src/Watermark.css: `.watermark { font-family: Roboto Mono, monospace; font-weight: 500; }`
+
+SECTION 3: Repo-Level UI Context
+‣ Framework: React (react ^16.0.0, class components with createElement; no Next.js / CRA-ejected webpack config).
+‣ Language split: JavaScript only (.js / .jsx, no .ts or .tsx anywhere).
+‣ UI libraries: None. No shadcn/ui, Radix, MUI, Bootstrap, Chakra, etc. Only ambient FontAwesome <script> in public/index.html.
+‣ Pre-processors: None (.scss / .less absent). CSS-in-JS libraries: None.
+‣ State libraries: None. Local component state via this.setState only; no redux/zustand/recoil/react-query.
+‣ Color palette:
+  - Neutral dark: #222 (App-header background), #000 (Watermark text), white (header text, slider knob).
+  - Neutral gray: #ccc (slider off state).
+  - Accent red: #e53030 (.redStyle).
+  - Accent green: #63ba1b (.greenStyle).
+  - Accent purple: #a22dbc (.dotStyle).
+  - Accent magenta/pink: #ff0084 (.deploy in Watermark).
+  - Accent blue: #2196F3 (slider checked / focus glow).
+  - Tokens live as hard-coded hex literals inside src/App.css and src/Watermark.css; no Tailwind config, no CSS custom properties, no SCSS variables.
+‣ Typography:
+  - Primary family: `sans-serif` (browser default, set globally in src/index.css `body { font-family: sans-serif; }`).
+  - Secondary family: `Roboto Mono, monospace` (loaded via Google Fonts <link>, used only in .watermark).
+  - Scale in use: ad-hoc px and em values — 1.5em (App-title), 18px (.optionTextInput), 20px (.redStyle), 100px (.dotStyle). No systematic scale.
+  - Notable conventions: uppercase via `text-transform: uppercase` on .deploy and .hello; otherwise no shared heading/body conventions.
+‣ Spacing & layout:
+  - Spacing scale: none — raw px values (5, 20, 30, 34, 50 px) chosen per rule.
+  - Container widths: percentage-based (.inputContainer { width: 50% }, .textContainer { width: 60% }); no max-width tokens.
+  - Layout primitives: flexbox via `display: flex` with `flex-direction: column` and `justify-content: space-around`; no grid, no gap utilities, no responsive breakpoints.
+‣ Shape & elevation:
+  - Corner radius: only on the toggle switch — `border-radius: 34px` for the pill track and `border-radius: 50%` for the knob; everything else is square.
+  - Depth: flat. One 1px solid border on .textContainer; one `box-shadow: 0 0 1px #2196F3` focus ring on the toggle; no elevation system, no shadow tokens.
+‣ Component patterns:
+  - Header bar: `<header className="App-header">` with `background-color: #222; height: 150px; padding: 20px; color: white;` and a centered `<h1 className="App-title">` at `font-size: 1.5em`.
+  - Number input: `<input className="optionTextInput" type="number" />` styled `height: 34px; width: 170px; font-size: 18px; box-sizing: border-box; padding: 5px;` paired with a sibling `<label>` inside a `.input` column flex container.
+  - Toggle switch: `<label className="switch"><input type="checkbox" /><span className="slider round"></span></label>` — 70×34 pill, gray #ccc off / blue #2196F3 on, knob translates 36px on `:checked`, transition `.4s`.
+  - Demo text card: `<div className="textContainer">` with `border: 1px solid; width: 60%; padding: 20px;` wrapping per-row demo `<div>`s (.noStyle / .redStyle / .greenStyle) each with `margin-bottom: 50px` for vertical rhythm.
+
+SECTION 4: Guidance for Downstream LLM
+‣ Do keep new styles in plain hand-written CSS files imported via `import './X.css'` next to the component; don't introduce Tailwind, styled-components, CSS Modules, or SCSS — none exist in this repo.
+‣ Do reuse the existing hex literals (#222 dark, #2196F3 toggle blue, #e53030 red, #63ba1b green, #a22dbc purple, #ff0084 magenta) rather than adding new brand colors or a CSS custom-property token layer.
+‣ Do follow the existing input/toggle recipes verbatim (`.optionTextInput` 34px tall, `.switch` 70×34 with `.slider.round`) for any new form controls; don't hand-roll a different toggle or input size.
+‣ Do build layouts with `display: flex` + `flex-direction` + percentage widths the way `.bodyContainer` / `.inputContainer` already do; don't introduce CSS Grid, container queries, or a responsive breakpoint system — none are configured.
+‣ Don't add `box-shadow`, gradients, or new `border-radius` values beyond the toggle's 34px / 50% — the rest of the UI is intentionally flat with at most a 1px solid border.
+‣ Don't add inline `style={{ ... }}` props or new font families; keep typography on the global `sans-serif` body default, and reserve `Roboto Mono` for watermark-style monospace accents only.