---
name: Entscheidomat
description: Deutschsprachige Zufalls-Tools mit warmem Porzellan-Papier-Design und Smaragd-Akzenten
colors:
  paper: "#faf8f3"
  surface: "#ffffff"
  ink: "#111412"
  ink-soft: "#45504a"
  line: "#e0eae4"
  emerald: "#0d7a57"
  emerald-strong: "#095c41"
  emerald-soft: "#e6f7f0"
  emerald-line: "#b2e5d1"
  clay: "#b4633f"
  clay-soft: "#f6eae2"
typography:
  display:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: "clamp(2.5rem, 6vw, 4.5rem)"
    fontWeight: 600
    lineHeight: "1.1"
    letterSpacing: "-0.01em"
  headline:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "1.875rem"
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.02em"
  title:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "1.25rem"
    fontWeight: 600
    lineHeight: "1.3"
  body:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: "1.6"
  label:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: "0.15em"
rounded:
  sm: "8px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
components:
  button-primary:
    backgroundColor: "{colors.emerald}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    padding: "12px 28px"
  button-primary-hover:
    backgroundColor: "{colors.emerald-strong}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.full}"
    padding: "12px 24px"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: "24px"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: "12px 16px"
---

# Design System: Entscheidomat

## Overview

**Creative North Star: "Das analoge Porzellan-Labor"**

Entscheidomat vereint die visuelle Wärme von tactilem Porzellan-Papier (`#faf8f3`) mit der Präzision eines modernen digitalen Werkzeugs. Statt lauter Kitsch-Visuals oder kalter SaaS-Gradients basiert das Design-System auf organischen, edlen Smaragd-Tönen (`#0d7a57`), feinen Begrenzungslinien (`#e0eae4`) und subtilen 3D-Zufallselementen (gebürstetes Messing für Münzen, mattes Anthrazit für Magic 8-Ball).

Das System legt höchsten Wert auf flüssiges visuelles Feedback, taktile Reaktion bei Klicks/Touches und eine ruhige, haptische Atmosphäre. Serifenstarke Akzente in *Cormorant Garamond* setzen spielerische Highlights im Markennamen und in Überschriften, während *Inter* für perfekte Lesbarkeit in Formularen, Tabellen und Interaktionsflächen sorgt.

**Key Characteristics:**
- **Tactile Paper Canvas:** Warmes Porzellan-Papier (`#faf8f3`) als ruhiger, angenehmer Hintergrund für alle Seiten.
- **Smaragd-Präzision:** Gezielter Einsatz von tiefem Smaragdgrün (`#0d7a57`) für primäre Aktionen, Erfolgszustände und Markenakzente.
- **Typografischer Kontrast:** Zusammenspiel aus sachlicher Sans-Serif (*Inter*) und eleganter Display-Serif (*Cormorant Garamond*).
- **Abgerundete Taktilität:** Vollabgerundete Pill-Buttons (`9999px`) für Aktionen und weiche Container-Ecken (`24px`).
- **Subtile Tiefe:** Sanfte mehrschichtige Schatten statt schwerer Schlagschatten; Interaktionen erzeugen sanftes Anheben (*Lift*).

## Colors

Die Farbpalette ist warm, natürlich und fokussiert. Ein einzelner Hauptakzent in Smaragdgrün leitet den Blick, ergänzt durch einen warmen Terracotta-Farbton für seltene Sekundärakzente.

### Primary
- **Porcelain Paper** (`#faf8f3`): Globaler Seitenhintergrund; schafft eine warme, papierartige Grundstimmung.
- **Deep Ink** (`#111412`): Primäre Textfarbe und dunkle Bedienelemente für maximalen Kontrast.

### Accent
- **Emerald Accent** (`#0d7a57`): Primärer Markenakzent; wird für CTA-Buttons, aktive Zustände und Markenhighlights verwendet.
- **Emerald Strong** (`#095c41`): Hover- und Active-Zustand für Smaragd-Elemente.
- **Emerald Soft Tint** (`#e6f7f0`): Sanfter Hintergrund-Tint für Tooltips, ausgewählte Elemente und Badges.
- **Emerald Line** (`#b2e5d1`): Zarter Rahmen für Smaragd-Badges und Hover-Zustände.

