Lily Design System™

O que é a Lily?

Um sistema de design gratuito, de código aberto e com acessibilidade em primeiro lugar, que encontra você onde você programa — e sai do seu caminho quando você não precisa dele.

A versão curta

A Lily é um catálogo de componentes web, cada um implementado em oito versões headless (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks e Web Components), além de um conjunto de aplicativos de exemplo completos que mostram como estilizá-los.

As versões headless não trazem nenhum CSS. Elas oferecem HTML semântico, papéis e estados ARIA, suporte a teclado e propriedades pensadas para internacionalização. Você traz o design visual.

Princípios de design

Acessível

Todo componente parte do HTML semântico. O ARIA é acrescentado apenas onde o HTML sozinho não consegue expressar o padrão. Os componentes miram a WCAG 2.2 AAA: cores, espaçamento, foco e navegação por teclado são todos considerados.

Combinável

A Lily prefere componentes pequenos, de propósito único, que se encaixam. Os padrões compostos aparecem repetidamente:

  • Nav → List → ListItem — para trilhas de navegação, listas de conteúdo, menus sanfona, menus em árvore e paginação
  • Form → Field → Input — para qualquer layout de formulário com rótulos, dicas e erros
  • Table → Head/Body/Foot → Row → Data — para tabelas, calendários, gráficos de Gantt e quadros kanban
  • Bar → BarButton — para barras de ferramentas, de abas, de tarefas, de ações e de menus
  • Picker → PickerButton — para seletores de cor, de avaliação e de tema

Internacionalizável

Nenhum texto visível ao usuário está escrito diretamente no código. Rótulos, textos de exemplo, mensagens de erro, texto de botões: tudo é parâmetro. Conecte o seu próprio sistema de tradução e a Lily fala o idioma que você falar.

Headless

Os componentes headless não têm nenhum CSS, nenhum bloco <style>, nenhum token de design que você não tenha escolhido. Eles expõem um único nome de classe em kebab-case em cada elemento raiz, para que você os alcance como preferir: CSS semântico, Tailwind, CSS-in-JS, a escolha é sua.

Exemplos completos

Os aplicativos de exemplo mostram como estilizar os componentes para uso real: quais tokens de design definir, quais variações acrescentar, como compor páginas. São aplicativos completos de SvelteKit, Next.js, Nuxt, Blazor e Eleventy, não apenas ambientes de teste.

Inspirações

A Lily extrai padrões e linguagem de um conjunto deliberadamente amplo de sistemas de design:

Licença

A Lily tem licenciamento múltiplo: BSD, MIT, Apache-2.0, GPL-2.0 ou GPL-3.0. Escolha a licença que combina com o seu projeto. Se nenhuma servir, entre em contato.

Contato

Responsável pelo projeto: Joel Parker Henderson — joel@joelparkerhenderson.com.

Encontrou um bug, tem uma ideia, quer contribuir com um componente? Abra uma issue ou um pull request no GitHub.

Situação: a Lily é um trabalho novinho e recebemos com alegria colaboração, orientação e comentários. As coisas vão mudar e evoluir.