Padrão Visual e Componentes Base

Referência obrigatória para o G10 Bio Produtor.

React Native + Expo Identidade G10 Bio Layout mobile Componentes reutilizáveis

Objetivo

Manter o mesmo padrão visual entre os aplicativos G10 Bio Produtor, G10 Bio Franqueado e futuras versões da plataforma.

Cores principais

Verde principal#083318
Verde secundário#4E8214
Verde de destaque#6FA62B
Fundo claro#F4F7F2
Texto principal#163321
Texto secundário#6B786F

Referências da tela principal

LogoCentralizado no topo, dentro de card branco, largura aproximada de 205 px e altura de 105 px.
TítuloUsar “Produtor”, centralizado abaixo do logo, tamanho aproximado de 27 px e peso 900.
Espaçamento externoUsar cerca de 18 px nas laterais e no topo.
CardsFundo branco, cantos arredondados entre 24 e 28 px e separação vertical de aproximadamente 16 px.
Itens de menuÍcone verde à esquerda, título em negrito, subtítulo menor e seta à direita.
SeçõesExibir Propriedade e Dados cadastrais em cards independentes, sempre mantendo hierarquia visual simples.

Splash padrão dos aplicativos G10 Bio

Usar o mesmo splash como base no aplicativo do produtor, do franqueado e em outras versões.

splash.tsx
Baixar splash

Referência da tela principal

Arquivo provisório com logo, título Produtor, menus, propriedade, geocerca e dados cadastrais.

menu-principal.tsx
Baixar menu principal

Referências de Layout

Os aplicativos devem manter a mesma identidade visual, alterando apenas os menus e informações específicas de cada perfil.

G10 Bio Produtor

Layout do aplicativo G10 Bio Produtor

Referência visual para o aplicativo utilizado pelos produtores vinculados aos franqueados.

G10 Bio UTG

Layout do aplicativo G10 Bio UTG

Referência visual para o aplicativo utilizado nas unidades UTG.