Brandbook do app do membro
Uma identidade que acolhe, orienta e facilita a próxima ação. Verde profundo, superfícies claras e linguagem direta ajudam a pessoa a participar, organizar e cuidar com confiança.
Cuidado com clareza
A experiência coloca as pessoas no centro. A marca deve transmitir proximidade e serenidade, sem competir com compromissos, mensagens e decisões de cuidado.
A hierarquia visual apresenta primeiro o que importa e depois o caminho para continuar. Evitar urgência artificial, rankings de participação e excesso de informação na mesma tela.
Logo e identidade
As alianças e a cruz mantêm uma identidade reconhecível. A aplicação verde funciona sobre fundos claros; a branca preserva a leitura sobre verde profundo. O dourado fica reservado a detalhes de assinatura.
A igreja é a identidade principal dentro do app. Manter proporções e área livre ao redor da logo, sem sombras ou distorções. O símbolo pode ocupar espaços compactos quando o nome estiver próximo.
Verde no claro e branco no escuro preservam a identificação da marca. Manter proporções facilita o reconhecimento.
Baixar SVG verde ↗Paleta de interface
O verde de ação destaca o próximo passo. Menta indica seleção e apoio; fundos claros organizam o conteúdo com leveza. Dourado não deve disputar atenção com formulários e botões.
Toque em uma cor para copiar seu hexadecimal.
Estados sempre usam texto ou ícone além da cor. Branco sobre verde de ação: . Verde profundo sobre menta: . Essas combinações ajudam a distinguir textos, seleções e ações.
Consultar os tokens de cor
| Token | Cor | Uso |
|---|---|---|
| forest | #003F32 | Identidade e navegação |
| primary | #006B54 | Ação principal com texto branco |
| primary-hover | #005541 | Ação pressionada |
| mint | #C9F2DD | Seleção com texto verde profundo |
| canvas | #F5F8F6 | Fundo principal |
| surface | #FFFFFF | Cartões e campos |
| ink | #142E28 | Texto principal |
| muted | #50665E | Texto de apoio |
| line | #D5E1DA | Separação de conteúdo |
| input-border | #758B81 | Limites dos campos |
| gold | #D1BA75 | Acento com texto verde profundo |
| focus | #1D4ED8 | Foco do teclado |
| success | #146C43 | Confirmação com ícone e rótulo |
| warning | #88540B | Atenção com consequência clara |
| danger | #B42318 | Erro ou ação destrutiva |
Tema escuro
O tema escuro usa superfícies e textos próprios para manter a leitura confortável. A ação principal recebe um verde mais claro com texto profundo, preservando sua identificação.
| Token | Cor | Uso |
|---|---|---|
| canvas | #0C211B | Fundo escuro |
| surface | #15362B | Conteúdo elevado |
| ink | #EFF8F2 | Texto principal |
| muted | #B3C8BD | Texto de apoio |
| primary | #9EE4BF | Ação principal |
| on-primary | #003F32 | Texto da ação |
| input-border | #819E90 | Limites dos controles |
Tipografia e leitura
Usar a fonte nativa do dispositivo: SF no iOS, Roboto no Android e a fonte do sistema no navegador. Títulos diretos e frases curtas facilitam a leitura rápida.
Corpo de referência de 17, título de tela de 28 e metadados de 14. Ao ampliar a fonte, o conteúdo deve se reorganizar sem cortar informações necessárias à decisão.
SF · Roboto · Segoe UI
Cuidar começa
por estar presente.
Encontre seu próximo compromisso e as pessoas com quem você caminha.
Uma mensagem simples. Um próximo passo claro.Linguagem e confiança
Preferir verbos claros: “Entrar”, “Solicitar contato”, “Confirmar horário” e “Registrar cuidado”. Pedido enviado, pagamento pendente e ação concluída são situações distintas e precisam ser reconhecíveis.
Uma confirmação deve refletir o resultado da ação. Quando houver erro, explicar como continuar sem culpar a pessoa ou revelar informações de outras contas.
Acessibilidade e privacidade
Cor nunca é o único sinal: combinar texto, ícone e estado. Manter foco visível e alvos de toque confortáveis. Texto normal precisa de contraste de pelo menos 4,5:1; texto grande e limites essenciais, 3:1.
Áudio e transcrição de cuidado são registros internos sujeitos às autorizações. A delegação de uma agenda não abre acesso às notas reservadas. Notificações devem preservar nomes e assuntos sensíveis em telas bloqueadas.
A identidade ganha sentido no uso.
Veja como contexto, hierarquia e clareza das ações ajudam a pessoa a concluir cada tarefa.
Conhecer as telas →