{"id":50999883,"url":"https://github.com/cablehead/understand-stellar","last_synced_at":"2026-06-20T13:30:52.407Z","repository":{"id":365294104,"uuid":"1271446712","full_name":"cablehead/understand-stellar","owner":"cablehead","description":"Interactive visual reference for the Stellar CSS design tokens, served by http-nu","archived":false,"fork":false,"pushed_at":"2026-06-16T19:07:54.000Z","size":2798,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-16T19:22:02.246Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://cablehead.github.io/understand-stellar/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cablehead.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-16T17:08:27.000Z","updated_at":"2026-06-16T19:10:05.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/cablehead/understand-stellar","commit_stats":null,"previous_names":["cablehead/understand-stellar"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/cablehead/understand-stellar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cablehead%2Funderstand-stellar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cablehead%2Funderstand-stellar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cablehead%2Funderstand-stellar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cablehead%2Funderstand-stellar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cablehead","download_url":"https://codeload.github.com/cablehead/understand-stellar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cablehead%2Funderstand-stellar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34572423,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-20T13:30:49.340Z","updated_at":"2026-06-20T13:30:52.394Z","avatar_url":"https://github.com/cablehead.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eunderstand stellar\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://understanding-stellar.cross.stream/\"\u003e\n    \u003cimg alt=\"understand stellar: every Stellar CSS design token, shown visually\" src=\"./assets/og.png\" width=\"640\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  A visual reference for the \u003ca href=\"https://data-star.dev/pro#stellar-css\"\u003eStellar\u003c/a\u003e CSS framework:\n  every design token, shown visually rather than just named.\n  \u003cbr /\u003e\u003cbr /\u003e\n  \u003ca href=\"https://understanding-stellar.cross.stream/\"\u003eLive site\u003c/a\u003e\n  \u0026nbsp;\u0026middot;\u0026nbsp;\n  \u003ca href=\"#what-it-covers\"\u003eWhat it covers\u003c/a\u003e\n  \u0026nbsp;\u0026middot;\u0026nbsp;\n  \u003ca href=\"#run\"\u003eRun\u003c/a\u003e\n  \u0026nbsp;\u0026middot;\u0026nbsp;\n  \u003ca href=\"https://data-star.dev/pro\"\u003eBuy Stellar\u003c/a\u003e\n\u003c/p\u003e\n\nOne scrolling page that shows every design token Stellar generates, grouped by\nthe decision it serves and demonstrated visually rather than just named. Click\nany token to copy its name; toggle the theme to check both light and dark.\n\nBuilt with [http-nu](https://http-nu.cross.stream): the site is one Nushell\nhandler, served directly. Each page is built with http-nu's HTML DSL and\nrendered once at startup, then served from the closure (see Run). It is hosted\nat\n[understanding-stellar.cross.stream](https://understanding-stellar.cross.stream/).\n\n## Stellar is made by Star Federation\n\nStellar CSS is built by [Star Federation](https://github.com/starfederation),\nthe team behind [Datastar](https://data-star.dev). It ships as part of\n**Datastar Pro**, a one-time, lifetime license that also funds the open-source\nDatastar work.\n\nThis reference exists because Stellar is worth understanding: a complete,\nconfigurable design system as plain CSS tokens, no build step, generated locally\nfrom one config. If you build for the web, it is worth buying:\n[data-star.dev/pro](https://data-star.dev/pro). One purchase covers every Pro\nplugin plus Stellar for the life of the license, and it funds the open-source\nproject. Thanks to the Star Federation team for building it.\n\n## What it covers\n\nEach one is shown visually, not just named:\n\n- **Color**: six color sets, each running 12 shades from light to dark. Every\n  shade comes with a readable `-on` text color and a softer `-dim` for quieter\n  text. Plus brand palettes, chart colors, gradients, and a live code-syntax\n  palette.\n- **Type**: the fluid size scale set as real specimens, every font family shown\n  with the same sentence, weights as a ramp, and line-height / letter-spacing\n  demonstrated on real paragraphs.\n- **Space**: the size scale as bars whose width is the token value, so the\n  geometric rhythm is visible.\n- **Borders \u0026 radius**: boxes with the radius and width applied directly, plus\n  the organic blob and hand-drawn shapes.\n- **Elevation**: shadows cast on surfaces; negative steps press inward as wells,\n  positive steps lift off the page.\n- **Motion**: a **Compose** panel that builds a real transition (property +\n  amount + duration + easing) from the tokens, plays it, and hands you the CSS\n  to copy, plus the raw amount stops. This is how the tokens are used together.\n- **Layout**: z-index cards overlapping in real order, aspect ratios framed at\n  their named proportions, and the viewport bounds that drive the fluid scales.\n\n## Run\n\n```\nhttp-nu --datastar :3000 serve.nu\n```\n\nThen open http://localhost:3000. Any port works; pick one that is free.\n\n## Regenerate stellar.css\n\nThe vendored `assets/stellar.css` is generated from `stellar.config.json` by the\n`stellar` binary, which is license-gated and needs the key in the working\ndirectory. The key is intentionally not committed.\n\n```\ncp ~/stellar.key .\nstellar gen -i stellar.config.json -v\nmv css/stellar.css assets/stellar.css\nrm -rf css stellar.key\n```\n\n`stellar.config.json` drives what the page shows. `serve.nu` reads it to learn\nhow many steps each scale has and the named values (font families, weights,\neasings, brand colors, and so on), so editing the config and regenerating keeps\nthe page in sync. Sections whose config block is `disabled` are skipped.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcablehead%2Funderstand-stellar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcablehead%2Funderstand-stellar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcablehead%2Funderstand-stellar/lists"}