Typography | Constellation by Orbit Commerce

Three typefaces

Sora's geometric lowercase echoes the Orbit wordmark and gives money the presence of a till display. Geist does every other job with an instrument's neutrality. All three are variable fonts, self-hosted through fonts.css.

£3,214.80

SoraFigures, greetings, page titles and section headlines. Weight 600.--o-font-display

Paid and waiting to be sent

GeistEvery word of UI: labels, controls, tables, body. Weights 400 to 650.--o-font-sans

SKU ARD-CHR-0042

Geist MonoCode, IDs and SKUs only. Shipped, and not yet used by a component.--o-font-mono

Token	Stack
`--o-font-display`	`'Sora Variable', 'Sora', var(--o-font-sans)`
`--o-font-sans`	`'Geist Variable', 'Geist Sans', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif`
`--o-font-mono`	`'Geist Mono Variable', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace`

The ramp in product

Twelve roles, each set exactly as the components set them. Sora carries the figures and headlines; from Title down, everything is Geist.

Figure heroSora 600 · 38px · 1 · -0.03em · tabularThe day's takings at the head of the home dashboard.
£3,214.80
DisplaySora 600 · 30px, 24px on phones · 1.12 · -0.025emGreetings, the home, and whole-screen states such as a page that was not found.
Good afternoon, Priya
Page titleSora 600 · 24px, 22px on phones · 1.2 · -0.022emThe title at the top of a list, a record or a settings page. The header already names the page, so it stays a step below Display.
Orders
FigureSora 600 · 26px · 1.1 · -0.025em · tabularHeadline figures that double as chart tabs.
£18,420.50
Figure stripSora 600 · 21px · 1.1 · -0.025em · tabularFigures in the Z-read strip, on one baseline with their label.
1,284
HeadlineSora 600 · 20px · -0.025emSection titles on the canvas.
Next up
Dialog titleSora 600 · 19px · 1.3 · -0.025emThe headline voice, a step smaller, inside dialogs.
Delete 3 products?
TitleGeist 600 · 15px · 1.3 · -0.012emCard titles, job titles, list headings.
5 orders to fulfil
BodyGeist 400 · 14px · 1.45The default: rows, fields, descriptions. Menu items at 450.
Paid and waiting to be sent. The oldest has waited 1 day.
ControlGeist 550 · 14px · 1 · -0.006emButton labels. 13px at sm, 12px at xs, 15px at lg.
Save changes
LabelGeist 500 · 13px · 1.3Figure labels and segmented options. Field labels at 550.
Takings today
CaptionGeist 500 · 12px · 1.3Sidebar section titles, menu headings, meta lines, timestamps.
vs this time yesterday
TagGeist 550 · 12px · 1 · tabularBadges and delta pills. 11px at sm.
Unfulfilled · 12

Type tokens

A fixed rem scale for product UI, with a ratio of about 1.14. Components use 2xs to lg; the larger steps are for page titles, headlines and figures.

--o-text-2xs11px · 0.6875remArden chairSmall badges and deltas, nav counts, keycaps, chart axes

--o-text-xs12px · 0.75remArden chairCaptions, meta lines, tooltips, badges, xs buttons

--o-text-sm13px · 0.8125remArden chairLabels, hints, segmented options, sm buttons

--o-text-md14px · 0.875remArden chairThe default UI size: body, fields, menus, buttons

--o-text-lg15px · 0.9375remArden chairCard and empty-state titles, lg buttons

--o-text-xl17px · 1.0625remArden chairPage-level text. Components stop at lg

--o-text-2xl20px · 1.25remArden chairHeadlines: section titles on the canvas

--o-text-3xl24px · 1.5remArden chairPage titles, and Display on phones

--o-text-4xl30px · 1.875remArden chairDisplay: greetings and whole-screen states

--o-text-5xl40px · 2.5remArden chairLarge figures

--o-text-6xl56px · 3.5remArden chairThe largest figures

Leading and tracking

Token	Value	Used for
`--o-leading-tight`	1.15	Large display lines. No component uses it yet.
`--o-leading-snug`	1.3	Titles, labels, dialog titles, tooltips.
`--o-leading-normal`	1.45	Body text, menus, dialogs, cards. The .o-root default.
`--o-tracking-display`	-0.025em	Sora figures and headlines (and the .o-display class).
`--o-tracking-tight`	-0.012em	Titles in Geist: card and empty-state titles.

Tabular numerals

The Till Rule: every numeral is tabular, everywhere. Figures, badges, deltas, fields, times, amounts, shortcuts. Columns of money line up, and a total that changes never shuffles sideways.

Proportional (never)

£1,111.11£8,080.08£410.47£19,999.90

Tabular (always)

£1,111.11£8,080.08£410.47£19,999.90

Figures that change

Money and counts that lead a view are set in Sora 600 and roll into place like a till display. A fall is written with a true minus sign. Take a sale to see it.

Takings today−5.4%vs this time yesterday

Weight in half-steps

Emphasis is tuned, not shouted: Geist moves in steps of 50, so a label can sit a half-step above its value. Synthesised bold is switched off inside .o-root, so a weight is never faked.

Arden ergonomic chair400 Body text, descriptions

Arden ergonomic chair450 Menu items, nested nav, field errors

Arden ergonomic chair500 Labels, nav items, captions

Arden ergonomic chair550 Controls, tags, field labels

Arden ergonomic chair600 Titles, and every Sora figure and headline

Arden ergonomic chair650 Nav counts

In both themes

The same ramp, light and dark. Words stay ink in both.

Light

Good afternoon, PriyaTakings today£3,214.80+12.4%vs this time yesterdayPaid and waiting to be sent. The oldest has waited 1 day.

Dark

Good afternoon, PriyaTakings today£3,214.80+12.4%vs this time yesterdayPaid and waiting to be sent. The oldest has waited 1 day.

Guidelines

Orders1,284

DoSora for the figure, Geist for its label.

Order #1043 · Arden ergonomic chairOrder #1044 · Harbour standing desk

Don'tSora in rows and controls. The Sora Budget Rule keeps it to figures and headlines.

Orders to fulfil

DoSection titles in sentence case, 12 to 13px, in Quiet Slate.