Styleguide
The tokens and components every Orbit screen is built from. Graphite neutrals, a warm-white canvas, one periwinkle accent, hairline borders, figures in mono. Data screens stay still; motion is reserved for the orbit motif and for state changes.
Colour
Roles, not raw values: components use these names and the theme supplies the colour. Dark is designed alongside light, not inverted.
| Role | Use | Light | Dark |
|---|---|---|---|
| canvas | Page background | #f6f6f4 | #101113 |
| surface | Panels, tables, inputs | #ffffff | #17181b |
| surface-2 | Table headers, hover, sunken areas | #efefec | #1f2024 |
| line | Hairline dividers | #e3e2de | #2b2c31 |
| line-strong | Control borders (3:1) | #8a8a90 | #6f7078 |
| ink | Primary text | #16171a | #ecebe7 |
| ink-2 | Secondary text | #46474d | #b6b6bb |
| ink-3 | Muted text, placeholders | #67686f | #8e8f96 |
| accent | Primary action, links, focus | #4b4fc4 | #a3a6f6 |
| accent-ink | Text on accent | #ffffff | #14153a |
| accent-subtle | Selection, accent badges | #ebecfa | #24254a |
| accent-text | Accent text on subtle | #3a3da3 | #c5c7ff |
| success | Won, success text | #1d6e47 | #73cf9f |
| success-subtle | Success background | #e3f1e9 | #11281c |
| warning | Attention text | #81530a | #e9bd66 |
| warning-subtle | Attention background | #f8eed9 | #2c2310 |
| danger | Lost, errors, destructive | #ad2330 | #ff8b91 |
| danger-subtle | Error background | #f9e6e7 | #331719 |
Contrast
Every pairing the components use, computed from the token file (the same numbers a unit test enforces). Text needs 4.5:1; control borders and focus rings need 3:1.
| Foreground on background | Minimum | Light | Dark |
|---|---|---|---|
| ink on canvas | 4.5:1 | 16.56 | 15.84 |
| ink on surface | 4.5:1 | 17.92 | 14.88 |
| ink on surface-2 | 4.5:1 | 15.56 | 13.64 |
| ink-2 on canvas | 4.5:1 | 8.55 | 9.35 |
| ink-2 on surface | 4.5:1 | 9.26 | 8.79 |
| ink-2 on surface-2 | 4.5:1 | 8.03 | 8.06 |
| ink-3 on canvas | 4.5:1 | 5.13 | 5.86 |
| ink-3 on surface | 4.5:1 | 5.55 | 5.51 |
| ink-3 on surface-2 | 4.5:1 | 4.81 | 5.05 |
| accent on canvas | 4.5:1 | 6.04 | 8.40 |
| accent on surface | 4.5:1 | 6.53 | 7.90 |
| accent-ink on accent | 4.5:1 | 6.53 | 7.80 |
| accent-text on accent-subtle | 4.5:1 | 7.54 | 9.03 |
| success on success-subtle | 4.5:1 | 5.34 | 8.30 |
| success on surface | 4.5:1 | 6.22 | 9.43 |
| warning on warning-subtle | 4.5:1 | 5.74 | 8.81 |
| warning on surface | 4.5:1 | 6.61 | 10.09 |
| danger on danger-subtle | 4.5:1 | 5.72 | 7.32 |
| danger on surface | 4.5:1 | 6.86 | 7.91 |
| line-strong on surface | 3:1 | 3.43 | 3.61 |
| line-strong on canvas | 3:1 | 3.17 | 3.84 |
| accent on surface-2 | 3:1 | 5.67 | 7.24 |
Typography
Geist for text, Geist Mono for figures, identifiers and labels. Product screens set 14px body for density; reading pages use 16 to 17px. Inputs are 16px on touch screens.
Display · 48/1.0 · −3.5%
Every opportunity
Title · 24/1.25 · −2%
Pipeline overview
Heading · 16/1.4 · 600
Deals closing this month
Body · 14/1.6
Notes, descriptions and table cells use the product body size.
Small · 13/1.5
Hints, metadata and secondary labels.
Mono figures · 14
$48,000.00 · ₹1,800,000.00 · 75%
Label · mono 11 · caps
Expected close
Space and shape
A 4px grid. One radius scale: 4px for badges, 6px for controls, 8px for panels; circles only for point-like markers. Hairline borders group content; shadows appear only on things that float (dialogs, menus).
Spacing (4px grid)
Radius and elevation
Focus
Press Tab: every interactive element shows the same 2px accent ring with a 2px offset. Focus is never removed, only replaced.
Forms
Visible labels, hints under the control, errors that say what is wrong and how to fix it, connected for screen readers. Specimen only: these fields are not connected to anything.
Fields
What the customer is buying, in their words.
Use digits and up to two decimals, for example 48000.50.
Only active members of this workspace can own a deal.
Text, choices, disabled
Required to move a deal to Lost. Shown in loss-reason reports.
Status
Every status is a word with a glyph; colour is the third cue, never the only one. Activity provenance says exactly how an entry came to exist.
Deals and leads
Activity provenance
- Recorded by Orbit
- Recorded by a person
- Simulated (demonstration)
- Your change in this demo
- Confirmed by a providerOnly with a provider's confirmation. None is connected.
- Neutral tag
Tables
Dense, scannable, mono figures aligned right. Totals are per currency: Orbit has no exchange rates, so it never adds different currencies together. Weighted value rounds each deal to a whole minor unit.
| Deal | Owner | Stage | Status | Amount | Probability | Expected close |
|---|---|---|---|---|---|---|
Halden Freight: fleet renewal Halden Freight | Rita Okafor | Proposal | Open | $48,000 | 50% | 14 Nov 2026 |
Marlow & Pike: 40 seats Marlow & Pike | Ravi Menon | Negotiation | Open | £22,500 | 75% | 28 Oct 2026 |
Saanvi Textiles pilot Saanvi Textiles | Rita Okafor | Discovery | Open | ₹18,00,000 | 25% | Not set |
Kestrel Labs expansion Kestrel Labs | Ana Duarte | Won | Won | $12,000 | 100% | 02 Oct 2026 |
Brightwater onboarding Brightwater | Ravi Menon | Lost | Lost | 6.400 € | 0% | 29 Sep 2026 |
| Open pipeline (3 open deals)Weighted = amount × probability, rounded per deal |
| Weighted
| ||||
Dialogs
Native modal dialogs: focus stays inside, Escape cancels, focus returns to the button that opened it. Cancel is focused first; destructive actions are never the default.
Confirmation
Empty, loading, feedback
Empty states say what is missing and how to add it. Loading shows the shape of what is coming. Notices stay where the problem is; errors say how to recover.
Empty
No deals in this stage
Drag a deal here from another stage, or add one. Deals you cannot see because of your role are not counted.
Loading
Notices
This workspace is a demonstration
Deal moved to Negotiation
Someone changed this deal while you were editing
Could not save the amount