Design system · app

Componentes do NaTrave!

Os componentes do app, montados sobre a marca. Cor, fonte, espaçamento, raio e movimento vêm da marca; aqui ficam as peças prontas para usar. O mesmo conjunto serve a qualquer app NaTrave!, trocando só o tema de cores.

Componentes

Botão

Primário, secundário e texto. Três tamanhos, carregando com barras inclinadas.

Especificado
Botão de ícone

Com fundo, sem fundo e sobre imagem. Sempre com rótulo de acessibilidade.

Especificado
Tag de status

Pílula neutra com ponto pulsante, sobre o pôster.

Especificado
Linha de informação

Informação com ícone e contato com avatar.

Especificado
Avatar

Foto ou a peça sem imagem da marca, com raio de 25%.

Especificado
Pôster

A peça sem imagem no formato do card, com a mesma cor do campeonato ou time.

Especificado
Bottom sheet

Folha que sobe do pé da tela, arrasta para fechar e troca de etapa sem fechar.

Especificado
Movimento

Curvas de saída e mola, escalonado de 80 ms, confete só em confirmação.

Especificado

Como usar no Flutter

  1. Dependência no pubspec.yaml: natrave_design_system pela tag do repositório na-trave/design-system.
  2. Tema: ThemeData(extensions: [NatraveTema.app]).
  3. Fontes: o app declara Saira, Inter e Anton só nos pesos que usa. O pacote não carrega fonte.