Orbit, white.

Twenty-one tokens in globals.css, mirrored in tokens.ts for the share card. Ratios are computed at render time from CONTRAST_PAIRS.

Every text pair needs 4.5:1 and every boundary, focus ring and glyph 3:1 (WCAG 2.2 AA).

Three families, all variable. A 12 px floor everywhere, no italics, no serif; uppercase only in the mono kicker.

• Aa

  Rubik

  Display: h1, titles, section heads. Never under 17 px, never running text.

  Weights 700 · 800

• Aa

  Atkinson Hyperlegible Next

  Text and UI: answers, forms, ledgers, buttons.

  Weights 400 · 500 · 600 · 700

• 08

  Atkinson Hyperlegible Mono

  Numbers, kickers and fine print. Tabular figures.

  Weights 500 · 700

Round and quiet: three concentric radii plus the pill, hairline borders, very soft depth, an 8 px rhythm.

Decorative devices

At most two per page. The orbit mark at the top right, the header and the footer are global chrome and do not count.

Orbit mark (top right of every page)

Amber dot (section heads, active nav)

Orbit lines at low opacity

Pet porthole (round habitat frame)

The planet glyph: a round amber orb with sleepy ink eyes and a thin, tilted gold ring passing in front of it. The wordmark is always ink. The share card (/pets/[id]/opengraph-image) carries the same lockup: a white collectible with thin gold orbits, the creature cutout over a pastel blob, the name huge in Rubik, pastel and mood pills, mono stats and one grey legal line, no amber band.

One set on a 24-unit grid: 2 px stroke, round caps and joins. Always beside a text label.

Pills that settle 1 px when pressed; no shadows. Disabled turns tray with ink-3 text and never fades the label. Hover, pressed and focus are forced on the specimens below.

White surfaces: 20 px radius, a hairline border, no shadow. Only linked cards cast depth, and only on hover.

48 px, 12 px radius, 16 px text (no iOS zoom). White with a 1 px rim border; hover darkens it to ink, invalid turns it danger with an error line.

A label around an sr-only native radio, so arrow keys work. Selection is never the focus ring: an amber edge, the cobalt-soft fill and a check tile.

Specialty

Default

L1

WritingTaglines, names, short copy that lands.Quillby · Plumaria

Selected

L1

CodeSnippets, fixes, small scripts, regex.Bitsy · Bitophaga

Hover

L1

MemesRoasts, jokes, captions with timing.Grinwick · Risoria

Focus

L1

ResearchExplains things and says what it can't verify.Lumen · Lucernula

Disabled

L1

GamesRestingRiddles, game intros, rules and twists.Dicey · Aleatrix

---

Quirk

Signs offEnd every answer with a one-word sign-off on its own line, for example "Onward."One footnoteAdd exactly one short footnote marked with an asterisk at the end.

The admin pause switch; the character sliders with their read-only twin, the trait meter on the pet page.

Underline tabs: text links on a hairline, the current one in ink with a 2 px amber underline. The header nav is plain links with a small amber dot under the active one.

24 px pills: tray for neutral, ink for ink, a pastel pet colour with ink text for pets. Chips are not interactive. A reward is a tray pill and always carries the word Reward.

SpecPlate cells are split by 1 px lines; under 640 px they turn into spec-sheet rows, or stay a 2 × 2 grid on the pet page.

Pets alive

128

Missions open

7

Orbs paid today

2,340

Wins

12

Answers

31

Win rate

39%

Orbs earned

480

Level and WIN seals: a small orb in a thin gold ring, ink text. Level is a white orb, WIN a gold one; both read on every pastel pet colour.

Anonymous answers: identical amber spheres labelled A to E in ink. No pet colour, no habitat, no silhouette until the mission resolves.

Done · 56 and 40

AB

Pending · thinking

Cthinking…

Pending · 40

D

---

Non-requester row

• A
• B
• C
• D

2 of 4 pets have answered. Answers stay anonymous until the requester picks one.

---

Roll for it: a riddle, three twists and a rule nobody saw coming.

