GermanExam.pro Frontend Design System

This skill ensures all frontend work follows the established design system. Read this before writing any UI code.

Brand Colors (ALWAYS use these tokens)

Primary:     brand-petrol (#006d77)  → Headers, CTAs, primary actions
Accent:      brand-mint (#1de9b6)    → Highlights, success states, hover effects
Warm:        brand-coral (#e29578)   → Secondary accents, warnings
Text:        ink-900 (#0b1220)       → Primary text
Text-muted:  ink-500 (#475569)       → Secondary text

NEVER hardcode hex values. Use Tailwind tokens:

• text-brand-petrol, bg-brand-gradient, shadow-brand
• text-ink-900, text-ink-500, bg-ink-50

Core Patterns

1. Glassmorphism (Primary Card Style)

<Card className="bg-white/90 backdrop-blur-sm border-white/60 shadow-brand hover:shadow-brand-lg transition-all">
  <CardContent className="p-6">...</CardContent>
</Card>

2. Brand Gradient (CTAs, Headers, Avatars)

// Button
<Button className="bg-brand-gradient hover:shadow-brand-lg text-white">
  Action
</Button>

// Icon container
<div className="w-10 h-10 bg-brand-gradient rounded-xl flex items-center justify-center shadow-brand">
  <Icon className="w-5 h-5 text-white" />
</div>

3. Hover Effects

// Lift on hover (GPU-accelerated)
<div className="hover-lift">...</div>

// Or manual:
<div className="transition-all duration-300 hover:shadow-brand hover:-translate-y-1">

4. Chat Bubbles

// User message
<div className="bg-brand-gradient text-white rounded-2xl rounded-tr-sm shadow-brand">

// Assistant message
<div className="bg-white/80 backdrop-blur-md text-ink-900 rounded-2xl rounded-tl-sm ring-1 ring-white/50">

Layout Patterns

Authenticated Pages (Dashboard, Settings, Chat)

All use DashboardLayout with:

• Sidebar: 20-25% width
• Header: Logo + Search + User Menu
• Content: flex-1 with proper overflow

Flex Footer (for inputs at bottom)

<div className="flex flex-col h-full">
  <header className="shrink-0">...</header>
  <main className="flex-1 min-h-0 overflow-y-auto">...</main>
  <footer className="shrink-0">...</footer>  {/* Input stays at bottom */}
</div>

Typography

• Font: Geist (via CSS variable --font-sans)
• Headings: font-semibold or font-bold
• Body: text-base (18px), leading-relaxed
• Small: text-sm (15px), text-ink-500

Shadows & Effects

shadow-brand      → Cards, buttons (subtle petrol glow)
shadow-brand-lg   → Hover states, modals
shadow-glass      → Heavy glassmorphism panels
backdrop-blur-sm  → Light blur (cards)
backdrop-blur-xl  → Heavy blur (modals, headers)

Animation Guidelines

• Transitions: transition-all duration-300
• Hover scale: hover:scale-105 (subtle)
• GPU acceleration: Add will-change-transform for animated elements
• Stagger delays: Use animation-delay for sequential reveals

Component Checklist

Before creating any component, verify:

• Uses Tailwind tokens (no hardcoded colors)
• Has hover/focus states
• Follows glassmorphism pattern for cards
• Uses shadow-brand not generic shadows
• Text uses ink-* scale
• Buttons use bg-brand-gradient

Anti-Patterns (NEVER DO)

• bg-blue-500, bg-purple-600 → Use bg-brand-petrol, bg-brand-gradient
• shadow-lg, shadow-xl → Use shadow-brand, shadow-brand-lg
• text-gray-* → Use text-ink-*
• Hardcoded #006d77 → Use brand-petrol token
• Generic rounded corners → Use rounded-xl, rounded-2xl
• absolute positioned inputs → Use flex footer pattern

🧹 VIBE-CODE CLEANUP (MIT URTEILSVERMÖGEN!)

Vereinfachung NUR wenn es den Code BESSER macht:

• ✅ JA: Redundante Kommentare, ungenutzte Imports, sinnlose Duplikate, any→Types
• ❌ NEIN: Notwendige Komplexität, Error Handling, nützliche Kommentare

Besser ≠ Kürzer. Siehe: .claude/rules/CODE_CLEANUP.md