@junoput01/junoui

v0.3.0

Published

8 days ago

junoui — a token-driven design system. Color carries semantic meaning, never decoration: every hue has one assigned role (NOMINAL / ACTIVE / TARGET / CAUTION / WARNING). Ships multi-platform tokens (CSS, SCSS, JS/TS, JSON, Android, iOS, Flutter) plus a fr

0High
0Medium
0Low

junoput01

design-system design-tokens style-dictionary css-variables theme dark-mode accessibility colorblind dashboard icons

junoui — a modern, accessible UI foundation

junoui is a design system for building interfaces that are modern, futuristic and visually pleasing while staying highly readable and genuinely accessible — for critical systems where legibility is a safety concern, and for everyday apps that simply deserve to feel good to use.

Mechanically, it is the single graphics source for your UIs: you build the UI skeleton; junoui defines color, spacing, typography, radii and sizing. Tokens are authored once and compiled to every platform.

Goals

Look modern. A futuristic, cohesive aesthetic — dark-first, high-contrast OKLCH color, mono numerics, deliberate density and motion — that reads as considered, not decorated.
Be accessible by reference, not by vibes. Built to the international web accessibility standards — WCAG 2.2 (AA throughout, AAA where it counts) and WAI-ARIA — and we cite the exact success criteria we meet, per component. See Accessibility.
Stay readable. High text contrast, fixed-width digits that don't jitter, color-blind-safe palettes, a low-fatigue soft palette, and visible focus at all times. Readability is the default, not an option you switch on.
Keep improving. Usability and accessibility are a moving target; junoui treats them as ongoing work — tightening contrast, coverage and standards references release over release, never regressing them.

Semantic-first: color encodes status, never decoration — every hue has one role (NOMINAL · ACTIVE · TARGET · CAUTION · WARNING).

Install

npm install @junoput01/junoui

import '@junoput01/junoui/css'; // styles + 30+ components
import { TOKENS, getTokens } from '@junoput01/junoui'; // values in JS/TS
// icons: the SVG sprite resolves at '@junoput01/junoui/icons'

<html data-juno-palette="standard" data-juno-mode="dark">
  <span class="juno-badge juno--warning">WARNING</span>
  <svg class="juno-icon juno--active" aria-hidden="true">
    <use href="node_modules/junoui/dist/icons/juno-icons.svg#juno-i-bell" />
  </svg>
</html>

3 palettes (standard · colorblind · soft) × 2 modes (dark · light), switched by two HTML attributes.

Platforms

One source → every target. Web keeps authored oklch(); native/Flutter get build-time sRGB hex (identical rendering).

| Web | Native | Cross-platform | | ---------------- | -------------------------- | ------------------------------- | | CSS, SCSS, JS/TS | Android (xml), iOS (Swift) | Flutter (Dart), JSON (W3C DTCG) |

Documentation

| | | | -------------------------------------------------------------------------------- | ------------------------------------------------------------ | | Getting started | Install, model, what ships | | Integration | Consuming in an app: import order, fonts, token bridge | | Web · Native · Flutter | Per-platform usage | | Design guidelines | Color semantics, a11y — for any tool | | Layout | Responsive primitives + container queries (how blocks adapt) | | Accessibility | WCAG 2.2 + WAI-ARIA references, focus, motion, targets, RTL | | Token reference | Every token + value + platform name (generated) | | Components | 30+ — forms, overlays, table, alerts, tabs, icons, nav, more | | Contributing | Add tokens/components, lint, test, release | | Roadmap | Missing capabilities, prioritised |

Repository

tokens/        DTCG token source — the single source of truth
src/css/       authored CSS layer (base, utilities, components)
src/icons/     vendored SVG icon sources (Phosphor bold, MIT) → sprite
dist/          built outputs (generated; gitignored)
docs/          guides + generated token reference
showcase/      interactive demo (repo-only — not in the npm package)
scripts/       build helpers (css bundle, doc gen, color conversion)
design/        original Claude Design canvas source (reference)

Develop

npm install          # installs deps and builds dist/ (prepare)
npm run build        # tokens (Style Dictionary) + CSS bundle + icon sprite
npm run gen-docs     # regenerate docs/tokens-reference.md
npm run showcase     # build + serve the showcase at :8137
npm test             # build + node:test integrity suite
npm run test:visual  # Playwright screenshot diff (needs `npx playwright install chromium`)

Edit values in tokens/, rebuild, and every platform updates together. The interactive demo lives at showcase/ and is excluded from the published package.

Releasing

Versioning + changelog are automated with Changesets. Add a changeset with your change (npm run changeset). This repo does not allow GitHub Actions to create pull requests, so prepare the "Version Packages" PR manually with npm run version; once that PR is merged, CI publishes to npm. Bump by the token contract: remove/rename a token or class → major, additive → minor, fix → patch. See CONTRIBUTING.

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme