Design system · v0.3.0

A warm, editorial instrument panel with one amber accent.

Observatory is the design system of the GitHub Backup Automation System: tokens as CSS custom properties and a set of React components, released as two packages any web app installs from a GitHub release. Dark by default, light when the device asks for it.

InstallSource
Latest run

Backup run #1,240

Completed
Repositories
42
Success rate
99.9%
pnpm add @mishrashardendu22/observatory-tokens@0.3.0 @mishrashardendu22/observatory-ui@0.3.0
InstallAdd the two packages from npm, load the stylesheet, transpile the components in Next.js.TokensEvery colour in both themes, the type scale, spacing, radii, shadows and layout, with the rule for each.ComponentsButtons, cards, stat cards, badges, forms, tables, notices and page chrome, each rendered live beside its code.
An amber planet with repositories in orbit
Principles

Five rules that shape every screen.

  • Calm over clever. Big serif statements, lots of space, small quiet UI. Motion only confirms an action.
  • One accent. Amber is the only colour that asks for attention. Status colours describe; they do not promote.
  • Borders, not shadows. Surfaces are separated by a 1px hairline on a slightly lighter ground. Shadows are for things that float.
  • Numbers are the hero. Counts and rates are set in the serif at 36px; everything around them is small and secondary.
  • Hover never moves. Hover changes colour, border or background only. Press scales to 0.98.