Provavelmente você conhece o Github, a plataforma de hospedagem de código barra rede social focada principalmente em desenvolvimento. Nesse Design System da semana você vai conhecer o DS deles.

Ficha técnica

  • Nome: Primer CSS
  • Empresa: Github
  • Ano de desenvolvimento: 2016
  • Diferenciais:
    • Componentes prontos no Figma, inclusive de wireframe 😍
    • Padrão em apresentações (PPT, Google Slides)
    • Open-source!
    • Acessibilidade com exemplos de faça e não-faça
    • Empty states
    • Iconografia condizente com a marca
    • Uso de Sass e React na parte de front-end
    • Atualizações até hoje
  • Pontos negativos:
    • Não encontrei nenhum! Talvez layouts em .XD e .sketch?

Imagens do Design System

home do design system do github. No meio o titulo Primer, projete, construa e crie com o DS do github. Cores pedrominantes preto no fundo e azul nas ilustracoes.
sistema de cores do primer, cores como cinza, azul e roxo
pagina de sobre o time do primer mostrando o que parece ser uma lista de pessoas, começando por uma moça chamada Aurora, designer de sistemas
boas praticas dos botoes, sendo o destaque da imagem o fato de nao usar botoes com textos todos em caixa alta
padrões usados em ppts, destaque para nao usar graficos brancos em fundos escuros

Se você quer usar o Primer em seus projetos, dê uma conferida no Guia de Instalação que o time deles montou.

Que tal receber dicas de UX direto no seu e-mail?

Receba a newsletter que eu escrevo pessoalmente, com práticas de usabilidade, insights do mercado de UX e dicas do Figma