Excelsior
Resumo
O Excelsior é o design system React da Accentio Studios, sobre Base UI com theming por tokens em Tailwind 4. Nasceu dentro do site da Accentio Studios e virou uma biblioteca própria: 56 componentes entre átomos, moléculas, organismos e templates, um subcaminho por componente para que os React Server Components fiquem fora dos bundles do cliente, um pipeline de tokens compartilhado com o Flutter e uma camada de acessibilidade garantida por testes. O Accentio Payments constrói todo o painel de staff sobre ele.
Pontos-chave
Um subcaminho por componente60 subcaminhos de componentes, a partir de 7 no início da biblioteca
Exportou cada componente no próprio subcaminho e marcou como externas as importações entre componentes no build, assim nenhum server component cai num chunk de cliente; uma guarda e um teste de render no servidor verificam isso.
Tokens DTCG para duas plataformas420 tokens; 67 tokens semânticos por tema
Escreveu os design tokens em JSON DTCG e os compilou com Style Dictionary em variáveis CSS e num tokens.json que os apps Flutter leem, com snapshots golden e uma checagem do namespace do Tailwind.
Acessibilidade garantida por testes287 pares de contraste, verificados nos dois temas
Mediu cada par de cores que um componente pinta sobre as camadas translúcidas compostas na superfície real, nos dois temas, contra a WCAG 2.1 (4,5:1 para texto, 3:1 para UI), e testou os anéis de foco.
Suíte de testes e referência142 arquivos de Vitest com cerca de 2.170 casos de teste e 20 specs de Playwright
Cobriu a biblioteca com Vitest e Playwright e incluiu 62 páginas de referência dentro do pacote.