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]>
4.1 KiB
4.1 KiB
Typography & Components
Fonts (all self-hosted woff2, font-display: swap, variable 100–900)
| Family | Role | Weights | Notes |
|---|---|---|---|
| Geist | UI / body / headings | 100–900 var | primary; fallback "Geist Fallback" → local(Arial) |
| Geist Mono | code / mono UI | 100–900 var | fallback "Geist Mono Fallback" → local(Arial) |
| Inter | secondary UI | 100–900 var | subset incl. Greek/Cyrillic |
| Familjen Grotesk | display (reserved) | 400–700 var | /fonts/FamiljenGrotesk-VariableFont_wght.woff2 |
| Satoshi | body (reserved) | 400/500/700 | Regular/Medium/Bold woff2 |
| Ranade | logo/wordmark (reserved) | 500/700 | Medium/Bold woff2 |
| National / National Condensed | marketing (reserved) | 400/500 | national-2-*.woff2 |
Stacks: --font-sans: "Geist","Geist Fallback",ui-sans-serif,system-ui,sans-serif; --font-mono: "Geist Mono","Geist Mono Fallback",ui-monospace,SFMono-Regular,monospace.
Type scale (distinct combos actually used)
| Role | size / line-height | weight | color |
|---|---|---|---|
| Page H1 (e.g. "Skill Library") | ~30px (text-3xl) / 2.25rem | 700 | #fafafa |
| Section heading | 1.5rem / 2rem | 600 | #fafafa |
| Body / message text | 1rem / 1.5rem | 400 | #fafafa |
| Rail global-nav label | 16px / 24px | 400 | #d4d4d4 (lab 84.92) |
| Agent role subtitle | .875rem / 1.25rem | 400 | #a3a3a3 |
| Composer input | 14px / 20px | 400 | #e8e8e8 |
| Caption / timestamp | 12px / 1rem | 400 | #737373 |
| Code chip | mono .875rem | 400 | #fafafa on #262626 |
| Treatments: text truncation (ellipsis) on session/thread rows & previews; tracking-tight on large headings; tabular/feature settings default. |
Components (anatomy · dimensions · tokens · states · transitions)
Dominant transition for ALL interactive elements (verified on nav item):
color, background-color, border-color, outline-color, fill, stroke 0.25s cubic-bezier(0.32,0.72,0,1).
Left-rail global nav item
- Box: padding 8px 12px; height 32px; width 168px (within 176px rail); radius 9999px (pill).
- Default: color #d4d4d4, bg transparent. Hover: bg #171717 (--color-hover-bg), color #fafafa. Active route: coral text/icon (#f96565). Focus-visible: 2px ring #f5f5f5, 2px offset. Disabled: 50% opacity.
- Transition: 0.25s --ease-app on color/bg.
Primary button (pill CTA, e.g. "Create", "Buy credits")
- radius 9999px; bg #fafafa, text #171717; shadow --shadow-button (and --shadow-cta when coral).
- Hover: slight bg darken + lift; Active: translateY(1px)/scale .98; Focus-visible: ring #f5f5f5; Disabled: opacity .5, no shadow.
Coral CTA (e.g. "Connect Slack", "Continue")
- bg coral #f96565, text #fff, shadow --shadow-cta (inset highlight + coral glow). Hover → #fa7575; Active → #e85555.
Text input / composer
- bg transparent within rounded container; container radius --radius-2xl (1rem); padding 6px 8px; font 14px/20px; border #262626.
- Focus: ring #f5f5f5 2px; placeholder color #737373.
Card (skill/app card)
- bg #0a0a0a; border 1px #262626; radius --radius-2xl; shadow --shadow-card; padding ~20px. Hover: border lightens toward #3a3a3a, subtle raise.
User message bubble
- bg #262626; text #fafafa; radius ~1rem; shadow --shadow-bubble; right-aligned; max-width ~70%.
Agent message
- no bubble; avatar 28–32px left; text #fafafa; "N steps" collapsible (Radix collapsible: collapsible-expand/collapse keyframes).
Avatar
- rounded-square (radius ~12px) for agents; 28–40px; green online dot overlay; user = colored initials chip.
Toggle / switch (access controls)
- track radius --radius-toggle 8px; ON = coral fill; thumb white; transition 0.25s --ease-app.
Tabs (Slack Overview/Channels/Connection)
- segmented; active tab = raised pill bg #262626, text #fafafa; inactive muted #a3a3a3.
Dock tile (Computer panel)
- rounded-square; shadow --shadow-dock-tile (1px white hairline + inset top highlight); coral-tinted icon tiles; hover scale ~1.05 (device-icon interactions).
Modal / dialog
- centered; bg #0a0a0a; radius --radius-2xl/3xl; shadow --shadow-dialog; backdrop dim overlay; enter = scale-in (0.96→1) + fade.