Omar SobhandClaude Opus 4.8
48730abd78
Add the WorkClaw design-reference docs (specs, manifests, tokens, motion, icon/asset references, gifs) under docs/, and move the platform spec/PRD/roadmap from the repo root into docs/. Co-Authored-By: Claude Opus 4.8 <[email protected]>
1.9 KiB
1.9 KiB
Interactive States — MEASURED (replaces prior INFERRED values)
Source: getComputedStyle + element className inspection on live DOM, dark theme, 1440 viewport. Dominant transition: 0.25s cubic-bezier(.32,.72,0,1) (--default-* tokens).
Suggestion Chip (pill button)
Anatomy: inline-flex, gap 8px, height 36px (h-9), padding 0 14px (px-3.5), fully rounded (rounded-full), text 12px/16px weight 500.
- DEFAULT: bg neutral-800 (lab(15.204% 0 0) approx #262626); text neutral-200; ring 1px inset neutral-700/70 (oklab .371 / .7); shadow --shadow-bubble = 0 1px 2px #0006.
- HOVER (measured from utilities hover:bg-neutral-700/60 + dark:hover:ring-neutral-600): bg neutral-700/60; ring neutral-600. (light theme equivalents: hover:bg-neutral-50, hover:ring-neutral-300)
- ACTIVE/PRESS: 'press-pill' utility class present (no separate CSS rule => relies on transition + inset ring feedback; no scale transform applied).
- TRANSITION: 0.25s cubic-bezier(.32,.72,0,1).
Primary Button ("Stop Claude" / Send)
- DEFAULT: bg rgb(250,249,245) (cream/paper); text rgb(20,20,19); radius 12px; height 46px; padding 12px 16px; font 14px/600.
- SHADOW (signature coral glow): rgba(217,119,87,0.24) 0 40px 80px 0, rgba(217,119,87,0.24) 0 4px 14px 0.
- TRANSITION: 0.3s cubic-bezier(.4,0,.2,1).
Dock / App Tile (computer panel)
- DEFAULT: bg #000; text neutral-50; radius 16px; size 48px; inset hairline ring rgba(255,255,255,0.15) 0 0 0 1px.
- TRANSITION: all (token-driven).
Tokens confirmed
- --shadow-bubble: 0 1px 2px #0006
- --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a
- --color-neutral-800: lab(15.204% 0 0) | -700: lab(27.036% 0 0) | -900: lab(7.782% 0 0) | -100: lab(96.52% 0 0)
- --color-coral: #f96565
- --default-transition-duration: .25s
- --default-transition-timing-function: cubic-bezier(.32,.72,0,1)
No light-scheme variant ships (dark-only). prefers-reduced-motion is handled in stylesheet.