137 lines
4.7 KiB
Markdown
137 lines
4.7 KiB
Markdown
---
|
|
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 [COMPLETED]
|
|
|
|
**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.
|