210 lines
9.9 KiB
Markdown
210 lines
9.9 KiB
Markdown
---
|
||
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.
|