# Celia's space registry: a dot-matrix globe as the whole signature

**Source.** [smartrules.ai/spaceregistry/](https://smartrules.ai/spaceregistry/) (title "Registry of outer space objects") · captured 02-09-2026 at 1440x900 (desktop) and 375px (phone) · designer Celia, Digital Government Design System, canonical repo `unctad-ai/designstudio`. Full static export copied at `3 - Projects/space-object-registry/reference-celia/spaceregistry/`; four real pages exist: home, `/the-globe/`, `/home2/` (an unrelated banking-template scaffold, ignore it), `/v2/` (the purple variant of home).

**What it is.** A public register of the outer space objects one country has launched, built to the UNOOSA registration convention: a searchable list, an interactive globe showing where each object is, a guide to registering a new one.

**Frank's verdict, verbatim (02-09-2026).** "this is Celia's proposed UI, much better than my version; make a template/skill out of it."

---

## What the eye meets

**A dot-matrix world map is the whole signature.** Not a photograph of Earth, not a wireframe sphere: a globe built from thousands of small dots tracing the continents, always rendered in the page's own accent colour. It appears three times at three sizes: faint and huge behind the hero title, small inside a feature card, full-size and slowly turning (with floating record chips) on its own page.

**One typeface, told apart by weight alone.** No second "display" face anywhere: a heading is not a different font from the body, it is the same font heavier. CORRECTED 03-09-2026: the family is not Inter but the browser's own default sans. Her site declares Inter through next/font and never renders it, because her theme sets its font variable to itself and the declaration falls back. Read in the browser, `document.fonts.check('60px Inter')` is false, no face reports loaded, and the computed family everywhere is `ui-sans-serif, system-ui, sans-serif`. It matters: the same title measures 804px in that stack and 895px in Inter, and her h1 box is 768px wide, so Inter wraps her one-line title onto two.

**Two accent variants, nothing else changes.** The default route runs on a burnt orange (`#d66a2a`); `/v2/` repaints the same page in violet (`#7c3aed`) after the page loads. Same paper (`#fafaf8`), same radius, same type, same spacing, only the one accent hue moves.

**Restrained radius, generous quiet.** Cards round at 4-6px, barely softened; only the search bar, buttons and badges go fully round. Sections run 96-128px tall with nothing crowding a single word.

**A count-up stats band, plainly true.** 8 entries since 2019, 5 in orbit today, 7 object types tracked, 100% reported to UNOOSA - four honest numbers, no invented growth chart around them.

## What we would copy

**The globe as the one recurring motif**, always in the current accent, never neutral grey. A registry that shows objects in orbit earns a real globe more than any other page family would.

**The two-variant accent system**: one hue swap, nothing else, so a country or a section can carry its own colour without a second design.

**The dark hero, light everything-else split.** Only the two globe-carrying sections (hero, `/the-globe/`) go dark; every reading section is her off-white paper. Dark is earned by the globe, not used as a mood.

## What we would refuse

**Building a page's ambient background as pure JS with no static fallback.** The hero's colour and the closing call's wash are painted entirely client-side by three.js, with no class or inline style in the static HTML at all, so a no-JS render of her own page loses them completely. Our rebuild restores them as plain CSS gradients, fitted to eight averaged frames of her canvas: 1.34 per channel off at 1440, 1.06 at 375.

**Declaring a webfont a page never uses.** Eight `@font-face` rules ship Inter on every load and nothing renders in it. The cost is not only the bytes: a rebuild that trusts the declaration gets a different typeface and a wrapped title.

**Leaving a nav link as `href="#"` on a shipped page.** "The register", "How to register", "Specification" all go nowhere yet. Fine for a design proposal, not for anything we publish.

## Measured tokens (read from her compiled stylesheet, not guessed)

| Slot | Value | Source |
|---|---|---|
| `--bg` | `#fafaf8` | `_next/static/chunks/90e61c0d401df48c.css`, compiled `:root` |
| `--fg` | `#0a0a0a` | same |
| `--surface` (her `--muted`) | `#f5f3ee` | same |
| `--accent` (orange) | `#d66a2a` | same, also `globe-simple-orange.svg` stroke |
| `--accent-purple` (`/v2/`) | `#7c3aed` | recovered from a compiled shadow utility's `--tw-shadow-color`, not a static root value (JS-painted after hydration) |
| `--border` | `#e5e5e5` | compiled `:root` |
| radius | `.25rem` / `.375rem` / `9999px` | `.rounded-sm` / `.rounded-md` / `.rounded-full` |
| type | `ui-sans-serif, system-ui, sans-serif, …` | the computed family on body and h1, measured in the browser 03-09-2026. Her 8 self-hosted Inter `@font-face` blocks never load |
| dark surface | `#06050a` | `the-globe/index.html`, literal class `bg-[#06050a]` |

Full scale (font sizes, spacing, shadows, glow colours) in
`3 - Projects/space-object-registry/tokens-celia.css`, one citation comment
per value.

## Where it sits in the studio

Banked here as a model; the working recipe lives as a skill at
`~/.claude/skills/space-registry-ui/SKILL.md` (the measuring loop, the
tokens, the shared stylesheet and script, the component recipes, the
checks). Nine pages sit beside the tokens in the project: three copies of
hers (home, the globe, the violet `/v2/`), four hero variations of her home,
and two of our own pages in her look. All pass `check-tokens.py`,
`token-audit.py` and `slop-check.py` at zero.

**How close the copies are (03-09-2026).** Mean absolute difference per
channel against her live pages, full page, the sliding marquee band
excluded: home 1.05 at 1440 and 0.83 at 375, `/v2/` 0.98 and 0.83, the globe
page 0.81 and 1.15 with both globes frozen. Band by band on the home page,
her stats band is 0.00 and her footer 0.01; what is left is the hero, where
her canvas moves and ours stands still.

**Reached by measuring, not by reading.** The first rebuild followed her
compiled stylesheet and still came out wrong in five places at once. The
repair was a loop: dump the same named landmarks from both pages with
`getBoundingClientRect` and `getComputedStyle`, diff, fix, dump again, then
diff the pixels band by band. The tool is
`3 - Projects/space-object-registry/captures-mine/exact/probe.py`.