Industrial Dark UI Overhaul: Updated colors, typography, navigation, and component styling across the application
This commit is contained in:
142
.aiideas
142
.aiideas
@@ -1,117 +1,103 @@
|
||||
Rolle: Du bist ein Senior Frontend Engineer(React / Tailwind) und UI / UX Designer.Ziel: Wir machen ein umfassendes UI - Overhaul einer bestehenden Whisky - App("WhiskyVault") und benennen sie um in "DramLog".Das Ziel ist eine Premium - Mobile - Experience(Dark Mode, Gold Akzente, Serif Fonts).
|
||||
Rolle: Du bist ein UI - Designer mit Fokus auf "Modern Minimalist" Design(Stilrichtung: Linear, Teenage Engineering, Vercel).Ziel: Redesign der Whisky - App "DramLog".Wir verabschieden uns vom klassischen "Luxus-Look"(Gold / Serifen) und nutzen einen "Industrial Dark" Stil.
|
||||
|
||||
Tech Stack: React, Tailwind CSS, Lucide - React Icons.
|
||||
1. Globales Design - System(Anwenden auf alle Views)
|
||||
Design Rules & Tokens:
|
||||
|
||||
Branding: App Name ist "DramLog".
|
||||
Color Palette(Tailwind):
|
||||
|
||||
Farben:
|
||||
Bg - App: bg - zinc - 950(Ein sehr dunkles, warmes Grau, kein hartes Schwarz).
|
||||
|
||||
Background: #0F1014(Deep Rich Black)
|
||||
Bg - Card: bg - zinc - 900(Deutlich abgesetzt vom Hintergrund).
|
||||
|
||||
Surface: #1A1B20(Card Backgrounds)
|
||||
Text - Primary: text - zinc - 50(Fast Weiß, hoher Kontrast).
|
||||
|
||||
Primary Accent: #C89D46(Whisky Amber / Gold)
|
||||
Text - Secondary: text - zinc - 400(Mittelgrau für Labels).
|
||||
|
||||
Text - Secondary: #8F9096
|
||||
Accent: text - orange - 500(Ein sattes, mattes Orange für Highlights) und bg - orange - 600 für Primary Buttons.Keine Verläufe / Gradients, sondern flache("flat") Farben.
|
||||
|
||||
Typografie:
|
||||
Typography:
|
||||
|
||||
Importiere und nutze Playfair Display(Serif) für: Überschriften(h1 - h3), Whisky - Namen auf Cards.
|
||||
Nutze Inter oder DM Sans für alles.
|
||||
|
||||
Nutze Inter(Sans) für: UI - Elemente, Labels, Fließtext, Daten.
|
||||
Headlines: font - bold tracking - tight(Enger Buchstabenabstand, wirkt kompakt und modern).
|
||||
|
||||
Shape: rounded - 2xl für Cards, rounded - full für Buttons.
|
||||
Labels: uppercase text - xs tracking - widest font - semibold(Technischer Look).
|
||||
|
||||
2. Spezifische Component Refactorings
|
||||
Component: Whisky Card(Clean Split):
|
||||
|
||||
A.Dashboard(Home View):
|
||||
Kein Text mehr über dem Bild!
|
||||
|
||||
Entferne die grauen Hintergründe der 4 oberen Statistik - Boxen.Zeige die Werte(Zahlen) groß in Playfair Display(Weiß) und die Labels klein darunter(Grau).Ordne sie in einem Grid oder einer flex - row mit justify - between an.
|
||||
Top: Bild(Aspect Ratio 4: 3 oder 16: 9), rounded - t - xl.
|
||||
|
||||
Benenne "Dein Bestand" um in "Collection".
|
||||
Bottom: Info - Block(p - 4 bg - zinc - 900 rounded - b - xl).
|
||||
|
||||
Mache die Listen - Einträge unter "Tasting Sessions" interaktiv.Entferne die sichtbaren Trash / Edit Buttons und nutze ein sauberes Listen - Layout.
|
||||
Inhalt: Whisky Name(Bold, White), darunter Destillerie(Orange, Small).
|
||||
|
||||
B.Whisky Card(Collection Grid):
|
||||
Tags: Kleine "Pills" mit bg - zinc - 800 text - zinc - 300.
|
||||
|
||||
Redesign der Card - Komponente.
|
||||
Component: Dashboard Stats:
|
||||
|
||||
Bild: Muss bis an den Rand gehen(w - full, kein Padding).
|
||||
Minimalistisch.Nur die Zahl(riesig, z.B.text - 4xl font - bold text - white) und darunter das Label(text - zinc - 500).
|
||||
|
||||
Overlay: Lege einen bg - gradient - to - t from - black via - black / 80 to - transparent über das untere Drittel des Bildes.
|
||||
Keine Boxen, keine Rahmen. "Data Ink Ratio" optimieren.
|
||||
|
||||
Text: Platziere Name(Serif) und Destillerie(Sans, Uppercase, Gold) weiß auf dem Bild im unteren Bereich(über dem Gradient).
|
||||
Component: Floating Navigation(The Capsule):
|
||||
|
||||
Tags: Mache Tags minimalistisch(bg - white / 10 backdrop - blur - sm text - xs border border - white / 10).
|
||||
Statt einer durchgehenden Leiste unten, nutze eine "Floating Capsule".
|
||||
|
||||
3. Die "Floating" Navigation(Core Feature)
|
||||
Eine abgerundete "Insel"(rounded - full) die ca. 20px über dem unteren Bildschirmrand schwebt.
|
||||
|
||||
Erstelle eine neue Komponente BottomNavigation.Sie ersetzt alle bisherigen Menüs.Sie muss am unteren Bildschirmrand fixiert sein.WICHTIG: Implementiere exakt dieses Layout - Pattern für den schwebenden Button:
|
||||
Breite: ca. 90 % des Screens oder max - w - md.
|
||||
|
||||
Farbe: bg - zinc - 800 / 90 backdrop - blur - md border border - zinc - 700.
|
||||
|
||||
Scan Button: In der Mitte der Kapsel, Kreis in bg - orange - 600(Flat, kein Schatten), weißes Icon.
|
||||
|
||||
Code - Snippet für die "Industrial Capsule Navigation":
|
||||
JavaScript
|
||||
|
||||
// Reference Implementation for BottomNavigation.jsx
|
||||
import { Home, Grid, Scan, User, Search } from 'lucide-react';
|
||||
import { Home, Grid, Scan, User } from 'lucide-react';
|
||||
|
||||
export const BottomNavigation = () => {
|
||||
export const NavigationCapsule = () => {
|
||||
return (
|
||||
<div className= "fixed bottom-0 left-0 w-full z-50" >
|
||||
{/* Background Container mit Glassmorphism */ }
|
||||
< div className = "relative bg-[#0F1014]/90 backdrop-blur-xl border-t border-white/10 pb-safe pt-2" >
|
||||
<div className= "fixed bottom-6 left-1/2 -translate-x-1/2 w-[90%] max-w-sm z-50" >
|
||||
<div className="flex items-center justify-between px-2 py-2 bg-zinc-900/90 backdrop-blur-lg border border-zinc-800 rounded-full shadow-2xl" >
|
||||
|
||||
<div className="flex justify-between items-end px-6 h-16" >
|
||||
|
||||
{/* Left Actions */ }
|
||||
< button className = "flex flex-col items-center gap-1 text-[#C89D46] w-12" >
|
||||
<Home size={ 24 } />
|
||||
< span className = "text-[10px] font-medium" > Home </span>
|
||||
</button>
|
||||
|
||||
< button className = "flex flex-col items-center gap-1 text-gray-500 hover:text-white w-12 transition-colors" >
|
||||
<Grid size={ 24 } />
|
||||
< span className = "text-[10px] font-medium" > Shelf </span>
|
||||
</button>
|
||||
|
||||
{/* Spacer für den Center Button */ }
|
||||
<div className="w-16" />
|
||||
|
||||
{/* Right Actions */ }
|
||||
< button className = "flex flex-col items-center gap-1 text-gray-500 hover:text-white w-12 transition-colors" >
|
||||
<Search size={ 24 } />
|
||||
< span className = "text-[10px] font-medium" > Search </span>
|
||||
{/* Left Item */ }
|
||||
< button className = "p-3 text-zinc-400 hover:text-white transition-colors" >
|
||||
<Home size={ 22 } strokeWidth = { 2.5} />
|
||||
</button>
|
||||
|
||||
< button className = "flex flex-col items-center gap-1 text-gray-500 hover:text-white w-12 transition-colors" >
|
||||
<User size={ 24 } />
|
||||
< span className = "text-[10px] font-medium" > Profile </span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* THE FLOATING MAGIC BUTTON */ }
|
||||
<div className="absolute -top-8 left-1/2 -translate-x-1/2" >
|
||||
<button
|
||||
className="flex items-center justify-center w-16 h-16 rounded-full
|
||||
bg - gradient - to - tr from - [#C89D46] to - [#E0B456]
|
||||
shadow - [0_0_20px_rgba(200, 157, 70, 0.4)]
|
||||
border - 4 border - [#0F1014]
|
||||
active: scale - 95 transition - transform duration - 200"
|
||||
aria - label="Scan Bottle"
|
||||
>
|
||||
<Scan color="#0F1014" size = { 32} strokeWidth = { 2} />
|
||||
{/* Left Item */ }
|
||||
<button className="p-3 text-zinc-400 hover:text-white transition-colors" >
|
||||
<Grid size={ 22 } strokeWidth = { 2.5} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/* PRIMARY ACTION - The "Industrial Button" */ }
|
||||
<button className="flex items-center justify-center w-14 h-14 rounded-full bg-orange-600 text-white hover:bg-orange-500 active:scale-95 transition-all mx-2" >
|
||||
<Scan size={ 26 } strokeWidth = { 2.5} />
|
||||
</button>
|
||||
|
||||
{/* Right Item */ }
|
||||
<button className="p-3 text-zinc-400 hover:text-white transition-colors" >
|
||||
<User size={ 22 } strokeWidth = { 2.5} />
|
||||
</button>
|
||||
|
||||
{/* Right Item (Settings/More) */ }
|
||||
<button className="p-3 text-zinc-400 hover:text-white transition-colors" >
|
||||
<div className="w-1 h-1 bg-current rounded-full mb-1" />
|
||||
<div className="w-1 h-1 bg-current rounded-full" />
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Aufgabe:
|
||||
Aufgabe: Setze die bestehenden Views(Dashboard und Liste) mit diesen neuen "Industrial Dark" Regeln um.Sorge für klare Kontraste durch zinc - 950 vs zinc - 900 Flächen.
|
||||
Was dieser Look ändert:
|
||||
|
||||
Implementiere das globale Styling(Fonts / Colors).
|
||||
Lesbarkeit: Durch den zinc - 900 Hintergrund der Karten hebt sich der weiße Text extrem gut ab.Kein "Text auf unruhigem Foto" - Problem mehr.
|
||||
|
||||
Baue die BottomNavigation ein(ersetze alte Navs).
|
||||
Modernität: Das "Pill" - Menü(Capsule) sieht aus wie bei modernen iOS Apps(Dynamic Island Ästhetik).
|
||||
|
||||
Passe die Dashboard View an den neuen "Clean Look" an.
|
||||
|
||||
Passe die WhiskyCard an den neuen "Editorial Look" an.
|
||||
Ehrlichkeit: Es versucht nicht, "altes Geld"(Gold / Serifen) zu imitieren, sondern wirkt wie ein modernes Werkzeug für Enthusiasten.
|
||||
Reference in New Issue
Block a user