mirror of
https://github.com/openclaw/openclaw.git
synced 2026-08-12 18:37:37 +00:00
4b6a9785c9
* fix(ui): soften default dark-mode body text to ~12:1 contrast Drop --text/--chat-text from #d4d4d8 (12.87:1 on --bg) to #cdcdd1 (12.01:1 on --bg, 11.10:1 on --card) so dark body text sits inside the 10-12 comfort band instead of above it; brighter body text halates on dark backgrounds. Light mode, openknot, dash, --text-strong, and --muted are unchanged. * fix(ui): dim dark body text a further step to ~11.4:1 #cdcdd1 -> #c8c8cc (11.41:1 on --bg, 10.54:1 on --card), mid-band instead of top-of-band. * fix(ui): settle dark body text at ~10:1 on --bg #c8c8cc -> #bcbcc0 (10.05:1 on --bg, 9.29:1 on --card) per visual preview pick; low end of the dark comfort band on the page, slightly under it on cards, still well above AAA. * docs(ui): sync design-system guides with new dark --text token ClawSweeper P3: color-tokens.md and accessibility.md still published #d4d4d8 (~12.9:1); both now name #bcbcc0 (~10.1:1). |
||
|---|---|---|
| .. | ||
| accessibility.md | ||
| color-tokens.md | ||
| glass-surfaces.md | ||
| motion.md | ||
| README.md | ||
| settings-design.md | ||
OpenClaw Design System
OpenClaw's visual language is a dark-first, glass-surface system built around a deep charcoal base (#0e1015), a punchy signature red accent (#ff5c5c), and layered frosted-glass surfaces that create depth without solid panels. Motion is crisp and purposeful — fast micro-interactions (100ms) with spring-loaded expansions. All interactive elements meet WCAG 2.1 AA contrast requirements on dark backgrounds.
Contents
| File | What it covers |
|---|---|
| glass-surfaces.md | Two glass tiers, exact CSS values, no-solid-panels rule, @supports fallback |
| color-tokens.md | All design tokens with values, usage, contrast ratios, and anti-patterns |
| motion.md | Duration scale, easing functions, prefers-reduced-motion pattern, animation inventory |
| accessibility.md | WCAG checklist: contrast, focus, tap targets, ARIA, skip link, focus trap |
| settings-design.md | Settings page anatomy: sections, groups, rows, controls, status dots, migration rules |
Guiding Principles
- Glass, not solid — Surfaces use
backdrop-filterblur + semi-transparent backgrounds. No flat opaque panels in the main chrome. - Depth through layering — The background scale (
--bg,--bg-accent,--bg-elevated,--bg-hover,--bg-muted) communicates hierarchy without heavy borders. - Accent with restraint — Signature red (
--accent: #ff5c5c) for primary actions only; teal (--accent-2) for secondary/status. - Motion serves meaning — Animations telegraph state changes; they never play for decoration alone.
- Accessible by default — Every component ships with focus-visible styles, correct ARIA roles, and ≥4.5:1 contrast on text.