Version: 1.0
Status: Final
Owner: Chief of Staff
Basis: DEV'sSPEC.md+cartly-theme.css(Technical CI)
Zielgruppe: Kartly-Team, Agenturen, Freelancer — als Referenz für alle Markenentscheidungen
Cartly gibt kleineren Fashion-Einzelhändlern (1–5 Filialen, DACH) die digitale Infrastruktur, die früher nur große Ketten hatten. Kein kompliziertes ERP, keine überladene Software — ein intelligentes, selbsterklärendes System, das mitdenkt.
| Was | AI-native ERP + POS als Cloud-SaaS |
| Für Wen | Inhaber geführte Fashion-Einzelhändler, 1–5 Filialen, DACH-Region |
| Wie | Modern, clean, professionell — aber nicht steril |
| Wettbewerb | Traditionelle Kassensysteme (Star, CAS), legacy ERP |
| Differenziator | AI-gestützt, mobil-first, superschnell |
„Kompetent, aber nahbar."
Cartly wirkt wie ein erfahrener Berater, der trotzdem auf Augenhöhe mit dem Einzelhändler spricht. Keine Enterprise-Kälte, keine Startup-Attitüde.
#1A1A2E — Deep NavyMood: Autorität, Tiefe, Vertrauen. Der Farbton signalisiert: „Wir sind professionell und meinen es ernst." Dunkel genug für Nachtmodus,今夜 aber nicht Schwarz — bleibt elegant.
Usage: Headlines, Navigation, Brand-Primärflächen, Dark Mode Basiston
#E94560 — Coral-Red (Accent)Mood: Energie, Aktion, Impuls. Der Knopf, den man drücken will. Wärme mit Dringlichkeit — nicht aggressiv wie reines Rot, sondern modern und stylish. Bezieht sich auf Fashion-Akzente (Runway-Lippenstift, Sale-Tags).
Usage: CTAs, Badges, Hover-States, Akzente, Sale-Indikatoren, PWA-Icon
#16213E — Prussian Blue (Secondary)Mood: Beruhigend, strukturiert, professionell. Leicht wärmer als reines Navy, wirkt weniger corporate. Subtile Tiefe hinter Karten und Sections.
Usage: Card-Hintergründe (Light Mode), Secondary-Headlines, Subtle-Flächen
| Name | Hex | Mood | Usage |
|---|---|---|---|
| Surface White | #FFFFFF |
Klar, offen | Card-Flächen, Input-Felder |
| Background | #F8F9FA |
Leicht warmes Off-White, nicht klinisch | Seiten-Hintergrund |
| Border Light | #E2E8F0 |
Subtil, kaum sichtbar | Trennlinien, Card-Rahmen |
| Border Strong | #CBD5E1 |
Definiert, sichtbar | Aktive States, starke Trennung |
| Text Primary | #1A1A2E |
Volle Lesbarkeit | Body-Text, wichtige Labels |
| Text Secondary | #64748B |
Zurückhaltend | Descriptions, Captions, Help-Text |
| Text Muted | #94A3B8 |
Fast unsichtbar | Placeholder, Timestamps |
| Farbe | Hex | Mood | Usage |
|---|---|---|---|
| Success | #10B981 |
Wachstum, Bestätigung | Bestellungen, positive Actions |
| Warning | #F59E0B |
Aufmerksamkeit, Vorsicht | Bestandswarnungen, Limits |
| Error | #EF4444 |
Klar, nicht panisch | Fehlermeldungen, Validation |
| Info | #3B82F6 |
Neutral, hilfreich | Hinweise, Tooltips |
Dark Mode invertiert die Logik: helle Flächen werden dunkel (#0F0F1A), Text wird hell (#E8EAF0). Der Accent bleibt #E94560 — er soll in beiden Themes leuchten wie ein Spotlight.
Display/Headlines: Outfit — Geometric Sans-Serif
Body/Interface: Outfit — durchgängig, ein Font für alles
Mono/Technical: JetBrains Mono — Preise, SKUs, Codes
Entscheidung: Outfit als Solo-Font (mit Mono als technischem Akzent). Keine Serifen-Mischung — Fashion-Einzelhändler erwarten Klarheit und Modernität, nicht Tradition. Outfit ist geometrisch genug für Tech, aber mit Charakter, der sich von generischen System-Fonts abhebt.
| Gewicht | Usage | Character |
|---|---|---|
| ExtraBold (800) | Hero, H1 | Maximaler Impact, maximaler Selbstbewusstsein |
| Bold (700) | H2, H3 | Klare Hierarchie, kraftvoll |
| SemiBold (600) | H4, Button-Text | Lesbar, präsent |
| Gewicht | Usage | Character |
|---|---|---|
| Regular (400) | Fließtext, Descriptions | Bequem für langes Lesen |
| Medium (500) | Labels, Navigation | Leicht betont, nicht aufdringlich |
| Light (300) | Captions, kleine Hinweise | Dezenter Hintergrund-Text |
| Gewicht | Usage |
|---|---|
| Regular (400) | Preise im POS, SKU-Codes, Barcodes |
| Medium (500) | Technische IDs, API-Referenzen |
Das Cartly-Logo ist eine Wortbildmarke mit einem abstrakten Icon, das die Kernidee „Einfachheit im Retail" verkörpert.
Ein abstraktes, minimalistisches Icon, das zwei Referenzen verbindet:
Formale Beschreibung:
Ein Quadrat mit abgerundeten Ecken, das durch eine diagonale Falz geteilt ist. Die obere Hälfte leicht nach oben geklappt, als würde man eine Tüte öffnen. Die untere Hälfte bleibt flach. In der Mitte ein subtiler Knick, der die Faltlinie andeutet.
Farbe: --cartly-accent (#E94560) auf dunklem Grund, oder einfarbig auf hellem Grund.
Variante: Reines Icon ohne Text — für Favicons, PWA-Icons, App-Symbole. Das Icon aus dem manifest.json zeigt genau diese Idee: ein Shopping-Cart-Rahmen mit Korbsymbolik, stilisiert als Carty-„C".
| ✅ Do | ❌ Don't |
|---|---|
| Icon in Accent-Farbe auf dunklen Flächen | Logo in random Winkeln drehen |
| Wordmark in Primary-Farbe | Farben des Logos verändern |
| Ausreichend Whitespace um das Logo | Logo in Graustufen auf Fotos |
| Icon standalone als App-Symbol | Text zum Icon hinzufügen |
„Der kompetente Freund."
Cartly spricht wie ein erfahrener Einzelhändler, der sein Handwerk versteht und es in einfache Worte fasst — nicht wie ein Tech-Unternehmen, nicht wie eine Unternehmensberatung.
✅ „Dein neuer Verkauf wurde gespeichert."
❌ „Boom! Dein Sale ist live, Champion!"
✅ „Wähle eine Filiale."
❌ „Bitte wähle aus dem untenstehenden Dropdown-Menü die für dich relevante Filiale aus."
✅ „Bestand niedrig — nur noch 3 Stück."
❌ „Warnung: Der Lagerbestand für diesen Artikel liegt unter dem Schwellenwert."
✅ „Gute Wahl."
❌ „Transaction completed successfully."
| Kontext | Ton | Beispiel |
|---|---|---|
| POS — Verkauf abschließen | Freundlich-bestätigend | „Verkauf erfasst. Kunde freut sich." |
| Fehlermeldung | Ruhig-lösungsorientiert | „Da stimmt etwas nicht. Versuch es erneut." |
| Bestandswarnung | Warnend, nicht dramatisierend | „Artikel geht zur Neige." |
| Erste Einrichtung | Ermutigend, nicht überfordernd | „Gleich fertig. Nur noch ein Schritt." |
| Dashboard/Statistiken | Sachlich, faktenbasiert | „Umsatz diese Woche: +12%." |
| Marketing/Launch | Selbstbewusst, nahbar | „Retail hat einen neuen Freund." |
„Nordic Retail Futurism" — скандинавische Klarheit trifft auf moderne Business-Software. Wenig Zierrat, viel Luft, starke Typografie, präzise eingesetzte Farbe.
Referenz-Visuals:
Arket, Cos, Acne Studios (Stockholm Flagship-Stores)
Reinweiße Räume mit geometrischen Regalen, massive Outfit-Wände, minimalistische Schilder. Die Ruhe und das Vertrauen, das ein gut organisierter Laden ausstrahlt. → Inspiration für Dashboard-Layouts, Whitespace-Einsatz
Notion + Linear (Product-Design-Referenz)
这两个 Produkte schaffen es, professionell aber nicht kalt zu wirken. Ihre Dark Modes sind be reference. Farbige Akzente auf dunklem Hintergrund. Klare Typografie-Hierarchien. → Inspiration für Cartly's Dark Mode, UI-Komponenten
Zara Digital (App)
Fast-fashion Brand, aber die digitale Präsentation ist respektvoll und hochwertig. Große Produktbilder, minimale UI drumherum. → Inspiration für POS-Interface, Bild-als-Fokus-Prinzip
Mood: Morning Light in a Flagship Store
Weiches Licht durch hohe Fenster, klar sortierte Ware, der Duft von frischer Wäsche. Спокойствие. Profession. Herz. → Kein konkretes Bild, но die emotionale Atmosphäre als Nordstern
| Do | Don't |
|---|---|
| Hochwertige Fashion-Fotografie (Modehaus-Qualität) | Stock-Photo-Ästhetik (Generic Business People) |
| Nahaufnahmen von Textilien, Materialien, Details | Breitbild-Klassenzimmer-Meetings |
| Klare, strukturierte Store-Interieurs | Chaotische Lagerhallen |
| Menschliche Hände, die Kleidung halten/prüfen | Künstlich lächelnde Models vor Grünflächen |
Geometric, 2px Stroke, rounded caps.
Passt zu Outfit's Geometrie. Nicht zu detailliert — wie die Icons in Linear oder Vercel's Design System. Accent-Farbe für aktive States.
Keine Illustrationen im MVP. Falls später Illustrations hinzukommen: Abstract, geometrisch, monochromatisch mit Accent-Farben. Keine verspielten Charaktere.
Alle Farben, Spacing, Typography über cartly-theme.css — keine Hardcodes. Das Brand Book definiert den Sinn, DEV's CSS die Umsetzung.
Brand Book = kreative Richtung (Mood, Feeling)
SPEC.md = technische Specs (Tokens, Shadows, Radius)
Konsistente Sprache in allen Touchpoints. Bei Fragen: Does this sound like „the competent friend"?
Letzte Aktualisierung: Phase-1 Branding (Initial)