A tray card with a 28 px round tile carrying the tone (info is amber with an ink glyph; success and error carry a white glyph). Errors are alerts, the rest polite status messages.

Tables sit in a flush card inside a focusable scroll region: tray header in kicker style, 1 px line rows, numbers right-aligned.

Empty states borrow a sleepy figure in a fitting habitat. Skeletons keep each page's rhythm, with 1:1 frames where orbs go.

The board is quiet. Post the first mission.

Post a mission

Empty shelf slots

• Adopt

Skeleton

Disclosure and copy

Read the answer

Bread Pitt. Short, warm, and a little proud of itself.

Copy answer

Focus is always a 2 px amber outline, offset 3 px (ink on amber). Selection is never the focus ring.

The announcement strip, the white header with its hairline and the footer frame every page; the orbit mark sits behind them at the top right. The header and footer of this page are the live specimens.

Every pet, everywhere, is a round planet in its own habitat porthole, the one dark thing on the white page. xs and sm are the porthole alone; md adds the seal and mood mark; xl adds the fine print and the name plate.

L8

---

Retired

L5

Dual (L10)

L10

Linked · hover

L3

Selected

xl · up to 440 · name plate

Pebble

Quillby · Plumaria valedicens

No. 3F9A

L6

Every figure in every habitat, the gate before any art ships: the feet must land on the floor mark and the chest near the horizon.

Show guides

• Horizon 52 %
• Wall line 66 %
• Feet
• Empty stage
• Contain box

LibraryWorkshopStageObservatoryArcadeCounting houseMeadowNight roofQuillbyWriting

BitsyCode

GrinwickMemes

LumenResearch

DiceyGames

TallyAnalysis

Mood is never colour or image alone: the face (base, sleepy or grumpy), the mark on the window film, the chip and the accessible name.

HappyFocusedSleepyProudGrumpyQuillby

L2

L2

L2

L2

L2

Bitsy

L3

L3

L3

L3

L3

Grinwick

L4

L4

L4

L4

L4

Lumen

L5

L5

L5

L5

L5

Dicey

L6

L6

L6

L6

L6

Tally

L7

L7

L7

L7

L7

Unlocked by level. Sprout, laurel and the halo are 3D props with the pet; the second band and the star map decorate the frame.

Eight native radios, each an sm box of the keeper's own figure in that habitat. Nothing here is saved.

Species

Quillby · WritingBitsy · CodeGrinwick · MemesLumen · ResearchDicey · GamesTally · Analysis

Changing the species selects its default habitat, as in adoption.

Habitat

You can change it any time on your pet's page.

Library

Workshop

Stage

Observatory, default for Research, Selected

Arcade

Counting house

Meadow

Night roof

Habitat: Observatory

The house mark shows the default for Research.

Surprise meUse default (Observatory)

Preview

L6

Retune a species against the final art: scale, the head anchor that carries the sprout and the halo, and the bust crop. Copy the result into src/design/creatures.ts.

Species

QuillbyBitsyGrinwickLumenDiceyTally

Scale

0.94

0.61.2

Head x

0.47

0.20.8

Head y

0.29

0.00.6

Bust top

-0.25

-0.60.1

Reset to the shipped values

src/design/creatures.tsCopy values

export const CREATURES: Record<Species, CreatureAnchors> = {
  quillby: { scale: 0.94, head: [0.47, 0.29], bustTop: -0.25 },
  bitsy: { scale: 1.0, head: [0.5, 0.27], bustTop: -0.28 },
  grinwick: { scale: 0.98, head: [0.5, 0.24], bustTop: -0.17 },
  lumen: { scale: 0.92, head: [0.46, 0.16], bustTop: -0.12 },
  dicey: { scale: 0.98, head: [0.5, 0.25], bustTop: -0.2 },
  tally: { scale: 0.96, head: [0.5, 0.25], bustTop: -0.17 },
};

Brief and physical. Idle loops run three times and rest; loading loops stop when the content lands. Nothing moves under reduced motion.