Aster

Style guide

The foundation layer. Every token below comes from the brand mockup — deep navy, muted blue-white, one warm gold. Sharp corners, hairline borders, light used sparingly so it means something when it appears.

01

Color

Three families and nothing else. Ink carries a blue cast at every step — never pure black. Gold is the only warm hue in the system, which is what makes a highlighted star read instantly.

Ink — depth
ink-950
#05070c
Void, canvas edges
ink-900
#080b12
Page floor
ink-850
#0b0e16
Canvas — brand base
ink-800
#0f1420
Raised surface, card
ink-700
#141a28
Hovered surface
ink-600
#1b2233
Pressed, inset well
ink-500
#232c40
Dividers, top elevation
Star — muted blue-white
star-bright
#f2f6fd
Max emphasis, rare
star
#d8e2f2
Body text, resting star
star-muted
#8790a3
Secondary text
star-dim
#75829e
Metadata, captions — the AA floor
star-faint
#3a4560
Strokes and disabled only — never text
Gold — active & highlighted
gold-bright
#f2cf95
Hover, peak highlight
gold
#e3b262
Active, focused, lineage
gold-deep
#b8873f
Pressed
gold-dim
#7a6238
Connective lines
gold-wash
#2a2115
Tinted fill
Hairlines
line
Default border
line-strong
Hover, emphasis
line-gold
Active record
02

Type

Fraunces for anything that names a person — it has genuine quirk, especially in italic with the WONK axis on. Space Grotesk for dates, labels and controls. Numbers are always tabular so a timeline never jitters.

The pairing
Wiktoria Wysocka
·Kraków → Chicagoc. 1911

Sailed from Hamburg with two trunks and her sister's address sewn into a coat lining. The name on the manifest is spelled three different ways.

Display — Fraunces
96px
text-6xl
Aster
72px
text-5xl
Wiktoria
52px
text-4xl
Józef Wysocki
38px
text-3xl
Three generations
28px
text-2xl
Left Kraków, 1911
22px
text-xl
Section heading
UI & metadata — Space Grotesk
18px
text-lg
Lead paragraph, panel intro
15px
text-base
Body copy — the default reading size for bios and story fragments.
13px
text-sm
Secondary copy and captions
11px
text-xs
Uppercase metadata label
10px
text-2xs
Tag / micro label
Display
Fraunces
Names, headings
Sans
Space Grotesk
Dates, labels, UI
Mono
51.7592° N
Coordinates, IDs
03

Space & shape

A 4px base unit. Radii top out at 6px — the only true circles in Aster are stars and avatars. Softness is reserved for light, never for edges.

Spacing — multiples of 4px
1
4px
2
8px
3
12px
4
16px
6
24px
8
32px
12
48px
16
64px
24
96px
Radius
none
0px
xs
1px
sm
2px
md
3px
lg
4px
xl
6px
full
px
04

Elevation & light

Two separate ideas. Shadow lifts a surface off the floor; glow is emitted light and belongs to stars and lineage lines only. Never use glow as decoration on a container.

shadow-hair
Inset hairline
shadow-lift
Card off the floor
shadow-panel
Detail panel, modal
shadow-glow
Star at rest
shadow-glow-gold
Active / traced
shadow-inset-well
Sunken track
resting
near
active
05

Components

Enough surface area to check the vibe: one button, one card, one tag. Everything else in Aster should be assembled from these.

Button
Card
Person · b. 1887

Wiktoria Wysocka

Two marriages, four children, one crossing. Most of what we know comes from a single letter.

Maternal lineDate approximate
Person · b. 1912

Józef Wysocki

The focused record. Border warms, title turns gold, corner ticks mount it like a photograph.

Selected3 events
Tag
DefaultWith dotActiveFilledUncertain

The dashed uncertain variant is the system's convention for unverified data — approximate dates, unconfirmed relationships. Reserve it; it only works if it stays rare.

Pending button

Every form worth waiting for talks to something slow and outside the process — a mail server, Google, the database. Without this the page looks inert and gets clicked again, and a second click on “send me a link” is a second email in somebody’s inbox. Press it: the action below sleeps for two seconds on purpose.

Menu

Anchored to a point rather than to an element, because on the canvas that point is wherever the pointer was. Keyboard navigable, closes on Escape or an outside click, and tone="warn" marks anything destructive.

Account badge

The whole of the app’s chrome. The sky is a full-bleed canvas with no room for a navigation bar, so this one disc in the corner is it — deliberately star-shaped rather than a rounded avatar, at the size the canvas draws a distant relative.

The second has no name set, so it falls back to the local part of the address.

06

Fields

Added in Phase 6, when records became writable. The rule is that edit mode is the read view with the values made editable — same grid, same order, same size — so a hairline appearing under a value is the only thing that changes.

reads as 1888–1892, around 1890

Every value at once, because the four of them are a scale.

Too many to lay flat, so a menu — on the same surface as the sky's.

Fragment list
07

Motion

Defined now so Phases 3–5 don't invent their own. Everything decelerates; nothing is linear. All of it collapses under prefers-reduced-motion.

ease-astral
cubic-bezier(.16, 1, .3, 1)
Camera moves, panel entry
ease-drift
cubic-bezier(.32, .72, 0, 1)
Pan, zoom, momentum
ease-settle
cubic-bezier(.4, 0, .2, 1)
Small state changes
animate-twinkleanimate-pulse-core