ui library
The design system every meowerse app is built with; it shares its tokens with alxnko.dev.
info: ui library — a library, not a service: it ships inside each app
what it is
- One set of colours, type, spacing and motion, and the components built on them: buttons, fields, dialogs, status lines, the chat prompt and more.
- Dark by default with a light "day paper" theme; every colour combination used for text is checked for WCAG AA contrast by a test.
- Terminal touches (the › prompt, [ ok ] status lines, a blinking cursor on the wordmark) appear only where they keep an app easy to use.
- Its documentation, with every component rendered live, is published on this site.
how it works
- The tokens live in one tokens.json. A script generates the CSS custom properties, and CI fails when the generated file is out of date.
- A drift check compares the tokens with alxnko.dev's copy, so both sites stay one system.
- Components are React, styled only through the generated tokens. Astro renders them to static HTML and hydrates only the ones that need to be interactive.
- JetBrains Mono sets all text and VT323 only the wordmarks, both served as small woff2 files.
at a glance
- package
- @meowerse/ui, in the meowerse monorepo
- components
- React 19, typed with TypeScript
- themes
- dark (default) and light, following the system
- docs
- meow.alxnko.dev/ui/