entscheidomat/DESIGN.md

name, description, colors, typography, rounded, spacing, components

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