Design system

About

Orbit is a personal project-tracking hub — one place for every project's ideas, issues, designs, and history. It's built to take little space and show off the things it has: the UI stays quiet so the work doesn't.

Typography

Iosevka carries the entire UI — headings, body, labels, code, the works. One instrument, one font. Iosevka's narrow proportions are the most literal answer to "take little space", and using it for both --font-sans and --font-mono keeps the interface tight and tabular. Self-hosted from design/fonts/ as iosevka-400.woff2 and iosevka-700.woff2, SIL OFL.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph with a link, some inline code, and a small caption.

Color

--color-bg
--color-text
--color-muted
--color-border
--color-accent

Spacing

--space-xs
--space-sm
--space-md
--space-lg
--space-xl

Elements

Links and lists

An inline link inside a paragraph.

  1. Ordered item one
  2. Ordered item two

Blockquote

A short quoted line, styled with a left border and muted text.

Code block

function example() {
  return "hello";
}

Table

Column AColumn BColumn C
cellcellcell
cellcellcell

Forms

Components

Brand

The brand mark is a single sodium-orange dot. No wordmark. The dot is Orbit — because orbit's own UI already shows "Orbit" in text whenever it introduces itself, the logo doesn't need to repeat it. The dot sizes to its surrounding text via em units, so it scales naturally.

     

Status dots

Every state orbit tracks is expressed as a small dot. Three tones:

Flow items — ideas, issues, designs, pull requests — within a project use the active/muted pair: sodium if moved within 7 days, grey otherwise.

Projects on the home page and project detail header use all three tones. A project is muted if nothing moved in a week. Among active projects, sage means no open issues or PRs (the project is caught up), sodium means there's open work.

History entries are always sage — they are completed events by definition. The sage tone marks the archive visually.

The brand dot stays sodium always, because orbit itself is by definition present when rendered.

Button

Site header

The top bar on every real page: orbit dot on the left, optional muted actions on the right. Non-sticky.

Section heading

Reusable mono-uppercase-muted label for content sections. Available to any real page via the .section-heading class.

Section name

Project row

Home-page entry. Grid of [dot] [slug/name] [recent change] [time]. On hover, the leading dot grows and pulses in its own tone — the hover affordance comes from the dot, not from the row frame. Three dot states: sodium (active with open work), sage (active, caught up), grey (muted).

Entry row

Shared shape for every flow-stage row. Grid of [dot] [label] [title] [meta], with all rows in a list aligned via CSS subgrid so their columns line up. The label slot carries the item type (idea, issue #N, design, pr #N) in history it carries the local time. Dot tone reflects the item's activity within its current stage.

Meta strip

One line of mono, muted metadata shown under a page h1. A second strip below shows deployment info when available.

code.bas.es/arne/orbit last activity · just now
orbit.fismen.no ssh · orbit last deploy · 3h systemd user service on fismen, fronted by Caddy

Entry story

History entries with a PR description expand on click to reveal the full body. The row is a normal .entry-row (direct grid child) with .entry-row-expandable. The body is a sibling div, also a direct grid child, aligned to the title column via grid-column: 3 / -1. The dot pulses on hover to signal the row is clickable. Click toggles .entry-story-hidden on the body.

Day divider

Separates history entries when the date changes.

2026-04-05
2026-04-04