Excelsior
Summary
Excelsior is the React design system of Accentio Studios, on Base UI with token-driven Tailwind 4 theming. It started inside the Accentio Studios website and became its own library: 56 components across atoms, molecules, organisms and templates, one subpath per component so React Server Components stay out of client bundles, a token pipeline shared with Flutter, and an accessibility layer enforced by tests. Accentio Payments builds its whole staff panel on it.
Highlights
One subpath per component60 component subpaths, from 7 at the start of the library
Exported each component on its own subpath and marked cross-component imports as external in the build, so no server component lands in a client chunk; a guard and a server-render test check it.
DTCG tokens for two platforms420 tokens; 67 semantic tokens per theme
Wrote the design tokens in DTCG JSON and built them with Style Dictionary into CSS variables and a tokens.json that Flutter apps read, with golden snapshots and a Tailwind namespace check.
Accessibility enforced by tests287 contrast pairs, checked in both themes
Measured every color pair a component paints over the translucent layers composited onto its real surface, in both themes, against WCAG 2.1 (4.5:1 for text, 3:1 for UI), and tested focus rings.
Test suite and reference docs142 Vitest files with about 2,170 test cases and 20 Playwright specs
Covered the library with Vitest and Playwright and shipped 62 reference pages inside the package.