### Secondary
- **Terracotta Clay** (`#b4633f`): Warmer Sekundärakzent für ausgewählte Hervorhebungen und spielerische Akzente.
- **Terracotta Soft Tint** (`#f6eae2`): Tint-Hintergrund für sekundäre Badges.

### Neutral
- **Clean Surface** (`#ffffff`): Container-, Karten- und Modal-Hintergründe für klare Abhebung vom Paper-Background.
- **Soft Ink** (`#45504a`): Sekundäre Textfarbe für Erklärungen, Untertitel und Metadaten.
- **Warm Line** (`#e0eae4`): Subtile Trennlinien und Kartenränder.

### Named Rules
**The Emerald Sparsensity Rule.** Der Smaragd-Akzent darf auf keiner Seite mehr als 10% der visuellen Fläche einnehmen. Seine Seltenheit verleiht ihm Wertigkeit und Leuchtkraft.

**The No-Pure-Black Rule.** Reines Schwarz (`#000000`) ist für Text und Flächen verboten. Stattdessen wird stets das warme Deep Ink (`#111412`) verwendet.

## Typography

Die Typografie basiert auf dem Kontrast zwischen der funktionalen Sans-Serif *Inter* und der charakterstarken Serif *Cormorant Garamond*.

**Display Font:** Cormorant Garamond, Georgia, serif  
**Body Font:** Inter, system-ui, -apple-system, sans-serif  

### Hierarchy
- **Display** (Semibold 600 / Italic, `clamp(2.5rem, 6vw, 4.5rem)`, Line-Height `1.1`): Hero-Überschriften und charakteristische Markenwörter (z. B. *omat* in *Entscheidomat*).
- **Headline** (Bold 700, `1.875rem` / `30px`, Line-Height `1.2`, Letter-Spacing `-0.02em`): Sektionsüberschriften und Tool-Titel.
- **Title** (Semibold 600, `1.25rem` / `20px`, Line-Height `1.3`): Kartenüberschriften und Dialog-Titel.
- **Body** (Regular 400, `1rem` / `16px`, Line-Height `1.6`, max. Zeilenlänge 65–75ch): Fließtext, Beschreibungen und Anleitungen.
- **Label** (Semibold 600, `0.75rem` / `12px`, Letter-Spacing `0.15em`, Uppercase): Eyebrows, Kategorie-Tags und Tabellenköpfe.

### Named Rules
**The Dual-Type Rule.** *Cormorant Garamond* wird ausschließlich für Display-Akzente und dekorative Wort-Highlights verwendet; Fließtext, Buttons, Inputs und Navigations-Links verbleiben stets in *Inter*.

## Layout

Das Layout folgt einem großzügigen, zentrierten Rastersystem mit klaren Abständen und responsiver Skalierung.

- **Container:** Maximale Breite von `1152px` (`max-w-6xl`) mit horizontalem Padding (`px-5` mobil, `px-8` ab Desktop).
- **Spatial Grid:** 8px-Rhythmus (`8px`, `16px`, `24px`, `32px`, `48px`, `64px`).
- **Responsive Layout:** 1-spaltig auf Mobilgeräten, 2- bis 3-spaltige Grid-Layouts ab `md` (`768px`) und `lg` (`1024px`).
- **Header:** Fixierte Navigation (`64px` Höhe) mit `backdrop-blur-xl` und fließendem Übergang beim Scrollen.

## Elevation & Depth

Entscheidomat verwendet tonal geschichtetes Paper-on-Surface Design anstelle von schweren Schlagschatten. Tiefe entsteht primär durch den Kontrast zwischen Porzellan-Hintergrund (`#faf8f3`) und weißen Oberflächen (`#ffffff`), ergänzt durch sanfte, diffuse Umgebungsschatten.

