Clarity
Eine klare Hierarchie und möglichst eine primäre Aktion pro Ansicht.
One system, many apps
Calm interfaces for focused work.
Eine gemeinsame visuelle Sprache für Krabby, OpenClaw und alle Apps, die wir bauen: großzügig, klar, systemnah und zugänglich.
Direction
Principles
Apple-inspirierte Ruhe, aber mit eigener OpenClaw-Identität. Die Regeln sind wichtiger als einzelne Farben.
Space
Weißraum, Rhythmus und Typografie ersetzen dekorative UI-Schichten.
Respect
Touch-Ziele, Kontrast, Safe Areas und Reduced Motion sind Standard.
Primitives
Components
Alle Komponenten zeigen ihre wichtigsten Zustände direkt im Lab.
Buttons
Pill shape · 48 px minimum · focus visible
Cards
Container, not decoration.
Session bereit
Deine Daten sind synchronisiert und geschützt.
Fields
Label, value, hint and error stay semantic.
Bitte eine gültige Eingabe prüfen.
Status
Meaning is never conveyed by color alone.
SynchronisiertPrüfung nötigFehler
Sheets & dialogs
Focused decisions preserve context, support back/Escape and keep the primary action visible above the keyboard.
Session löschen?
Diese Aktion kann nicht rückgängig gemacht werden.
Single source of truth
Tokens
Keine freien Farben, Radien oder Abstände in Produktcode. Apps überschreiben nur ihren Markenakzent.
Semantic colors
Primary
#0066CCBrand accent
#FF7A45Canvas
#F5F5F7Text
#1D1D1FSuccess
#34C759Warning
#FF9F0ADanger
#D70015Border
#D2D2D7Typography
Display34 / 700
Title28 / 700
Body text for comfortable reading.17 / 400
Caption and supporting content13 / 400
Geometry
4 px
8 px
14 px radius
48 px target
Built in
Accessibility
Accessibility is part of the component contract, not a final polish pass.
Touch
Minimum 48 px/dp for controls, safe spacing between targets.
Contrast
Interactive colors are validated against WCAG AA. Meaning is not color-only.
Motion
Every non-trivial animation respects prefers-reduced-motion.