Design system
svemir is my personal universe of references: blocks, channels, an idea garden, and a research layer for papers.
This is the system it runs on. A tight set of primitives sits over a single token layer, so nothing is hardcoded and every screen re-themes on command. Change one token and the whole product follows. Everything below is the real code, composed atoms to organisms.
Principles
The four rules the rest of the system falls out of.
Every value is a CSS variable. Components never hardcode a hex, so all four themes work for free: restyle the tokens, not the components.
A single neutral ramp carries the whole UI. Colour is earned: red is reserved for destructive actions, nothing else competes with the imagery.
Image-forward and calm at rest. Context (titles, sources, actions) fades in on hover instead of crowding the wall of references.
One radius floor (xl), one spacing rhythm, one elevation and layering ladder. Consistency is the system; primitives make it repeatable.
Foundations
Tokens, not hardcoded values. Only the neutral ramp + semantic tokens, so the 4 themes keep working.
logo: /svemir.svg · display: font-[family-name:var(--font-display)] / font-displayEleven named colours. The nine chromatic ones cycle deterministically per channel, so a channel keeps the same colour everywhere: its Garden pill and its leaves. The two neutrals are documented but stay out of that rotation, so no channel reads as uncoloured.
Garden leaves draw the channel colour with only a little per-leaf lightness jitter, so the hue lands true and a crown reads as foliage rather than one flat block. Text on a swatch uses inkOn(), which prefers the light ink and only falls back to near-black where light text would drop under 3:1.
channelColor(id) for a channel's colour (Garden pills, leaves) · inkOn(hex) for readable text on a swatchdisplay: font-display uppercase tracking-wider · headings: text-2xl/text-lg font-light · body: text-sm · meta: text-xs · labels: text-[10px] uppercase tracking-wide · handwriting: font-[family-name:var(--font-hand)] / Caveat (guestbook notes only)rounded-xl (floor) · rounded-2xl · rounded-3xl · rounded-fullanimation: panel-in 0.2s ease-out · dialog-in 0.18s ease-out · transition-colors on interactive statesAtoms
Single-purpose elements. These render the real components/ui primitives.
<Pill>Design</Pill> · px-2 py-1 rounded-full<TextInput placeholder="…" /> · <TextInput size="small" />idle = ring · selected = filled + checkMolecules
Compositions of atoms. The Menu here is the exact primitive used by the sort, channel, and block-action menus.
<div className="flex flex-wrap gap-1">…</div><ConfirmDialog open tone="danger" title="Delete?" … /> · shell: Dialog (portal + dialog-in)Organisms
Page-level compositions. BlockCard and ChannelCard render live with mock data; the TopBar above this page is itself an organism.
Hello Tanja!
- T
Hello Tanja!
- T
Hello Tanja!
- T
Hello Tanja!
- T
.paper-note + .paper-note--{grid|torn|tape} (lib/guestbook GUESTBOOK_STYLES) · tint via cardBg(color) · text: font-[family-name:var(--font-hand)] · card: aspect-[4/5]How it's built
A hybrid system: shared primitives are the source of truth; older screens migrate onto them piece by piece.