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.
- 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
softpalette, 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).
npm install @junoput01/junouiimport '@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/@junoput01/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.
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) |
| 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 |
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)
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.
Versioning, changelog and npm publish are fully automated with
Changesets. Add a changeset with your
change (npm run changeset) and open your PR. On merge to main, the Changesets
GitHub Action opens (or updates) a "chore: version packages" PR that applies the
pending changesets and bumps the version; merging that PR — once no changesets
remain — publishes @junoput01/junoui to npm automatically. No manual npm run version step. Bump by the token contract: remove/rename a token or class → major,
additive → minor, fix → patch. See CONTRIBUTING.
MIT