### Shadow Vocabulary
- **Soft Ambient** (`0 2px 4px rgb(17 20 18 / 0.03), 0 12px 36px rgb(17 20 18 / 0.06)`): Standard-Schatten für ruhende Karten und interaktive Container.
- **Lifted Elevation** (`0 4px 12px rgb(17 20 18 / 0.06), 0 24px 52px rgb(17 20 18 / 0.10)`): Hover-Zustand für Karten und aktive Tool-Elemente.
- **CTA Focus Glow** (`0 12px 28px rgb(17 20 18 / 0.22)`): Hervorhebung für primäre Aktionsbuttons.

### Named Rules
**The Flat-at-Rest Rule.** Elemente ruhen flach mit minimalem Umgebungsleuchten (`Soft Ambient`). Tiefe entsteht dynamisch erst bei Benutzer-Interaktion (Hover/Focus).

## Shapes

Das Formensystem kombiniert organisch gerundete Ecken mit präzisen Kanten.

- **Buttons & Pills:** Vollabgerundet (`9999px`) für haptisches, freundliches Aussehen.
- **Karten & Container:** `24px` Radius (`rounded-3xl` / `rounded-2xl`) für moderne Softness.
- **Inputs & Formulare:** `16px` Radius (`rounded-xl`) mit feiner `1px` Umrandung (`#e0eae4`).
- **Focus Rings:** `2px` durchgezogene Smaragd-/Ink-Linie mit `2px` Offset und `6px` Radius.

## Components

### Buttons
- **Shape:** Full Pill (`border-radius: 9999px`)
- **Primary:** Background `#0d7a57`, Text `#ffffff`, Padding `12px 28px`, Font Weight 600.
- **Primary Hover:** Background `#095c41`, Scale-up Transition `scale(1.02)`.
- **Secondary:** Background `#ffffff`, Text `#111412`, Border `1px solid #e0eae4`, Shadow `Soft Ambient`.
- **Sound/Icon Button:** Kreisförmig (`40px x 40px`), Background `#ffffff`, Border `#e0eae4`, Icon `#45504a`.

### Cards & Tool-Container
- **Corner Style:** `24px` (`rounded-3xl`)
- **Background:** `#ffffff` (`bg-surface`)
- **Border:** `1px solid #e0eae4`
- **Internal Padding:** `24px` bis `32px`
- **Shadow:** `Soft Ambient` in Ruhe, transformiert zu `Lifted Elevation` bei Hover.

### Inputs / Text Fields
- **Style:** Background `#ffffff`, Text `#111412`, Border `1px solid #e0eae4`, Radius `16px`.
- **Focus:** Border-Color `#0d7a57`, Focus-Ring `2px solid #0d7a57` mit `2px` Offset.

### Navigation
- **Style:** Fixierte Leiste (`h-16`), Transparent im Ruhezustand an der Spitze, wechselt beim Scrollen zu `bg-paper/95` mit `backdrop-blur-xl` und zartem unteren Rand (`#e0eae4`).

## Do's and Don'ts

### Do:
- **Do** immer das warme Porzellan-Papier (`#faf8f3`) als Seitenhintergrund verwenden.
- **Do** Smaragdgrün (`#0d7a57`) gezielt für die wichtigsten primären Interaktionen einsetzen.
- **Do** Buttons stets als Abgerundete Pills (`rounded-full`) gestalten.
- **Do** flüssige Framer-Motion / GSAP Übergänge bei Zufalls-Auslosungen anbieten.

### Don't:
- **Don't** kühle bläuliche Grautöne oder schrill-leuchtende Gradienten verwenden.
- **Don't** reines Schwarz (`#000000`) für Text oder Flächen nutzen.
- **Don't** Gedankenstriche oder Bindestrich-Separaten in Eyebrows oder Titeln verwenden.
- **Don't** harte Schlagschatten oder knallige Neonfarben einbauen.