Skip to content

GitLab

Last edited by Maurício Gaspary
Page history
This is an old version of this page. You can view the most recent version or browse the history.

Design

Home Escopo Gerência Processo Design Configuração Arquitetura Banco de Dados

Wiki do Projeto: Plataforma de Inovação "BAH"

Esta wiki serve como guia para o Design System da plataforma BAH, garantindo consistência visual e funcional em todas as interfaces.

1. Visão Geral do Projeto

Telas Principais

  • Página Inicial (Desktop):
Group_2292
  • Página Inicial (Mobile): \
Captura_de_Tela_2025-09-30_às_14.33.55

2. Fundamentos do Design

A base visual e conceitual que sustenta todo o projeto.

2.1. Cores

A paleta de cores é um dos pilares da identidade visual da BAH.

  • Print da Paleta de Cores no Figma:
image

Cores da Marca (Brand Colors)

Cor Amostra HEX Token Uso
BahPurple #542E82 #542E82 $color-brand-primary Cor principal, usada em cabeçalhos, botões e elementos de destaque.
BahGreen #C7D871 #C7D871 $color-brand-accent Cor de destaque, usada em ícones e detalhes visuais.
BahBlue #41EDEE #41EDEE $color-brand-secondary
BahRed #FE716F #FE716F $color-brand-tertiary

2.2. Tipografia

A fonte principal do projeto é a Mulish.

  • Print da Escala Tipográfica no Figma:
    image
Estilo Fonte Peso Tamanho (pt) Uso
Large Title Mulish Bold 34 Título principal da página de herói.
Title 1 Mulish Bold 28 Títulos de seção principais (H1).
Title 3 Mulish Semibold 20 Títulos de seção secundários (H2, H3).
Body Mulish Regular 17 Corpo de texto principal.
Callout Mulish Semibold 16 Botões, tags e links de navegação.

2.3. Layout e Grid

O layout utiliza um grid de 12 colunas para desktop e 4 colunas para mobile para garantir alinhamento e consistência.

  • Desktop:

    • Colunas: 12
    • Margens (laterais): 60px
    • Espaçamento entre colunas (Gutter): 24px

  • Mobile:

    • Colunas: 4
    • Margens (laterais): 20px
    • Espaçamento entre colunas (Gutter): 16px

2.4. Espaçamento

Utilizamos uma escala de espaçamento baseada em múltiplos de 8 para manter um ritmo vertical e horizontal consistente.

Token Valor Exemplo de Uso
$spacing-xs 4px Espaço entre um ícone e seu texto.
$spacing-sm 8px Pequeno espaço entre elementos.
$spacing-md 16px Espaçamento padrão (ex: dentro de um card).
$spacing-lg 24px Espaço entre inputs em um formulário.
$spacing-xl 32px Espaço entre um título e o parágrafo abaixo.
$spacing-xxl 48px Espaço entre seções de conteúdo.

2.5. Iconografia

O sistema utiliza ícones SF customizados no estilo "outline" (contorno).

  • Print da Biblioteca de Ícones: {{image.png}}

  • Biblioteca: Ícones SVG customizados.

  • Tamanhos Padrão: Os ícones devem ser usados preferencialmente nos tamanhos 16px, 20px ou 24px para garantir nitidez.

  • Estilo: Contorno (stroke) com espessura de 1.5px.