Principles
Six ideas behind every Orbit screen. Each one is a rule the components already follow, so building with them keeps a screen on course.
Your business, at the centre
The direction for the whole system. The merchant's shop sits at the centre of the view and everything else orbits it. Its North Star is the Till in Orbit: a precise instrument for running a UK shop, not a row of KPI cards over a 30-day chart.
1. The shop's state first
What happened, then what needs doing, in that order. Every screen offers the obvious next move, and only that move is a primary pill.
2. Teal is a line of light
Orbit teal is drawn, never poured: lines, rings, focus, live marks, what is selected and the one primary pill. Words stay ink. In dark it becomes mint, the same teal lit.
3. Figures read like a till
Money and counts that lead a view are set in Sora, every numeral is tabular, and a change rolls into place like a till display. A fall is written with a true minus sign.
4. Pills, and corners that rise
If it can be pressed, it is a pill. Surfaces round their corners the higher they sit: a field at 12px inside a card at 16px, inside the canvas at 18px.
5. Calm, then alive
Nothing moves unless it explains a change. Things settle on springs, the comet circles what is working, and every movement has a still version for people who ask for less motion.
6. Plain words
Sentence case, UK English, no jargon. A control names its action, and a message says what happened and what to do next.
No orders yet
When someone buys from Harbour Desk Co, their order appears here.
The named rules
The principles, made specific. Every rule is kept by the components themselves, in light and dark, in every Orbit dashboard.
| Rule | In one line | Details |
|---|---|---|
| Line-of-Light | Teal is drawn, never poured. | Colour |
| Ink Words | Words and figures stay ink; colour belongs to marks. | Colour |
| Teal-in-the-Grey | Every grey carries a trace of the teal. | Colour |
| Till | Every numeral is tabular, everywhere. | Typography |
| Sora Budget | Sora for figures and headlines only. | Typography |
| Sentence Case | No all-caps, no tracked-out labels. | Typography |
| Pill | If it can be pressed, it is a pill. | Shape and depth |
| Altitude | The higher it floats, the rounder its corners. | Shape and depth |
| One Raised Page | The canvas is the only raised plane. | Shape and depth |
| Hairline-or-Shadow | A surface has one edge, never both. | Shape and depth |
| No-Box | Group with space and hairlines before cards. | Shape and depth |
| Settle | Arrivals settle on a spring; nothing slides on linear time. | Motion |
| Pop Budget | Only glyph-sized things pop. | Motion |
| Explain-a-Change | Nothing moves at idle unless it is live or loading. | Motion |
| Stillness | Every movement has a still version. | Motion |