UI Redesign v2.0: "Golden Extraction" Theme

[hessius]

UI Redesign v2.0: "Golden Extraction" Theme

🎨 Context & Motivation

The current high-contrast interface (#000000 + #FF9F1C) has been identified as having unintended visual associations and feels too utilitarian. We aim to transition MeticAI to a premium, organic aesthetic that reflects the warmth and depth of espresso brewing.

The new design language, dubbed "Golden Extraction", focuses on deep espresso tones, metallic gold gradients, and fluid glassmorphism to create a modern, high-end user experience.

Core Pillars

1. Liquid Depth: Backgrounds should feel deep and rich (Charcoal/Espresso), not flat black.
2. Glassmorphism: Use frosted glass layers (backdrop-filter) to establish hierarchy.
3. Fluidity: Buttons and elements should have subtle glows and smooth transitions.

Color Palette updates

• Global Background: Deep Espresso (#12100E) instead of Pure Black.
• Primary Action: Liquid Gold Gradient (Linear gradient from #FFC107 to #FF6F00) instead of flat Orange.
• Headers: Steamed Milk (#F5F5F3) for softer contrast.
• Body Text: Warm Grey (#D4D4D4).

✅ Implementation Checklist

1. Global Styles & Variables

• Update tailwind.config.js or global CSS variables with the new palette.
• Set global body background to #12100E.
• Implement ambient background blobs (animated blurred orbs) behind the UI layer.

2. Component Refactoring

• Cards: Create a reusable .glass-card class/component:
  • Background: rgba(255, 255, 255, 0.04)
  • Blur: backdrop-filter: blur(16px)
  • Border: Thin 1px translucent border.
• Buttons: Replace all primary buttons with the "Liquid" style:
  • Gradient background.
  • Inner highlight shadow (inset 0 1px 0 rgba(255, 255, 255, 0.3)).
  • Text color: #2E221B (Deep Brown) for contrast.
• Inputs: Update form fields to use a darker background rgba(0,0,0,0.3) to denote depth.

3. Page Updates

• Update Home / Dashboard to use glass containers.
• Update Profile Catalogue list items to use staggered entry animations.
• Update Profile Generator form to use the new input styles.

4. Polish & Assets

• Replace the app icon/logo with the new white/gold glyph version?
• Add hover transitions (brightness increase + shadow expansion) to interactive elements.

🔗 Resources

• MeticAI Design System.html