Design
System
O Design System do PRONAFACE transforma identidade visual em confiança operacional.
Cada cor, botão, fonte, card, alerta e formulário deve ajudar o usuário a entender onde está, o que está acontecendo e qual é o próximo passo seguro.
Clareza
Para decidir
Confiança
Para clicar
Segurança
Para preencher
Consistência
Para navegar
Inclusão
Acessibilidade
Governança
Para escalar
Paleta de Cores
Navy Deep
Fundo Institucional, Header, Títulos
PRONAFACE Blue
Ação Primária, Marca, Destaque
Pure White
Superfície, Cards, Leitura
Slate Light
Fundo Neutro, Bordas, Separadores
Success Green
Confirmação, Protocolo, Sucesso
Error Red
Aviso, Erro Crítico, Alerta
Tokens de Cor (CSS Variables)
| Token | Valor | Status |
|---|---|---|
| --navy-deep | #0a1221 | Ativo |
| --accent | #2864ae | Ativo |
| --background | #FFFFFF | Ativo |
| --secondary | #F1F5F9 | Ativo |
| --success | #22C55E | Ativo |
| --error | #EF4444 | Ativo |
Espaçamento e Grid
| Token | Valor | Status |
|---|---|---|
| --space-4 | 16px | Ativo |
| --space-6 | 24px | Ativo |
| --space-8 | 32px | Ativo |
| --space-12 | 48px | Ativo |
| --space-16 | 64px | Ativo |
Tipografia
Heading Font
Sora
Utilizada para títulos, botões e elementos de destaque que exigem peso e autoridade. Sempre com peso máximo para reforçar o dinamismo.
H1 Headline
H2 Subheadline
Body Font
Manrope
Utilizada para textos corridos, interfaces e descrições. Oferece excelente legibilidade tanto em desktop quanto mobile.
O PRONAFACE é uma iniciativa de fomento tecnológico.
Cada cor e fonte sustenta a confiança e modernidade do portal.
Biblioteca de Componentes
Botões e CTAs
Primários, secundários e ghost
Cards e Superfícies
Bordas de 2.5rem e sombras leves
Inputs e Formulários
Labels reais e estados de foco
Alertas e Badges
Estados semânticos com ícones
Segurança Visual
Canais Oficiais
Identificação clara de domínios e redes autorizadas.
Protocolos
Todo formulário gera um código PRF-DS para rastreio.
Antifraude
Alertas visuais padronizados para prevenir golpes.
Vedação de Promessa
O design nunca deve induzir aprovação garantida. Use microcopy honesta e avisos jurídicos próximos aos CTAs de inscrição.
Precisa usar a identidade do PRONAFACE?
Envie sua dúvida ou solicitação de orientação sobre o uso da marca. O sistema gera protocolo para acompanhamento.
Dúvidas Frequentes
Esclarecimentos diretos sobre este tema
Q.O que é o Design System do PRONAFACE?
É o ecossistema de componentes, padrões e diretrizes visuais que garantem consistência, acessibilidade e confiança em todos os canais digitais do programa.
Q.Como usar as cores oficiais?
As cores devem seguir o uso semântico: Navy Deep para autoridade, PRONAFACE Blue para ação, Success para confirmação e Error para alertas críticos.
Q.Quais são as fontes oficiais?
Sora é nossa fonte de exibição para títulos e destaques. Manrope é nossa fonte de interface para textos longos e formulários.
Q.Posso criar novos componentes?
Novos componentes devem ser solicitados via formulário de orientação para passar por auditoria de acessibilidade e consistência visual.
Conformidade & Integridade Jurídica
O PRONAFACE é uma iniciativa 100% privada da Appmart.ai / Grupo OTB. A inscrição não garante aprovação, concessão de subsídio, percentual de desconto, gratuidade, publicação em lojas ou resultado financeiro. O fomento tecnológico de até 100% depende de análise técnica, viabilidade de escopo, edição vigente e disponibilidade operacional. O benefício não é crédito financeiro e não pode ser convertido em dinheiro. Custos de terceiros, hospedagem, lojas oficiais, APIs, suporte premium e evoluções futuras podem ser cobrados à parte.
Inicie sua jornada digital com fomento técnico.
Submeta sua organização para análise hoje e receba um diagnóstico de elegibilidade em até 48h úteis. Prazo estimado, podendo variar conforme volume de inscrições e complexidade da demanda.