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]>
73 lines
4.1 KiB
Markdown
73 lines
4.1 KiB
Markdown
# 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.
|
||
|
||
### Sliding panels — see motion.md. |