tty and app, together
Terminal-styled and app-styled elements are one family (B10): the same tokens, the same 44 px height, the same line, radius, focus ring and disabled style. These specimens put each tty element next to the app components it sits with. They're here to be looked at; every control works on its own component page.
1. composer row
- are we still on for tonight?
- are we still on for tonight?yes — see you at 7
- great, I'll bring the cat
Type a message to send. Enter sends, Shift+Enter adds a line, and nothing is sent while an input method is still composing.
working: loading the demo…
2. app header with a status line
working: connecting…
ok: online
error: offline — check your connection
3. auth form under a prompt title
sign in
working: checking you're human…
4. field, prompt and button in one row
The 4 px grid shows they share one height, one 1 px border, one radius and one baseline.
5. status vocabulary
ok: online
working: connecting…
error: offline
info: no public service to check
Toasts use the same words; see pairing 1. One colour, one glyph and one word per state.
6. code and keys
Your invite code is k3m9-X2p4-q8w1. Press Enter to send, or Shift + Enter for a new line.
- Ab3D-x9Kq
- t4nW-8rD3
- H2vc-6Yp1
- m9Zs-4kT7
7. landing hero
8. dialogs next to a prompt
working: loading the demo…
9. empty state
- alxnko
- Мяу
no chats yet
10. sheets over a header with a status line
working: reconnecting…
working: loading the demo…
Menus and drawers aren't in @meowerse/ui yet; they move in from meowsenger in sub-project 4 (audit D-5, D-6), and this pairing gains them then.
11. footer under a status line
ok: all services up
12. reduced motion and forced colours
Pairings 1 to 3 are also captured with reduced motion (the wordmark cursor holds still and waits stay [wait] lines) and in forced-colours mode (the focus ring stays visible). The screenshot tests in apps/web/tests/e2e/screenshots.spec.ts record both, at phone and desktop sizes.