Introduction
Static Bloom is a design system for servers on OPEN//77, the community multiplayer platform for Cyberpunk 2077. One palette and one set of tokens style both kinds of interface a server ships: in-game WebUI pages drawn over the game, and the websites around them.
Packages
Section titled “Packages”| Package | Contains | Use it for |
|---|---|---|
@static-bloom/palette |
4 flavors × 24 colors as JS, JSON and CSS variables; semantic and syntax role maps | Raw colors, editor themes, your own tooling |
@static-bloom/css |
Tokens, bundled fonts, base styles, sb-* components and effect utilities |
Plain HTML pages and any framework |
@static-bloom/tailwind |
Tailwind 4 theme (colors, fonts, radius, shadows, animations, effect utilities), cn() |
Tailwind projects |
@static-bloom/vue |
Sb* components on Reka UI, SbProvider, useFlavor, StaticBloomPlugin |
Vue apps, in-game UIs, Astro islands |
@static-bloom/astro |
Integration with a flash-free flavor script, Layout, FlavorSelect, FlavorScript |
Astro sites |
@static-bloom/starlight |
Starlight plugin: full theme, flavor select, Expressive Code themes | Documentation sites |
Each package builds on the one above it: the CSS package reads the palette, the Tailwind theme reads the CSS tokens, and the Vue components are styled with the Tailwind theme.
How it works
Section titled “How it works”- Flavors are attributes.
data-flavorpicks one of four palettes,data-themesays whether it is dark or light,data-accentre-points the primary color. They work on<html>or on any nested element. See Flavors & theming. - Semantic tokens first. Components read roles such as
--sb-canvas,--sb-fg-mutedand--sb-primary, never a raw palette color, so a flavor or accent change restyles everything at runtime without a rebuild. See Color roles. - Cascade layers. The CSS ships in
theme,base,componentsandutilitieslayers, the same names Tailwind uses, so the two compose without specificity fights. - Nothing from the network. Oxanium, Geist and JetBrains Mono are bundled as local font files, because in-game pages may have no network access.
- Gated contrast. Every text color meets WCAG AA or better on the backgrounds it is meant for, in every flavor, and a failing color fails the palette build. See Accessibility.
In the game and on the web
Section titled “In the game and on the web”In-game WebUI pages are full-viewport, transparent Chromium pages drawn over gameplay. That shapes a few rules: no native <select> or date pickers, text on glass or solid panels rather than straight on the scene, and one page for many HUD widgets. In-game UIs explains each one. Websites get the same look plus web-only conveniences such as native selects and CSS tooltips.