Democratizando Design Systems e Acessibilidade com bdsg

Opa pessoal!

Quero mostrar uma ferramenta que tô desenvolvendo e que pode mudar a forma de criar Design Systems: a biblioteca bdsg (Base Design System Generation). A ideia é simples, mas ambiciosa: facilitar a criação de Design Systems sólidos e acessíveis.

Por que é tão complicado criar um Design System?

Design Systems são ótimos: deixam tudo consistente, aceleram o desenvolvimento e melhoram a experiência do usuário. Mas fazer um do jeito certo não é fácil. Tem que manjar de design, código e, principalmente, acessibilidade.

E é aí que a galera geralmente emperra. Garantir que cores, textos e espaçamentos sigam as regras de acessibilidade (tipo WCAG) dá trabalho e acaba sendo deixado de lado.

bdsg entra pra ajudar

A bdsg é uma lib em TypeScript que automatiza a criação de tokens de design com foco total em acessibilidade. Ela cuida da matemática e das regras, enquanto você foca na criatividade.

O que ela faz de diferente?

1. Paletas de cores inteligentes: a partir de uma cor base, gera 10 tons e calcula automaticamente a cor de texto ideal (preto ou branco) pra cada tom. Contraste garantido!
2. Conformidade WCAG 2.1: funções tipo calculateContrast e meetsWCAG ajudam a conferir se suas cores estão nos padrões AA ou AAA.
3. Escalas programáticas: tipografia, espaçamento (Fibonacci, linear, exponencial) e sombras complexas, tudo consistente e sem precisar calcular nada na mão.
4. CLI interativo: se você não curte mexer direto no código, tem o bdsg-cli pra criar e auditar tokens de design pelo terminal. Exporta pra CSS, JSON, Tailwind v4 e Shadcn/ui.

Por que vale a pena?

A bdsg é open source, então todo mundo pode conferir, usar e contribuir. A ideia é tornar a acessibilidade algo natural, não um extra que a gente faz quando lembra.

Se você quer criar um Design System acessível e rápido, dá uma olhada na bdsg. Testa, sugere melhorias, contribui, e bora fazer Design Systems que todo mundo consegue usar.

Repositório: CarlosEduJs/bdsg