Home dashboard
NewThe home page of Orbit Commerce's store dashboard: the live globe and today's takings at the top, the next job beside them, then how the shop is doing over time. A pattern built entirely from the kit's components; this page shows how they fit together and the rules that hold them.
Your business, at the centre
The home answers one question the moment it opens: how is the shop doing right now? So the first screen is the shop live: a globe with a pin wherever someone is browsing, and beside it today's takings with the next job under them. Everything else follows by urgency: how the shop is doing over time, then the latest orders and best sellers. The frame keeps the same order: Orbit's logo top left takes you home, and the merchant's store sits at the foot of the sidebar, one click from every other store.
It reads like a till. Money and counts are set in Sora with tabular numerals and roll into place digit by digit, the way a till display turns over. The performance figures sit on one hairline like the totals on a Z-read, the report a till prints at the close of the day: label, figure and change on one line each, with no boxes around them.
Teal is drawn, never poured. On the home it is only ever a line or a small mark: the visitor pins on the globe, the line under the selected figure, the chart's line, the share bars, the live dot, the done dots on the tape, and the one primary button. Everything you read stays ink. That keeps teal meaning live or chosen, leaves amber and red free to mean waiting and refunded, and stops the page becoming a wall of colour in which nothing stands out.
The page, live
A working miniature of the home with an invented shop's evening, built from the kit's components. Drag the globe, click a pin to zoom in, change the range, pick a figure, and simulate a sale.
Composition
Top to bottom, each region and what it is made of.
| Region | Built from | What it shows |
|---|---|---|
| Greeting | Display type, Badge | Good morning, afternoon or evening by the hour, with the first name; the date; a live link that pulses teal while people are browsing and rests grey when the shop is quiet. |
| Live globe | Live globe | Everyone browsing the shop right now, as pins on a dotted world: up to 520px on desktop, leading the page on phones. |
| Sales today | Rolling number, Delta | The takings in Sora, then the order count, its change and "vs this time yesterday" on one line, like a till. |
| Next up | Button, Skeleton, Empty state, duotone icons | Up to three jobs under the takings, most urgent first. The first carries the page's one primary button. The Nebula prompt sits under them. |
| Performance | Segmented control, Figure tabs, Rolling number, Delta, Area chart | The range (Today, 7 days, 30 days, 90 days, 12 months), four figures on the Z-read strip, and a 280px chart of the selected one. |
| Latest orders | Avatar, Badge | The newest orders printed down a hairline rail, each row a link to its order. |
| Top products | Avatar, Delta | The five best sellers for the range, each with a bar for its share of the leader. |
| What's new | Badge | One quiet line under a hairline: the latest product update. |
| Plugin widgets | Host blocks | Plugins can add their own blocks at the foot of the home. |
Today
The first screen is the live globe beside today's takings and the next job. Nothing above them but the greeting.
The live globe
The globe shows who is browsing right now and nothing else: live sessions only, never invented, grouped so ten people in London are one pin reading "London · 10". A chip names the place nearest the front. When someone new arrives, their pin flashes and the globe swings round to face them; when everyone is in one place, it parks there and stops spinning.
Drag to turn it, click a pin to zoom in on that country, click anywhere else to zoom out. It pauses when scrolled off screen, and with reduced motion it holds still but still turns on drag. The greeting's "people browsing now" count reads the same live feed, so the two always agree.
Sales today
The takings count paid sales only: pending money has not arrived and refunds have gone back. The order count is every order that was not cancelled. The change compares with yesterday up to the same clock time, so it is as fair at nine in the morning as at nine at night, and it only appears when there is something to compare with.
Before the first sale it reads "No orders yet today". The day's sales refresh every 30 seconds, so the takings roll without a reload, and the takings, the tape and the day's boundaries all use the store's time zone (UK time when none is set).
Next up
Jobs come in a fixed order of urgency, and each hides when there is nothing to do. The first job's tile is tinted teal and its button is the page's one primary. A strained job turns its tile amber while its words stay ink.
| Job | Shown when | Strained when |
|---|---|---|
| Orders to fulfil | Paid orders are waiting to be sent | The oldest has waited a day or more |
| Products running low | Any product is low on stock | The first one is out of stock |
| Finish setting up your store | Setup is not finished or dismissed; a ring round the icon shows progress | Never: it is a nudge, not a problem |
The Z-read strip
Four figures (total sales, orders, sessions and conversion rate) on one hairline, each a figure tab. Changing the range rolls every figure to its new value; picking a figure glides the teal line to it and the chart follows. Today is drawn by the hour ("14:00") and longer ranges by the day ("3 Aug"). The chart sits in a tab panel named after the selected figure.
The tape and top products
Below the chart the page splits 1.35 to 1: the latest orders on the left, the best sellers on the right. Both sit straight on the canvas under a heading and a hairline.
| On the tape | Means |
|---|---|
| Amber ring | Waiting: unfulfilled, or payment pending. |
| Teal dot | Done: fulfilled or shipped. |
| Red ring | Refunded. The amount is struck through in quiet ink. |
- Newest on top, the time in quiet tabular figures at the left of the rail, and the status in words on a badge as well as in the dot.
- A new order prints in at the top: it slides down from under the heading as if fed from a till roll, and its dot transmits twice.
- Top products shows the five best sellers for the chosen range. Each bar is the product's share of the leader, not of all sales, and the bars grow in one after another.
Layout
| Rule | Value |
|---|---|
| Width | Up to 1180px, centred on the canvas, with sections 44px apart (32px on phones). |
| Today | The globe column is up to 520px (the world itself is about 400px across), then 48px, then the takings and Next up. |
| Lists | Latest orders and top products split 1.35 to 1, 56px apart. |
| Below 1100px | Today and the lists each stack into one column: the globe leads, centred, then the takings and Next up. |
| Below 640px | The greeting drops to 24px, the figures go two to a row, job buttons move under their text, the tape drops avatars and badges, and product names wrap. |
Loading and empty
Every region has a loading shape and an empty line of its own, so a new shop's home reads as ready rather than broken.
| Region | Loading | Empty |
|---|---|---|
| Live globe | The world turns with no pins | "No visitors yet today" in the greeting; the globe keeps turning |
| Sales today | £0.00 until the day's orders arrive | "No orders yet today" |
| Next up | Three skeleton rows | "You're all caught up" and one line of what will appear |
| Performance | Shimmering figures and the chart silhouette | "No sales in this period yet" |
| Latest orders | Five skeleton rows on the rail | "No orders yet" and "When customers buy, their orders land here." |
| Top products | Four skeleton rows | "No sales in this period" and "Your best sellers will show here once orders come in." |
Guidelines
- No cards on the home. Sections sit on the canvas under a heading and a hairline; the globe, the takings and the jobs own the first screen.
- Keep the first screen to today. History (the range, the chart, the lists) comes below it.
- Read the takings and the tape from one list of orders, and the globe and the browsing count from one live feed, so they always agree.
- Keep words ink. Colour goes on marks: the dot on the rail, the tile of a strained job, the pill of a delta.
- Label sample data. Invented figures always carry the Sample data badge.
Accessibility
- Each region is a section named by its heading, so the page can be read region by region.
- The globe is a picture of live activity, so its numbers are always written too: the browsing count in the greeting. Its tooltip names it, and its pins can be reached by pointer only, so nothing is found on the globe alone.
- The figures are a tab list, and the chart is a tab panel named after the selected figure.
- Each tape row is a single link to its order, and every status is written as well as coloured.
- With reduced motion the globe holds still (it still turns on drag), and there is no rolling and no printing: figures swap with a fade.