Skip to content
Orbit

Brand and design system

The Orbit brand system.

One identity for the website, the Windows app and the Chrome extension: the logo, its icons, colour, type, tokens and the components built from them.

Construction of the Orbit symbol on a 24 unit gridr 9.470°core r 3.25 × 5stroke 2.6024

(02)Symbol

Built on a 24 unit grid, like the icons around it.

Orbit
A circle of radius 9.4, stroked at 2.6 with round ends, open for 70 degrees at the top right.
Core
A solid circle of radius 3.2 at the centre.
Satellite
A 5 by 5 square centred on the orbit at 45 degrees, in violet. It is the only colour in the mark.
Wordmark
A monoline drawn with the same geometric bowls and stems as the template's type, with a square i dot.
  • Don't rotate the symbol
  • Don't close the orbit
  • Don't change the colours
  • Don't stretch the wordmark

(03)App icons

Legible from the taskbar to the tab.

The symbol on a rounded ink tile. On ink the satellite turns a lighter violet, and on the violet favicon tile everything turns white.

Windows app

  • 128
  • 64
  • 48
  • 32
  • 24
  • 16

Taskbar, Start menu, title bar and installer. Exported from a 256 unit master.

Chrome extension

  • Orbit Chrome icon at 128 pixels128
  • Orbit Chrome icon at 48 pixels48
  • Orbit Chrome icon at 32 pixels32
  • Orbit Chrome icon at 16 pixels16

Toolbar and Chrome Web Store, with the standard transparent margin around the tile.

Favicon

  • Orbit favicon at 64 pixels64
  • Orbit favicon at 32 pixels32
  • Orbit favicon at 16 pixels16

The violet tile reads on both light and dark browser tab strips.

In context

(04)Colour

Ink on paper, one violet accent.

Black type on white, hairline grids and violet used sparingly: for the satellite, for focus and for things that are happening. Click a swatch to copy it.

Task states

(05)Typography

Host Grotesk, with DM Mono labels.

A grotesk set tight for headlines and loose for reading, and a mono for labels, paths, timings and anything technical.

Host Grotesk · sans and headings

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

DM Mono · labels and data

Aa

Documents\Orbit\Leads
(813) 555-0142 · 1m 15s · #7C3AED

  • Display

    Host Grotesk 500 · up to 120 px · tracking −6%

    Your work, done.

  • Heading

    Host Grotesk 500 · up to 80 px · tracking −4.5%

    One agent, seven kinds of work.

  • Title

    Host Grotesk 500 · 24 to 28 px · tracking −3%

    Find business leads

  • Body

    Host Grotesk 400 · 15 to 18 px · line height 1.6

    Orbit plans the task, uses its tools and comes back with the finished work.

  • App text

    Host Grotesk 400 · 13 to 14.5 px

    Collected names, phone numbers and websites from 10 listings.

  • Label

    DM Mono 400 · 10.5 to 12 px · uppercase · tracking +12 to 14%

    (03) Features · Running · 1:12

(06)Tokens

Hairlines, squares and quiet motion.

The same values run the website, the app and the extension. They live as CSS variables and Tailwind tokens in one stylesheet.

Spacing · 4 px base

  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 64
  • 96
  • 144

Radius

  • Surfaces · 0

    Cards, panels, inputs, dialogs

  • Controls · Full

    Buttons, tags, toggles

  • OS chrome · 8 to 10 px

    Windows and Chrome frames only

Borders and depth

1 px hairline in Line. Surfaces stay flat.

One soft shadow, only for things that float: dialogs, popups, toasts.

Dot matrix · six levels

1
2
3
4
5
6

Every illustration is squares on a grid, from a faint dithered speck to a dense violet block.

  • Reveal0.9 s · cubic-bezier(0.22, 1, 0.36, 1)Sections fading up as they scroll in
  • Headline1.1 s · same curve · 60 to 90 ms staggerWords sliding up from a mask
  • Interface0.15 to 0.3 sHover, focus, toggles, dialogs
  • Running1.2 to 1.5 s loopsIndeterminate bars and pulsing squares, never a fake percentage

(07)Components

The same parts, in every window.

These are the live components the desktop app and the extension are built from, not drawings of them.

Buttons

Inputs

Status

RunningNeeds youDoneFailedStopped
ReadyOffline test modeNot connected
Google MapsSample dataCtrl N
On

Activity

ActivityStep 5 · 1:12

  1. Searching Google Maps

    6.4s
    Google Maps

    Searched “HVAC companies near Tampa, FL” in a new Chrome tab

  2. Collecting business details

    48s
    Chrome

    Read 10 listings and copied names, phone numbers and websites

  3. Checking websites

    Web

    Visited the 9 websites to confirm they load

Approval · try it

Approval needed · Submit a form

Orbit needs your approval

You're about to submit a form on the current website.

Wherebayshoreair.example/contact

Bayshore Air & Heat will receive this message. A submitted form can't be taken back.

Notices and files

Example run

Sample data, replayed in the preview.

Paused on a CAPTCHA

FFmpeg isn't installed

hvac-tampa-leads.csv

Documents\Orbit\Leads · 1.2 KB

(08)Voice

Plain, specific and calm.

Orbit says what it will do before it does it, reports what actually happened, and never oversells.

  • Do: I'll fill in the form and ask you before I submit it.

    Don't: Leave it all to me!

  • Do: This task needs an AI model. Add a key in Settings.

    Don't: Oops, something went wrong!!

  • Do: Found 10 companies. 9 have a website.

    Don't: Here are some amazing results for you.

(09)Downloads

Every asset, as SVG.

Vector masters for the logo, symbol and icons. Export PNG and ICO sizes for the Windows build and the Chrome Web Store from these.