Definição de Identidade Visual e Padrões de UI

**Objetivo:** Esta issue serve para que as turmas discutam, escolham e documentem as diretrizes visuais do projeto. O objetivo final é garantir que o sistema tenha uma interface coesa, profissional e funcional para o usuário final (vendedores e compradores). --- ## 📋 Lista de Tarefas ### 1. Identidade e Cores - [ ] **Definição da Paleta de Cores:** Escolher as cores para as classes semânticas do Bootstrap 5 (`primary`, `secondary`, `success`, `danger`, `warning`, `info`). - [ ] **Contraste e Acessibilidade:** Validar se as cores escolhidas permitem uma boa leitura (especialmente em ambientes com muita claridade, como o comprador na rua). ### 2. Tipografia - [ ] **Escolha das Fontes:** Definir a família de fontes para Títulos (Headings) e Corpo de Texto. - [ ] **Escala Hierárquica:** Padronizar os tamanhos (`rem` ou `px`) para labels de formulário, itens de tabela e títulos de seção. ### 3. Iconografia - [ ] **Seleção do Pacote de Ícones:** Escolher entre [[Bootstrap Icons](https://icons.getbootstrap.com/)](https://icons.getbootstrap.com/), FontAwesome ou outro pacote. - [ ] **Mapeamento de Ações:** Definir qual ícone representará cada ação: - Registro de Falta (Novo) - Editar/Alterar - Excluir/Remover - Comprado (Check) - Não Comprado (Uncheck) - Arquivar ### 4. Componentes Bootstrap - [ ] **Estilo de Tabelas:** Decidir se as tabelas serão `striped`, `hover`, `bordered` ou `borderless`. - [ ] **Estilo de Formulários:** Definir se usaremos o padrão clássico ou `floating labels`. - [ ] **Estilo de Botões:** Padronizar se os botões terão cantos arredondados padrão, `pill` (totalmente arredondados) ou `outline`. ### 5. Layout e Responsividade (Mobile First) - [ ] **Grid System:** Definir o comportamento das colunas da tabela em telas pequenas (o que deve ser ocultado no celular?). - [ ] **Navegação:** Definir o estilo da Navbar (Fixa no topo, cores e links). ### 6. Documentação Técnica - [ ] **Criação do CSS Global:** Criar o arquivo `public/css/style.css` com as variáveis `:root` e classes customizadas que não existam no Bootstrap. - [ ] **Atualização do README:** Adicionar uma seção curta no README do projeto resumindo o Guia de Estilo escolhido. --- **⚠️ Observação para as equipes:** As decisões tomadas aqui devem ser documentadas nos comentários desta Issue para que todos os desenvolvedores sigam o mesmo padrão durante a codificação das telas. Lembrem-se: o sistema deve ser funcional no celular!

mvassuncao1 commented

2026-05-07 21:29:45 +00:00

Owner

Objetivo: Esta issue serve para que as turmas discutam, escolham e documentem as diretrizes visuais do projeto. O objetivo final é garantir que o sistema tenha uma interface coesa, profissional e funcional para o usuário final (vendedores e compradores).

📋 Lista de Tarefas

1. Identidade e Cores

Definição da Paleta de Cores: Escolher as cores para as classes semânticas do Bootstrap 5 (primary, secondary, success, danger, warning, info).
Contraste e Acessibilidade: Validar se as cores escolhidas permitem uma boa leitura (especialmente em ambientes com muita claridade, como o comprador na rua).

2. Tipografia

Escolha das Fontes: Definir a família de fontes para Títulos (Headings) e Corpo de Texto.
Escala Hierárquica: Padronizar os tamanhos (rem ou px) para labels de formulário, itens de tabela e títulos de seção.

3. Iconografia

Seleção do Pacote de Ícones: Escolher entre [Bootstrap Icons](https://icons.getbootstrap.com/), FontAwesome ou outro pacote.
Mapeamento de Ações: Definir qual ícone representará cada ação:
- Registro de Falta (Novo)
- Editar/Alterar
- Excluir/Remover
- Comprado (Check)
- Não Comprado (Uncheck)
- Arquivar

4. Componentes Bootstrap

Estilo de Tabelas: Decidir se as tabelas serão striped, hover, bordered ou borderless.
Estilo de Formulários: Definir se usaremos o padrão clássico ou floating labels.
Estilo de Botões: Padronizar se os botões terão cantos arredondados padrão, pill (totalmente arredondados) ou outline.

5. Layout e Responsividade (Mobile First)

Grid System: Definir o comportamento das colunas da tabela em telas pequenas (o que deve ser ocultado no celular?).
Navegação: Definir o estilo da Navbar (Fixa no topo, cores e links).

6. Documentação Técnica

Criação do CSS Global: Criar o arquivo public/css/style.css com as variáveis :root e classes customizadas que não existam no Bootstrap.
Atualização do README: Adicionar uma seção curta no README do projeto resumindo o Guia de Estilo escolhido.

⚠️ Observação para as equipes:
As decisões tomadas aqui devem ser documentadas nos comentários desta Issue para que todos os desenvolvedores sigam o mesmo padrão durante a codificação das telas. Lembrem-se: o sistema deve ser funcional no celular!

mvassuncao1 added the frontend label 2026-05-07 21:29:45 +00:00

mvassuncao1 changed title from ~~Issue: Definição de Identidade Visual e Padrões de UI~~ to Definição de Identidade Visual e Padrões de UI

2026-05-07 21:35:46 +00:00

Definição de Identidade Visual e Padrões de UI #9