Surfaces
Density by task.
Switch lanes in the studio — select rows, open files, ask the agent. Same tokens, remapped hit targets.
Compose · meridian-compose
Surface studio
Workbench (application, agent → ISS-1842) and every lane — typed via @/lib/design. Click around; it behaves like the product.
Surface studio
Try the lanes
application · agent
| ID | Title | Meta | |
|---|---|---|---|
| ISS-1842 | Tighten selected-state contrast | 2h | |
| ISS-1839 | Ship help drawer reading lane | 48m | |
| ISS-1831 | Map activity to agent timeline | — | |
| ISS-1820 | Align edge depth on panels | 1d |
Shell rhythm
Same chrome, every shell
Spacing, control height, row height, and type stay clean because they remap through data-surface — not one-off pixels.
Application
Operate data-rich work
- Selected row
- Quiet neighbor
- Meta line
Marketing
Present · cinema · docs chrome
- Selected row
- Quiet neighbor
- Meta line
Mobile
Thumb-first · 44px floor
- Selected row
- Quiet neighbor
- Meta line
Desktop
Keyboard + pointer chrome
- Selected row
- Quiet neighbor
- Meta line
UX · keyboardParity
Focus & keyboard
Focus is ring weight, not brand fill. Tab, Enter/Space on rows, Escape to clear — prove it here.
Keyboard parity
Focus & shortcuts
0/4
Tab reaches every control
Move focus with Tab / Shift+Tab
Focus shows ring, not fill alone
focus-visible:ring-ring on Button + Input
Rows activate with Enter / Space
Select the demo row below by keyboard
Escape clears the field
Type in the input, then press Escape
Skill loop
Prove every skill
- WebApplicationcompact · 32px controls · 40px rows
- WebMarketingcomfortable · 36–40px CTAs
- NativeMobile Nativetouch · 44px controls · 52px rows
- NativeDesktop Nativecompact chrome · 28px toolbars
Web
Application
Operate data-rich work — indexes, forms, detail, object-bound AI. The workbench above is the canonical proof.
| ID | Title | Meta | |
|---|---|---|---|
| ISS-1842 | Tighten selected-state contrast | 2h | |
| ISS-1839 | Ship help drawer reading lane | 48m | |
| ISS-1831 | Map activity to agent timeline | — | |
| ISS-1820 | Align edge depth on panels | 1d |
Web
Marketing
Present the product — brand, staged frames, docs. Theater when the subject earns it.
Native
Mobile Native
Thumb-first product UI — 44px targets, bottom bar, safe areas. Same tokens, larger hit areas.
Issues
Inbox
mobile · touch 44
Native
Desktop Native
Keyboard + pointer productivity — compact toolbars, menus, status. Quiet chrome.
Meridian — Issues
⌘⇧PExplorer
ISS-1842
Selected state uses brand wash
Desktop native keeps Meridian tokens with tighter chrome — menus, activity bar, status — not an OS theme fork.
bg-brand/10 on selected