Skip to content
- Up is the only metaphor. The caret is the mark. It is also the loader, the progress indicator and the “done” sign. Nothing else points, spins, bounces or sparkles. No arrows, no suns, no leaves, no mascots. Never rotate the mark. Where the interface needs a plain “down” (menus, selects, the output token count), use a Tabler chevron, not the caret.
- React at once. Every click, tap, keypress and hover gets an answer within one frame. A control shows its new state before the server replies. Then it confirms or reverts. Nothing is ever silent. When an agent works out of sight, people need to see that their action landed.
- Readable before pretty. The smallest text is 12px. Body text is 15px. Text meets 4.5:1 contrast on the ground (the surface behind it) that its token note names, in both themes. Colour alone never carries meaning.
- Minimal means fewer things, placed exactly. Use one accent hue, one neutral family and one radius scale. Borders give structure. Shadows are only for floating layers.
- Works on every width. Design for the phone first. Use the same component and the same words at 360px and at 1440px.