nim·bus (n.) — 1. a cloud. 2. a halo of light around a thing.
eternalcloud's personal design system. Night-sky surfaces, one warm light, buttons you can press.
This system was extracted, not invented. Every value in
tokens.css was distilled from design decisions that
already recur across the personal projects — the dark layered neutrals
and hairlines of codekanban, the #0b1220 sky of double-ttt, the
honey and pressable-key physics of pogo-kids (built for the kids),
and habits that show up everywhere: mono for data, pill chips,
tracked-out micro-labels, the ⬡ sigil.
Two lights on a night sky:
| Light | Token | Job |
|---|---|---|
moon #82A7FF |
--moon |
Every interactive thing — links, buttons, focus, active filters |
honey #F2C14E |
--honey |
Identity only — the sigil, text selection, the pinned/current marker |
The tension between them is the brand: pragmatic tools with one warm light left on.
- Honey never becomes a button. Interaction is moon; identity is honey.
- Nothing glows except the nimbus. Shadows are neutral and low; the sigil's halo is the only colored glow.
- Mono is for data. Metrics, timestamps, counts, hex —
--mono, tabular numerals. Prose never. - The display face is a guest; the body is the house. Space Grotesk for headings (self-hosted), system stack for body — body text never waits for a webfont.
- Edges are drawn, not shaded. 1px hairlines; dashed hairlines for empty states.
- Never pure black, never pure white. Surfaces layer up one step at a time.
- Buttons travel. 2px hard bottom edge, 1px downward travel on press.
- No colored left-border stripes. State is worn as a pill with a dot.
- Micro-labels are uppercase, tracked
.08em, and dim. - Motion is 120–320ms and functional. Only the sigil breathes.
prefers-reduced-motionalways respected.
tokens.css— the tokens, with provenance comments. Dark (night) is default;[data-theme="day"]is the warm-paper counterpart.nimbus.css— component layer (nb-prefix): buttons, pills, status, cards, fields, toast, table, sigil, constellation texture.index.html— the living showcase.vendor/— self-hosted Space Grotesk 400/500 + JetBrains Mono 400 (woff2).
<link rel="stylesheet" href="tokens.css" />
<link rel="stylesheet" href="nimbus.css" />
<body> <!-- night by default -->
<body data-theme="day"> <!-- warm paper -->Tokens are named by purpose, never by hue — if a hue changes, no class names lie.
Space Grotesk (400/500) and JetBrains Mono (400) are self-hosted in
vendor/, both under the SIL Open Font License.
Body text is always the system stack; the webfonts are enhancement,
never a dependency.
Code and tokens are MIT — take anything useful. The nimbus name and the ⬡-with-a-light sigil identify my work, though: if you fork this as your own system, please rename it and give it your own mark. That's the fun part anyway.