https://github.com/cablehead/understand-stellar
Interactive visual reference for the Stellar CSS design tokens, served by http-nu
https://github.com/cablehead/understand-stellar
Last synced: about 2 months ago
JSON representation
Interactive visual reference for the Stellar CSS design tokens, served by http-nu
- Host: GitHub
- URL: https://github.com/cablehead/understand-stellar
- Owner: cablehead
- License: mit
- Created: 2026-06-16T17:08:27.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-06-16T19:07:54.000Z (about 2 months ago)
- Last Synced: 2026-06-16T19:22:02.246Z (about 2 months ago)
- Language: HTML
- Homepage: https://cablehead.github.io/understand-stellar/
- Size: 2.67 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
understand stellar
A visual reference for the Stellar CSS framework:
every design token, shown visually rather than just named.
Live site
·
What it covers
·
Run
·
Buy Stellar
One scrolling page that shows every design token Stellar generates, grouped by
the decision it serves and demonstrated visually rather than just named. Click
any token to copy its name; toggle the theme to check both light and dark.
Built with [http-nu](https://http-nu.cross.stream): the site is one Nushell
handler, served directly. Each page is built with http-nu's HTML DSL and
rendered once at startup, then served from the closure (see Run). It is hosted
at
[understanding-stellar.cross.stream](https://understanding-stellar.cross.stream/).
## Stellar is made by Star Federation
Stellar CSS is built by [Star Federation](https://github.com/starfederation),
the team behind [Datastar](https://data-star.dev). It ships as part of
**Datastar Pro**, a one-time, lifetime license that also funds the open-source
Datastar work.
This reference exists because Stellar is worth understanding: a complete,
configurable design system as plain CSS tokens, no build step, generated locally
from one config. If you build for the web, it is worth buying:
[data-star.dev/pro](https://data-star.dev/pro). One purchase covers every Pro
plugin plus Stellar for the life of the license, and it funds the open-source
project. Thanks to the Star Federation team for building it.
## What it covers
Each one is shown visually, not just named:
- **Color**: six color sets, each running 12 shades from light to dark. Every
shade comes with a readable `-on` text color and a softer `-dim` for quieter
text. Plus brand palettes, chart colors, gradients, and a live code-syntax
palette.
- **Type**: the fluid size scale set as real specimens, every font family shown
with the same sentence, weights as a ramp, and line-height / letter-spacing
demonstrated on real paragraphs.
- **Space**: the size scale as bars whose width is the token value, so the
geometric rhythm is visible.
- **Borders & radius**: boxes with the radius and width applied directly, plus
the organic blob and hand-drawn shapes.
- **Elevation**: shadows cast on surfaces; negative steps press inward as wells,
positive steps lift off the page.
- **Motion**: a **Compose** panel that builds a real transition (property +
amount + duration + easing) from the tokens, plays it, and hands you the CSS
to copy, plus the raw amount stops. This is how the tokens are used together.
- **Layout**: z-index cards overlapping in real order, aspect ratios framed at
their named proportions, and the viewport bounds that drive the fluid scales.
## Run
```
http-nu --datastar :3000 serve.nu
```
Then open http://localhost:3000. Any port works; pick one that is free.
## Regenerate stellar.css
The vendored `assets/stellar.css` is generated from `stellar.config.json` by the
`stellar` binary, which is license-gated and needs the key in the working
directory. The key is intentionally not committed.
```
cp ~/stellar.key .
stellar gen -i stellar.config.json -v
mv css/stellar.css assets/stellar.css
rm -rf css stellar.key
```
`stellar.config.json` drives what the page shows. `serve.nu` reads it to learn
how many steps each scale has and the named values (font families, weights,
easings, brand colors, and so on), so editing the config and regenerating keeps
the page in sync. Sections whose config block is `disabled` are skipped.