---
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) [COMPLETED]

**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.