103 lines
4.1 KiB
Plaintext
103 lines
4.1 KiB
Plaintext
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.
|
|
|
|
Design Rules & Tokens:
|
|
|
|
Color Palette(Tailwind):
|
|
|
|
Bg - App: bg - zinc - 950(Ein sehr dunkles, warmes Grau, kein hartes Schwarz).
|
|
|
|
Bg - Card: bg - zinc - 900(Deutlich abgesetzt vom Hintergrund).
|
|
|
|
Text - Primary: text - zinc - 50(Fast Weiß, hoher Kontrast).
|
|
|
|
Text - Secondary: text - zinc - 400(Mittelgrau für Labels).
|
|
|
|
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.
|
|
|
|
Typography:
|
|
|
|
Nutze Inter oder DM Sans für alles.
|
|
|
|
Headlines: font - bold tracking - tight(Enger Buchstabenabstand, wirkt kompakt und modern).
|
|
|
|
Labels: uppercase text - xs tracking - widest font - semibold(Technischer Look).
|
|
|
|
Component: Whisky Card(Clean Split):
|
|
|
|
Kein Text mehr über dem Bild!
|
|
|
|
Top: Bild(Aspect Ratio 4: 3 oder 16: 9), rounded - t - xl.
|
|
|
|
Bottom: Info - Block(p - 4 bg - zinc - 900 rounded - b - xl).
|
|
|
|
Inhalt: Whisky Name(Bold, White), darunter Destillerie(Orange, Small).
|
|
|
|
Tags: Kleine "Pills" mit bg - zinc - 800 text - zinc - 300.
|
|
|
|
Component: Dashboard Stats:
|
|
|
|
Minimalistisch.Nur die Zahl(riesig, z.B.text - 4xl font - bold text - white) und darunter das Label(text - zinc - 500).
|
|
|
|
Keine Boxen, keine Rahmen. "Data Ink Ratio" optimieren.
|
|
|
|
Component: Floating Navigation(The Capsule):
|
|
|
|
Statt einer durchgehenden Leiste unten, nutze eine "Floating Capsule".
|
|
|
|
Eine abgerundete "Insel"(rounded - full) die ca. 20px über dem unteren Bildschirmrand schwebt.
|
|
|
|
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
|
|
|
|
import { Home, Grid, Scan, User } from 'lucide-react';
|
|
|
|
export const NavigationCapsule = () => {
|
|
return (
|
|
<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" >
|
|
|
|
{/* Left Item */ }
|
|
< button className = "p-3 text-zinc-400 hover:text-white transition-colors" >
|
|
<Home size={ 22 } strokeWidth = { 2.5} />
|
|
</button>
|
|
|
|
{/* Left Item */ }
|
|
<button className="p-3 text-zinc-400 hover:text-white transition-colors" >
|
|
<Grid size={ 22 } strokeWidth = { 2.5} />
|
|
</button>
|
|
|
|
{/* 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: 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:
|
|
|
|
Lesbarkeit: Durch den zinc - 900 Hintergrund der Karten hebt sich der weiße Text extrem gut ab.Kein "Text auf unruhigem Foto" - Problem mehr.
|
|
|
|
Modernität: Das "Pill" - Menü(Capsule) sieht aus wie bei modernen iOS Apps(Dynamic Island Ästhetik).
|
|
|
|
Ehrlichkeit: Es versucht nicht, "altes Geld"(Gold / Serifen) zu imitieren, sondern wirkt wie ein modernes Werkzeug für Enthusiasten. |