tfm_ainventory/.planning/phases/07.1-frontend-overhaul/PLAN.md

wave, depends_on, files_modified, autonomous

wave	depends_on	files_modified	autonomous
1	07-config-consolidation	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	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.