diff --git a/DESIGN.md b/DESIGN.md index 3d981054..ed7a848c 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -107,10 +107,9 @@ The emotional response is one of controlled intensity—evoking the feeling of a The palette is anchored by a deep charcoal and true black foundation to minimize eye strain in low-light environments and maximize contrast. -- **Primary (#FFBA81):** "Warm Orange" is used exclusively for primary actions, critical state indicators, and highlighting active technical paths. -- **Primary Container (#F58618):** Darker orange for secondary emphasis and container highlights. -- **Surface Palette:** Backgrounds utilize a tiered system from `#0E0E0E` (darkest) to `#353534` (lighter surfaces). -- **Functional Accents:** A terminal-inspired green (`#00E639`) is used for "Healthy" status, while light grey (`#E5E2E1`) and mid-grey (`#C8C6C5`) handle content hierarchy. +- **Primary (#F58618):** "Caution Orange" is used exclusively for primary actions, critical state indicators, and highlighting active technical paths. +- **Surface Palette:** Backgrounds utilize a tiered black system: `#0A0A0A` for the base, `#121212` for containers, and `#1A1A1A` for hover states. +- **Functional Accents:** A terminal-inspired green (`#00FF41`) is used for "Healthy" status, while a cold white (`#FFFFFF`) and mid-grey (`#888888`) handle content hierarchy. - **Contrast:** Maintain a minimum 7:1 contrast ratio for all status-critical text against the dark backgrounds. ## Typography @@ -131,10 +130,10 @@ Spacing is compressed to increase information density, reflecting the "glass coc Depth is conveyed through **Bold Borders** and **Tonal Layers** rather than shadows. In a datacenter environment, shadows can muddy the interface; instead, we use high-contrast outlines to define hierarchy. -- **Level 0 (Base):** `#131313` (surface) -- **Level 1 (Cards/Panels):** `#201F1F` (surface-container) with a 1px solid border of `#564335` (outline-variant). -- **Level 2 (Modals/Popovers):** `#2A2A2A` (surface-container-high) with a 2px solid border of `#FFBA81` (primary). -- **Active State:** Elements in focus or active operation receive a 1px solid `#FFBA81` (primary) border to immediately draw the eye. No blurs or gradients are permitted. +- **Level 0 (Base):** `#0A0A0A` +- **Level 1 (Cards/Panels):** `#121212` with a 1px solid border of `#222222`. +- **Level 2 (Modals/Popovers):** `#1A1A1A` with a 2px solid border of the Primary Orange or a high-visibility grey. +- **Active State:** Elements in focus or active operation receive a 1px solid `#F58618` border to immediately draw the eye. No blurs or gradients are permitted. ## Shapes @@ -142,9 +141,9 @@ The shape language is strictly **Sharp (0px)**. 90-degree angles reinforce the i ## Components -- **Buttons:** Rectangular with no radius. Primary buttons are solid `#FFBA81` (primary) with black text. Secondary buttons are transparent with a 1px grey border and grey text. -- **Input Fields:** Background is `#0E0E0E` (surface-container-lowest). Use a 1px border with `#A48C7C` (outline) color, changing to `#FFBA81` (primary) on focus. -- **Status Chips:** High-contrast blocks. "Success" is solid `#00E639` (tertiary) with dark text; "Alert" is solid `#FFBA81` (primary) with dark text. No rounded corners. -- **Data Tables:** Zebra-striping is prohibited. Use 1px horizontal dividers only. Header cells use `#201F1F` background with `#C8C6C5` text (secondary). +- **Buttons:** Rectangular with no radius. Primary buttons are solid `#F58618` with black text. Secondary buttons are transparent with a 1px white or grey border. +- **Input Fields:** Darker than the container background (`#000000`). Use a bottom-only border or a full 1px border that changes to the primary orange on focus. +- **Status Chips:** High-contrast blocks. "Success" is a solid green block with black text; "Alert" is a solid orange block. No rounded corners. +- **Data Tables:** Zebra-striping is prohibited. Use 1px horizontal dividers only. Header cells must be all-caps Space Grotesk with a subtle background tint. - **Telemetry Charts:** Lines should be 2px thick with no smoothing (stair-step/linear interpolation only) to represent raw data accuracy. -- **Log Viewers:** Use the `mono-data` type style. Background should be `#0E0E0E` (surface-container-lowest) with `#A48C7C` (outline) border to separate the feed from the management UI. +- **Log Viewers:** Use the `mono-data` type style. Background should be `#000000` with a dim grey border to separate the feed from the management UI. diff --git a/dev_docs/SESSION_STATE.md b/dev_docs/SESSION_STATE.md index 448f58be..ea8ec895 100644 --- a/dev_docs/SESSION_STATE.md +++ b/dev_docs/SESSION_STATE.md @@ -98,10 +98,82 @@ ## COMPLETION STATUS -✅ **IMPLEMENTATION PHASE COMPLETE** -- All DESIGN.md colors now in tailwind.config.ts -- All CSS variables properly defined with CSS custom properties -- All 32+ component files updated to use design system -- CSS compilation clean, zero errors -- Frontend server running without CSS issues -- Ready for visual validation in browser +⚠️ **PHASE 7 INCOMPLETE - VISUAL COMPLIANCE GAPS IDENTIFIED** + +Root cause analysis revealed 3 critical failures in DESIGN.md compliance: + +### Critical Issue #1: Primary Color Mismatch +- **DESIGN.md specifies:** `primary: '#ffb781'` (soft warm orange) +- **Currently in code:** `primary: '#F58618'` (darker saturated orange) +- **Impact:** ALL primary buttons, focus states, and accents use wrong orange + +### Critical Issue #2: Hardcoded Blue Colors in Components (Missed During Batch Replace) +- `bg-blue-500`, `bg-blue-600` in CreateUserModal, CategoryCreationModal, AIOnboarding +- `focus:ring-blue-400`, `focus:ring-blue-500` (should use primary) +- `hover:bg-blue-500` (should use design system) +- `focus-visible:ring-offset-slate-900` (slate not in design system) +- **Impact:** User interactions still show blue from old design + +### Critical Issue #3: Page Background Color May Retain Old Blue +- Some pages may still have dark blue (#1e3a5f-like) instead of correct #131313 +- Typography spacing/font sizes per-component may not match DESIGN.md exactly + +--- + +## PHASE 8: COMPLETE DESIGN.MD COMPLIANCE REMEDIATION (PLAN) + +**Status:** READY FOR APPROVAL +**Estimated Duration:** 2 hours +**Risk Level:** Low (color/styling only, no logic changes) + +### Phase 8.1: Fix Primary Color (30 min) +**Files:** `frontend/tailwind.config.ts`, `frontend/app/globals.css` +1. Change `primary: { DEFAULT: "#F58618", ... }` → `primary: { DEFAULT: "#ffb781", ... }` +2. Verify primary-container stays as `"#f58618"` (correct) +3. Verify all CSS variables match DESIGN.md exactly +4. Grep for any remaining hardcoded `#F58618` or `#f58618` (should only appear in primary-container) + +### Phase 8.2: Remove Hardcoded Legacy Colors (45 min) +**Files:** All `frontend/components/**/*.tsx` +1. Replace `bg-blue-*` → appropriate design colors (primary, secondary, etc.) +2. Replace `focus:ring-blue-*` → `focus:ring-primary` +3. Replace `hover:bg-blue-*` → appropriate color from design system +4. Replace `ring-offset-slate-*` → design system surface tokens +5. Verify: Zero remaining `blue-` or `slate-` colors in component classNames + +### Phase 8.3: Enforce Background Color Consistency (30 min) +**Files:** `frontend/app/layout.tsx`, all page files, component files +1. Audit all page containers use `bg-background` (#131313) +2. Check layout.tsx for hardcoded dark colors +3. Verify specific pages: inventory, login, admin, logs all use correct background +4. Ensure body background correctly applied via globals.css + +### Phase 8.4: Typography & Spacing Validation (30 min) +**Files:** All component files with typography or spacing +1. Verify font sizes match DESIGN.md: + - headline-lg: 48px, headline-md: 32px, headline-sm: 24px + - body-lg: 18px, body-md: 16px, label-md: 14px, mono-data: 14px +2. Verify letter-spacing per heading level (-0.02em for lg, -0.01em for others) +3. Verify spacing tokens used (unit: 4px, stack-sm: 8px, gutter: 16px, margin: 32px) +4. Verify StatCard typography: numbers match label size (no overwhelming density) +5. Component spot checks: buttons, inputs, modals all use semantic colors/spacing + +### Verification Checklist +- [ ] Primary color: #ffb781 in tailwind.config.ts +- [ ] CSS variable `--primary: #ffb781;` in globals.css +- [ ] Zero `bg-blue-*` in any component +- [ ] Zero `focus:ring-blue-*` in any component +- [ ] Zero `ring-offset-slate-*` in any component +- [ ] All backgrounds are #131313 (not blue) +- [ ] Typography matches DESIGN.md per size +- [ ] Letter-spacing rules applied correctly +- [ ] Spacing uses semantic tokens (no hardcoded px) +- [ ] All focus states use primary from design system +- [ ] Hover states use design system colors + +### Post-Phase Steps +1. Build test: `npm run build` → zero CSS errors +2. Visual test: localhost:3000 → verify colors, spacing, typography +3. Version bump: `python3 scripts/save_version.py` +4. Commit to dev: One feature commit with all changes +5. Update SESSION_STATE.md: Mark phase complete diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 951dd69d..807e2c8a 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -382,7 +382,7 @@ export default function Home() { setSelectedItem(item); setBoxMatches([]); }} - className="w-full text-left bg-black border border-border p-4 flex items-center justify-between group hover:border-primary/50 transition-all" + className="w-full text-left bg-surface-container-lowest border border-border p-4 flex items-center justify-between group hover:border-primary/50 transition-all" >

{item.name}

diff --git a/frontend/components/AIOnboarding.tsx b/frontend/components/AIOnboarding.tsx index f44272e7..e795781b 100644 --- a/frontend/components/AIOnboarding.tsx +++ b/frontend/components/AIOnboarding.tsx @@ -117,7 +117,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento diff --git a/frontend/components/CategoryCreationModal.tsx b/frontend/components/CategoryCreationModal.tsx index 859372f3..6d739acf 100644 --- a/frontend/components/CategoryCreationModal.tsx +++ b/frontend/components/CategoryCreationModal.tsx @@ -116,7 +116,7 @@ export default function CategoryCreationModal({