Build [v1.14.25]
This commit is contained in:
136
.planning/phases/07.1-frontend-overhaul/PLAN.md
Normal file
136
.planning/phases/07.1-frontend-overhaul/PLAN.md
Normal file
@@ -0,0 +1,136 @@
|
||||
---
|
||||
wave: 1
|
||||
depends_on: ["07-config-consolidation"]
|
||||
files_modified: [
|
||||
"frontend/tailwind.config.ts",
|
||||
"frontend/styles/globals.css",
|
||||
"frontend/components/ui/StatCard.tsx",
|
||||
"frontend/components/ui/Button.tsx",
|
||||
"frontend/components/ui/Input.tsx",
|
||||
"frontend/app/layout.tsx",
|
||||
"frontend/app/page.tsx",
|
||||
"AI_RULES.md"
|
||||
]
|
||||
autonomous: true
|
||||
---
|
||||
|
||||
# Phase 7.1: Frontend UI/UX Overhaul (Industrial Precision) - Implementation Plan
|
||||
|
||||
**Objective:** Implement the "Industrial Precision" design system from `DESIGN.md` across all frontend pages, ensuring high-contrast signaling, sharp corners (0px radius), and a technical, utilitarian aesthetic while maintaining compliance with mandatory typography rules.
|
||||
|
||||
**Success Criteria:**
|
||||
- Tailwind configuration updated with the new "Industrial Precision" color palette.
|
||||
- Global styles updated to enforce 0px border radius (sharp corners) for all components.
|
||||
- Typography updated to use "Space Grotesk" as the primary font.
|
||||
- Visual hierarchy achieved through size, color, and spacing (preserving the "NO BOLD" and "NO UPPERCASE" rules from AI_RULES.md).
|
||||
- StatCards, Buttons, and Inputs reflect the new brutalist/industrial aesthetic.
|
||||
- All pages (Dashboard, Inventory, Admin, Logs) updated to use the new container and margin system.
|
||||
|
||||
---
|
||||
|
||||
## Task 1: Update Tailwind Configuration [COMPLETED]
|
||||
|
||||
**Read First:**
|
||||
- `DESIGN.md` for color palette and spacing units.
|
||||
- `frontend/tailwind.config.ts` for current configuration.
|
||||
|
||||
**Action:**
|
||||
1. Update `tailwind.config.ts` with the "Industrial Precision" colors:
|
||||
- Primary: `#F58618` (Caution Orange)
|
||||
- Background: `#131313`
|
||||
- Surfaces: `#0A0A0A`, `#121212`, `#1A1A1A`
|
||||
2. Add "Space Grotesk" to the fontFamily configuration.
|
||||
3. Configure the spacing unit (4px) and 12-column grid.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- `tailwind.config.ts` includes the new color palette.
|
||||
- `Space Grotesk` is defined as the default sans font.
|
||||
- Spacing units are aligned with `DESIGN.md`.
|
||||
|
||||
---
|
||||
|
||||
## Task 2: Implement Global Sharp Edges & Borders
|
||||
|
||||
**Read First:**
|
||||
- `DESIGN.md` (Elevation & Depth, Shapes).
|
||||
- `frontend/styles/globals.css`.
|
||||
|
||||
**Action:**
|
||||
1. Update `globals.css` to set `border-radius: 0` globally or through Tailwind layer overrides.
|
||||
2. Implement the "Bold Borders" style: 1px or 2px solid borders for levels 1 and 2.
|
||||
3. Remove all shadows and blurs, replacing them with tonal layers as per `DESIGN.md`.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- UI components have sharp 90-degree corners.
|
||||
- Shadows are removed from the entire application.
|
||||
- Borders use the specified technical colors (`#222222`, `#F58618`).
|
||||
|
||||
---
|
||||
|
||||
## Task 3: Component-Level Overhaul (Buttons & Inputs)
|
||||
|
||||
**Read First:**
|
||||
- `DESIGN.md` (Components section).
|
||||
- `frontend/components/ui/Button.tsx` (if it exists, otherwise standard elements).
|
||||
- `frontend/components/ui/Input.tsx`.
|
||||
|
||||
**Action:**
|
||||
1. Update Button styles: Solid `#F58618` for primary, transparent with 1px border for secondary.
|
||||
2. Update Input styles: Darker background (`#000000`), bottom-only or full 1px border.
|
||||
3. Ensure no rounded corners and no bold text.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- Buttons and Inputs match the "Industrial Precision" visual style.
|
||||
- Active/Focus states use the Caution Orange border.
|
||||
|
||||
---
|
||||
|
||||
## Task 4: StatCard & Data Table Refinement
|
||||
|
||||
**Read First:**
|
||||
- `DESIGN.md` (StatCards, Data Tables).
|
||||
- `AI_RULES.md` (StatCard Typography Rule).
|
||||
- `frontend/components/ui/StatCard.tsx`.
|
||||
|
||||
**Action:**
|
||||
1. Refine StatCards to use high-contrast blocks and tight internal padding.
|
||||
2. Ensure numeric values match label size (as per AI_RULES.md) but use color for emphasis.
|
||||
3. Update Data Tables: remove zebra-striping, use 1px horizontal dividers, apply technical headers.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- StatCards provide high "glanceability" without overwhelming font sizes.
|
||||
- Data Tables reflect the "glass cockpit" philosophy with high information density.
|
||||
|
||||
---
|
||||
|
||||
## Task 5: Layout & Viewport Adjustments
|
||||
|
||||
**Read First:**
|
||||
- `DESIGN.md` (Layout & Spacing).
|
||||
- `frontend/app/layout.tsx`.
|
||||
- `frontend/app/page.tsx` and major route pages.
|
||||
|
||||
**Action:**
|
||||
1. Set the primary viewport margins (24px-32px).
|
||||
2. Ensure main containers use `max-w-7xl` (consistent with AI_RULES.md).
|
||||
3. Update page headers to match the unified icon box + title standard.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- Spacing is compressed internally but framed by generous outer margins.
|
||||
- All pages feel consistent with the "high-end command center" aesthetic.
|
||||
|
||||
---
|
||||
|
||||
## Task 6: Final Audit & Rule Alignment
|
||||
|
||||
**Read First:**
|
||||
- `AI_RULES.md` and `GEMINI.md`.
|
||||
|
||||
**Action:**
|
||||
1. Audit the new UI for any accidental BOLD or UPPERCASE text.
|
||||
2. Re-verify contrast ratios (7:1 target for status-critical text).
|
||||
3. Ensure "Lucide Icons" are used exclusively.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- 100% compliance with AI_RULES.md.
|
||||
- Visual style perfectly aligns with `DESIGN.md` spirit.
|
||||
Reference in New Issue
Block a user