Design a quiet UI for orbit — monochrome, dots, and Iosevka #4

Merged

arne merged 2 commits from feat/orbit-design-system into main 2026-04-05 11:55:18 +02:00

Conversation 0 Commits 2 Files changed 12 +1653

arne commented 2026-04-05 11:54:39 +02:00

Owner

Copy link

Orbit's MVP rendered with browser-default system-ui and a handful of
ad-hoc styles. That was fine for getting the data flowing but gave orbit
no aesthetic identity — no sense of what a glance at the project page
should feel like. This PR commits to a coherent visual direction that
scales from atoms to pages without rework.

The guiding principle: orbit should take little space and let the content
it holds — projects, ideas, issues, specs — do the showing off. Every
choice falls out of that.

Palette

Warm near-black background with warm cream text, a single sodium-orange
accent for interaction and active state. Everything else is warm greys.
Dark by default, light theme via prefers-color-scheme only — no manual
toggle to clutter the chrome.

Typography

Iosevka carries everything — headings, body, labels, code. One instrument,
one font. Its narrow proportions are the most literal answer to "takes
little space". Self-hosted from design/fonts/ (woff2, weights 400 and
700, SIL OFL). Font loading uses <link rel="preload"> plus
font-display: block to eliminate the flash-of-unstyled-text.

Brand

A single sodium-orange dot. No wordmark — the word "Orbit" already
appears in the text whenever orbit introduces itself, so the brand mark
is pure graphic.

Dot vocabulary

Three tones carry a universal status language. Active (sodium) for
flow items that moved within the last 7 days. Stale (warm grey) for
flow items that haven't. Done (muted sage) for every entry in the
History archive. Flow items decay with time; history is terminal and
uniform. The rule is implemented server-side via a single isActive(t)
helper plus an ActiveWindow = 7 * 24 * time.Hour constant.

Component inventory

.site-header, .section-heading, .project-row, .entry-row,
.entry-list, .entry-expand, .meta-strip, .day-divider, plus the
existing .brand, .dot, .dot-active, .dot-done, .btn atoms. CSS
subgrid keeps entry-row columns aligned across variable label widths.

Project detail page

Flow-based stage model: Ideas → Design → Build → Review → History.
Every item lives in one stage at a time. Empty stages collapse. Raw
ideas and untriaged issues sit in Ideas; developing ideas and in-progress
specs sit in Design; ready-to-ship work sits in Build; open PRs sit in
Review; merged PRs and completed events sit in History.

The spec at design/specs/2026-04-05-orbit-design-system.md is the
canonical reference.

Known cuts

This PR ships the styleguide under design/ and page previews only.
Porting to web/static/orbit.css and web/templates/*.html is a
deliberate follow-up so the system can be lived-with-in-isolation first.

Orbit's MVP rendered with browser-default `system-ui` and a handful of ad-hoc styles. That was fine for getting the data flowing but gave orbit no aesthetic identity — no sense of what a glance at the project page should feel like. This PR commits to a coherent visual direction that scales from atoms to pages without rework. The guiding principle: orbit should take little space and let the content it holds — projects, ideas, issues, specs — do the showing off. Every choice falls out of that. ## Palette Warm near-black background with warm cream text, a single sodium-orange accent for interaction and active state. Everything else is warm greys. Dark by default, light theme via `prefers-color-scheme` only — no manual toggle to clutter the chrome. ## Typography Iosevka carries everything — headings, body, labels, code. One instrument, one font. Its narrow proportions are the most literal answer to "takes little space". Self-hosted from `design/fonts/` (woff2, weights 400 and 700, SIL OFL). Font loading uses `<link rel="preload">` plus `font-display: block` to eliminate the flash-of-unstyled-text. ## Brand A single sodium-orange dot. No wordmark — the word "Orbit" already appears in the text whenever orbit introduces itself, so the brand mark is pure graphic. ## Dot vocabulary Three tones carry a universal status language. **Active** (sodium) for flow items that moved within the last 7 days. **Stale** (warm grey) for flow items that haven't. **Done** (muted sage) for every entry in the History archive. Flow items decay with time; history is terminal and uniform. The rule is implemented server-side via a single `isActive(t)` helper plus an `ActiveWindow = 7 * 24 * time.Hour` constant. ## Component inventory `.site-header`, `.section-heading`, `.project-row`, `.entry-row`, `.entry-list`, `.entry-expand`, `.meta-strip`, `.day-divider`, plus the existing `.brand`, `.dot`, `.dot-active`, `.dot-done`, `.btn` atoms. CSS subgrid keeps entry-row columns aligned across variable label widths. ## Project detail page Flow-based stage model: **Ideas → Design → Build → Review → History**. Every item lives in one stage at a time. Empty stages collapse. Raw ideas and untriaged issues sit in Ideas; developing ideas and in-progress specs sit in Design; ready-to-ship work sits in Build; open PRs sit in Review; merged PRs and completed events sit in History. The spec at `design/specs/2026-04-05-orbit-design-system.md` is the canonical reference. ## Known cuts This PR ships the styleguide under `design/` and page previews only. Porting to `web/static/orbit.css` and `web/templates/*.html` is a deliberate follow-up so the system can be lived-with-in-isolation first.

arne added 2 commits 2026-04-05 11:54:39 +02:00

docs(design): spec for orbit design system 14c8755b83

feat(design): orbit design system — modern monochrome with dot vocabulary 5d939c844f

arne merged commit 61cb73e27c into main 2026-04-05 11:55:18 +02:00

arne referenced this pull request from a commit 2026-04-05 11:55:19 +02:00

feat: orbit design system (modern monochrome, dot vocabulary, iosevka) (#4)

arne referenced this pull request 2026-04-05 13:09:31 +02:00

Render home and project pages with the design system #5

arne referenced this pull request from a commit 2026-04-05 22:06:33 +02:00

Design a quiet UI for orbit — monochrome, dots, and Iosevka (#4)

arne referenced this pull request from a commit 2026-04-05 22:06:33 +02:00

Render home and project pages with the design system (#5)

arne changed title from feat: orbit design system (modern monochrome, dot vocabulary, iosevka) to Design a quiet UI for orbit — monochrome, dots, and Iosevka 2026-04-05 22:08:50 +02:00

arne referenced this pull request from a commit 2026-04-05 22:50:48 +02:00

Render home and project pages with the design system (#5)

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

arne/orbit!4

No description provided.