From 0135baf3a75f10618e52f6a5119351fba2da9672 Mon Sep 17 00:00:00 2001
From: "codepress-dev[bot]"
 <202219725+codepress-dev[bot]@users.noreply.github.com>
Date: Fri, 12 Jun 2026 00:21:29 +0000
Subject: [PATCH] Update DESIGN.md

---
 DESIGN.md | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 DESIGN.md

diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..74bf65d
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,37 @@
+# Design Guide
+
+<!-- Generated by CodePress style analysis. -->
+
+SECTION 1: Primary Styling System
+‣ Brand feel / mood: Bare Create React App starter scaffold with a single dark header band on a white page, default sans-serif type, and no deliberate visual identity yet.
+‣ Mixed — the only component (`Home.js`) styles itself with the Aphrodite CSS-in-JS library (`StyleSheet.create` + `css()`), while layout and global rules live in plain hand-written CSS files (`index.css`, `Home.css`), so neither approach clearly dominates.
+‣ Breakpoints found in the repo: None defined. Aphrodite has no built-in breakpoint set (media queries would be authored inline per style), and no `@media` rules exist anywhere in the code, so effective breakpoints are Unknown.
+
+SECTION 2: Other Styling Signals
+‣ Aphrodite CSS-in-JS — ~50% (the only React component's visual styling: header band, intro text).
+‣ Plain CSS files — ~50% (`index.css` global body reset/font, `Home.css` `.Home` alignment + logo keyframe animation).
+‣ Inline style objects — 0% (none present; Aphrodite style objects are collected via `StyleSheet.create`, not applied as raw `style={}`).
+Evidence snippets:
+‣ `header: { backgroundColor: '#222', height: '150px', padding: '20px', color: 'white' }`
+‣ `<div className={css(styles.header)}><h2>Welcome to React</h2></div>`
+‣ `body { margin: 0; padding: 0; font-family: sans-serif; }`
+
+SECTION 3: Repo-Level UI Context
+‣ Framework: React (class components, `react` ^15.6.1, bootstrapped from Create React App / `react-scripts` 1.0.10).
+‣ Language split: JavaScript (no TypeScript files or config present).
+‣ UI libraries: None (no shadcn/ui, Radix, MUI, Bootstrap, or component kit; `codemirror` is a dev dependency only and is not used in any source file).
+‣ Pre-processors and CSS-in-JS: No `.scss`/`.less`. CSS-in-JS via Aphrodite ^1.2.3. Build tooling includes `browserify-css`/`cssify`/`urify` (Gulp bundling), not preprocessing.
+‣ State libraries: Redux ^3.7.2 with react-redux ^5.0.5, redux-thunk ^2.2.0, redux-logger ^3.0.6, and react-router-redux. No zustand/recoil/react-query.
+‣ Color palette: primary/brand — dark `#222` (header background, in `Home.js` Aphrodite styles); neutral text — `white` on the dark header and default black body text; surface/background — `#ffffff` (`manifest.json` `background_color`); document theme — `#000000` (`<meta name="theme-color">` and manifest `theme_color`). No accent or secondary role defined. No token system — colors are hard-coded literals inside the component's `StyleSheet.create`; there are no CSS custom properties, SCSS variables, or Tailwind config keys.
+‣ Typography: primary font family is the browser default `sans-serif` (`index.css` `body`). No monospace or display face configured (inline `<code>` falls back to the UA default). Scale: only one explicit size, the keyword `font-size: large` on the intro paragraph; headings rely on the browser default `<h2>` size. No modular scale, tracking, or weight conventions defined.
+‣ Spacing & layout: no spacing scale or tokens. Concrete values are one-off literals — header `padding: 20px` and `height: 150px`. Layout is centered via `.Home { text-align: center }`; there is no flexbox, grid, container, or max-width primitive in use.
+‣ Shape & elevation: Unknown — no `border-radius`, no `box-shadow`, no borders, and no tonal elevation layers anywhere. Surfaces are flat color blocks (the `#222` header on white). The only motion is a `Home-logo-spin` keyframe (360° rotate, infinite 20s linear) defined in `Home.css` but not attached to any rendered element.
+‣ Component patterns: Header band — `const styles = StyleSheet.create({ header: { backgroundColor: '#222', height: '150px', padding: '20px', color: 'white' } })` then `<div className={css(styles.header)}>`. Body text — `introText: { 'font-size': 'large' }` applied via `<p className={css(styles.introText)}>`. Page container — plain class `<div className="Home">` styled by `.Home { text-align: center }` in `Home.css`. There are no Button, Input, Form field, or Card components in the repo.
+
+SECTION 4: Guidance for Downstream LLM
+‣ Do style new React components with Aphrodite to match the one existing component — define styles via `StyleSheet.create({...})` and apply them with `className={css(styles.x)}`, rather than introducing raw `style={{...}}` inline objects.
+‣ Do keep structural/global rules (resets, page-level alignment, keyframes) in co-located plain CSS files like `Home.css` and `index.css`, the pattern already in place.
+‣ Do reuse the existing literals when extending the current look — dark `#222` for header/surfaces, `white` text on dark, `#ffffff` page background, and the `sans-serif` body font — since there is no token layer to reference.
+‣ Don't introduce a new styling system (Tailwind, styled-components, Sass, MUI, Bootstrap) — none exists here and adding one would fragment a two-file, single-component codebase.
+‣ Don't invent radius, shadow, or elevation scales: the current UI is entirely flat with no `border-radius` or `box-shadow`, so keep surfaces flat unless the user explicitly asks to establish those tokens.
+‣ Don't assume a spacing or type scale exists — values like `20px`, `150px`, and `font-size: large` are ad hoc one-offs; if a contributor needs consistency, establish an explicit scale first rather than guessing one.