Este arquivo serve como referência de identidade para o app Bella Have. A ideia é dar ao time de desenvolvimento um ponto de partida claro sobre tipografia, cores e clima geral da interface, sem engessar o desenho das telas.
A sensação que buscamos é de extremo bom gosto, calma e organização. Elementos grandes, bem espaçados e com muito ar em volta, sem excessos visuais.
Bordas arredondadas suaves, sombras discretas, ícones em outline e blocos de cor com contraste confortável formam a base da linguagem. A partir disso, cada tela pode ser adaptada ao fluxo do app.
Importante, evitar fundo branco puro (#FFFFFF). Em vez disso, usar os tons claros da paleta, como Cream ou principalmente Offwhite, para manter o clima mais aconchegante. White suave pode ser usado em detalhes, mas não como fundo principal de tela.
Cor padrão de texto sobre fundos claros do app,
#2F2620 (token --text-dark).
Usar essa cor como base para textos principais em Offwhite,
Cream, Shell e afins.
A hierarquia abaixo usa os tamanhos que definimos para o app. Mais importante do que criar muitos níveis é manter consistência entre título, subtítulo, texto corrido e botões.
Subtítulo em Source Sans 3, 20px, peso semibold.
Texto corrido em Source Sans 3, 16px, peso regular. Usado para explicações, descrições de seções e conteúdos do dia a dia. A leitura precisa ser confortável em blocos um pouco maiores.
Texto menor em 14px pode ser usado para detalhes, legendas e informações de apoio que não são o foco principal da tela.
Sugestão de uso nas telas do app, título principal por tela, subtítulos para blocos internos, texto corrido em 16px como padrão e botões com bastante área clicável.
Estas faixas mostram como o texto e os botões se comportam sobre fundos
diferentes da paleta Bella Have. São exemplos de clima visual, não
layouts prontos. A cor de texto padrão para fundos claros é
#2F2620.
Sempre revisar contraste entre cor de fundo e texto em tela real. Em fundos médios, preferir texto bem claro. Em fundos claros, usar texto escuro suave, evitando preto puro e evitando branco puro como fundo principal.
A linguagem de ícones é simples e leve, em outline, combinando com a limpeza da tipografia. Ícones preenchidos podem ser reservados para estados ativos, por exemplo na navegação inferior.
Nos exemplos abaixo, os ícones usam SVG inline. Na implementação real,
sugerimos o uso de ícones com traço limpo, sempre herdando a cor do
texto (currentColor) e mantendo espessura elegante.
Sugestão de sombra para cartões
0 18px 36px rgba(0, 0, 0, 0.04), apenas para dar
elevação, sem pesar o layout.
Estes tons podem ser combinados em fundos, bordas, textos, ícones e detalhes. A ideia é manter a paleta enxuta, com poucos tons ativos por tela, para preservar a sensação de calma. Sempre evitar branco puro (#FFFFFF) como fundo, preferindo os tons claros abaixo.