Docs / Design
Design system
Color tokens, typography, shape and motion.
#Color tokens
Two themes; dark is the default. Ordinary controls stay monochrome.
| Token | Light | Dark | Use |
|---|---|---|---|
| bg | #FFFFFF | #000000 | Screen background |
| surface | #F2F2F2 | #121212 | Composer, cards, keys |
| surface-2 | #E6E6E6 | #1E1E1E | Pressed states, nested cards |
| separator | #D9D9D9 | #2A2A2A | 1 px hairlines |
| text | #000000 | #FFFFFF | Primary text, icons |
| text-2 | #5C5C5C | #A3A3A3 | Secondary text |
| inverse-bg | #000000 | #FFFFFF | User bubbles, primary buttons |
Exceptions: the supplied Peter orb keeps its blue, cyan and violet colors, and system-critical states (failed send, camera blocked, battery critical) use a single red.
#Typography
Inter (SIL Open Font License) for text and JetBrains Mono (OFL) for /commands. Apple’s SF Pro cannot ship in PeterOS. Layouts must hold up at 200% font scale.
#Space and shape
- 4 dp base grid; 16 dp screen margins; touch targets of at least 48 dp.
- Radii: 8 chips, 12 list groups, 20 cards and bubbles, 24 composer, 28 sheets, 36 voice capsule.
- Almost no elevation: separate layers with surface vs bg and a 1 px separator.
#Motion
Spring-based like iOS, never flashy. New messages slide up 12 dp and fade in; replies stream word by word. Reduced-motion settings replace continuous movement with brief fades and a static orb.