meowerse_

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.
From tokens to apps: tokens.json generates the CSS variables, the React components use them, and every meowerse app ships them.tokens.jsonone source of truthtokens.gen.cssgenerated, checked in ci@meowerse/uireact componentsthe appsauth, meowsenger, this site

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/