Identidade Visual · Tokens · Governança

Design
System

A linguagem visual e técnica que sustenta a confiança, a clareza e a modernidade do PRONAFACE - tokens semânticos, componentes acessíveis e motion responsável.

Ver Componentes Tokens & API Governança

Em uma frase

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.

Tokens semânticosWCAG AA mínimoMobile-firstReduced motionSem Google Fonts runtime

Clareza

Para decidir

Confiança

Para clicar

Segurança

Para preencher

Consistência

Para navegar

Inclusão

Acessível

Governança

Para escalar

Foundations · Color

Paleta de Cores

Tokens semânticos em oklch e hex equivalentes. Use sempre a variável CSS, nunca o hex direto em componentes - assim os temas e auditorias permanecem consistentes.

Marca & Superfícies

Navy Deep

Fundos institucionais, header, autoridade

HEX: #0a1221
RGB: 10, 18, 33

Navy

Tipografia profissional, blocos densos

HEX: #1a2540
RGB: 26, 37, 64

PRONAFACE Blue

CTA primária, marca, links, foco

HEX: #3b8cc7
RGB: 59, 140, 199

Sand

Canvas neutro, surface subtle

HEX: #f4f6fb
RGB: 244, 246, 251

Surface

Cards, áreas de leitura

HEX: #ffffff
RGB: 255, 255, 255

Foreground

Texto sobre superfície clara

HEX: #0f1b2e
RGB: 15, 27, 46

Semânticas & Estado

Success

Confirmações, protocolo gerado

HEX: #22c55e
RGB: 34, 197, 94

Warning

Alertas e vedações de promessa

HEX: #f59e0b
RGB: 245, 158, 11

Destructive

Erro crítico, ação destrutiva

HEX: #ef4444
RGB: 239, 68, 68

Muted

Textos auxiliares, captions

HEX: #64748b
RGB: 100, 116, 139

Foundations · Type

Sistema Tipográfico

Duas famílias com papéis claros: Sora (display, uppercase, italic, tracking-tighter) para autoridade e Manrope (UI, leitura) para confiança e legibilidade. Escala fluida com clamp() em todos os níveis.

Display · Heading

Sora

Peso 800 (único arquivo carregado). Usada para títulos, hero, eyebrows. Aplicada com uppercase, italic e tracking-tighter para reforçar autoridade.

H1 Headline

H2 Subheadline

H3 Section

Body · Interface

Manrope

Variable 500–700. Usada para corpo, labels, microcopy. Substituições automáticas via fallback Manrope/Arial para evitar CLS.

O PRONAFACE é uma iniciativa privada de fomento tecnológico.

Cada cor e fonte sustenta a confiança e a modernidade do programa.

Texto pequeno para metadados e legendas de tabelas.

CAPTION / EYEBROW · text-2xs

Escala Tipográfica

Role / Classe	Valor & Família	Ação
Display	clamp(64–120px) · Sora 800 Hero principal - uma vez por página
H1	clamp(34–72px) · Sora 800 Título de página · `<h1>` global
H2	clamp(28–48px) · Sora 800 Seção principal · `<h2>` global
H3	clamp(22–28px) · Sora 800 Subseção · `<h3>` global
H4	clamp(18–22px) · Sora 800 Card title · `<h4>` global
.text-body-lg	18px · Manrope 500 · 1.7 Lide, intro de página
.text-body	16px · Manrope 500 · 1.7 Parágrafo padrão
text-sm	14px · Manrope 500–700 Labels e UI densa
.text-2xs	11px · Manrope 700 Mínimo legível · captions e eyebrows

Foundations · Layout

Tokens de Forma e Espaço

Raio, espaçamento e elevação formam o ritmo visual do sistema. Tudo derivado da escala Tailwind, com extensões locais para superfícies premium.

Border Radius

Token	Valor	Ação
--radius	1rem (16px) Base · cards e inputs
--radius-sm	0.75rem (12px) Badges, tags, chips
--radius-md	0.875rem Componentes médios
--radius-lg	1rem Cards padrão
--radius-xl	1.25rem Surfaces destacadas
rounded-[2rem]	32px Cards premium e hero
rounded-[2.5rem]	40px Surfaces editoriais
rounded-[3rem]	48px Painéis de formulário

12px

16px

24px

32px

40px

48px

Spacing

Token	Valor	Ação
gap-4	16px Ritmo interno de cards
gap-6	24px Entre componentes
gap-8	32px Grid de seções
py-12	48px Padding vertical de blocos
py-20	80px Section padding desktop
py-32	128px Section padding hero / cinematográfico

8px

16px

24px

32px

48px

Elevação · Sombras

shadow-sm

Cards em repouso

shadow-md

Hover de cards

shadow-xl

Surfaces destacadas

shadow-2xl

Modais e overlays

Library · Components

Biblioteca de Componentes

Componentes shadcn/ui + Radix com variantes customizadas e tokens do PRONAFACE. Cada um carrega estados de default, hover, active, focus-visible, disabled, loading, error e success.

Botões · Hierarquia

Primary, Secondary, Ghost, Link

<button className="bg-accent text-white px-6 py-3 rounded-xl ...">Primary</button>

Cards · Surfaces

Border radius 2rem, hover sutil, sombra macia

<div className="rounded-[2rem] border border-slate-200 ...">…</div>

Inputs · Formulários

Label flutuante, foco com ring accent

E-mail Institucional

<input className="px-5 py-4 rounded-xl bg-slate-50 border border-slate-200 focus:border-accent ..." />

Badges · Estados

Semânticos com cor + ícone

Aprovado Análise Recusado Em Curso

<span className="bg-emerald-50 text-emerald-700 ...">Sucesso</span>

Alerta · Vedação

Bloco amarelo para promessas vedadas

Vedação de promessa

A inscrição não garante aprovação. Subsídio sujeito à análise de elegibilidade.

Quote · Depoimento

Citação institucional com atribuição

"O PRONAFACE traduziu tecnologia em linguagem de impacto real."

Coord. de OSC parceira · MG

System · Motion

Motion System

Motion existe para orientar, hierarquizar e dar feedback - nunca para decorar. Toda animação respeita prefers-reduced-motion, anima apenas transform/opacity e tem duração proporcional à importância da informação.

Orientação

Mostra de onde veio, para onde vai e onde está o foco.

Feedback

Confirma cliques, validações e estados em < 200ms.

Hierarquia

Stagger e delay revelam o que importa primeiro.

Performance

Só transform/opacity. Sem layout-thrashing. 60fps.

Escala de duração

instant

80ms

Hover · press · toggle

fast

150ms

Tooltips · ícones · badges

base

250ms

Inputs · dropdowns · tabs

slow

450ms

Cards · reveals · modais

scene

800ms

Hero · transições de página

Curvas de easing

standardcubic-bezier(.22, 1, .36, 1)

Padrão · entradas, reveals, cards

emphasiscubic-bezier(.32, .72, 0, 1)

CTAs, modais, transições de página

linearlinear

Loops · shimmer · gradient-pan

Laboratório · microinterações

Reveal

fade + translateYopacity 0→1 · y 24→0

Pop

scale-inscale .94→1 · opacity 0→1

stagger children60ms entre itens

Hover me

hover lifty −4 · shadow +

Foco · CTA

lv-pulse-glowloop · 2.4s ease-in-out

shimmer · skeletonloop · 2.8s linear

Tokens utilitários

Classe / Token	Duração & Easing	Ação
.lv-float	6s ease-in-out infinite Decoração leve · ícones e blobs
.lv-pulse-glow	2.4s ease-in-out infinite Foco em CTAs sensíveis
.lv-gradient-pan	8s ease infinite Gradientes de hero
.lv-shimmer-overlay	2.8s linear infinite Loading e skeletons
[data-reveal]	1s cubic-bezier(.2,.8,.2,1) Reveal on scroll global
.lv-stagger > *	0.1s → 0.8s Stagger de filhos
prefers-reduced-motion	Disable all Acessibilidade · respeitado globalmente

Faça

Anime transform e opacity.
Duração proporcional à hierarquia da informação.
Stagger de 50–100ms entre elementos relacionados.
Respeite prefers-reduced-motion.

Evite

Animar width, height, top/left.
Loops ambientes que competem com o conteúdo principal.
Durações > 600ms em interações triviais (hover/toggle).
Bouncy/elastic em contexto institucional.

Guardrails

Motion nunca pode degradar Core Web Vitals nem acessibilidade.

INP< 200ms

Toda interação responde no orçamento

CLS0

Sem layout shift · só transform/opacity

FPS60

GPU-accelerated · sem jank no mobile

A11yReduced

Desabilitado em prefers-reduced-motion

System · A11y

Acessibilidade & Contraste

Todo par de cor texto/fundo passou por verificação WCAG 2.2. CTAs e textos críticos atendem AAA; rótulos secundários cumprem AA mínimo. Foco visível em 100% dos elementos interativos.

Texto sobre Navy

18.6 : 1WCAG AAA

Texto sobre Accent

4.6 : 1WCAG AA

Navy sobre Branco

18.6 : 1WCAG AAA

Muted sobre Branco

4.8 : 1WCAG AA

Foco visível

Todo elemento interativo tem ring de 4px na cor accent com offset, nunca removemos outline sem substituir.

Tamanho mínimo

Body 16px, captions 11px (text-2xs). Targets de toque com 44×44px mínimo no mobile.

Reduced motion

Reveal on scroll, float e pulse desabilitados via media query global em prefers-reduced-motion.

Semântica HTML

h1–h4 hierárquicos, landmarks (header/main/nav/footer), buttons reais (não divs com onClick).

Labels reais

Inputs sempre com <label> visível ou aria-label. Placeholder não substitui label.

Cor não-única

Status nunca dependem só de cor - sempre acompanham ícone ou texto descritivo.

Governança · Boas práticas

Do & Don't

Padrões consolidados de aplicação visual. Inconsistências sutis quebram percepção de seriedade - esses exemplos servem como referência rápida para revisões.

Faça

Use tokens semânticos

bg-accent, text-muted-foreground, border-border. Permite trocas de tema e auditoria automática.

Evite

Não use hex hardcoded

bg-[#3b8cc7] ou text-slate-400 dispersos quebram consistência e dificultam manutenção.

Faça

Headings com a regra global

Use <h1>–<h4> reais. A escala fluida com clamp() é aplicada automaticamente pelo styles.css.

Evite

Não invente tamanhos arbitrários

text-[8px] e text-[9px] são ilegíveis. Use text-2xs (11px) como mínimo.

Faça

Promessa honesta

"Subsídio de até 100%, sujeito à análise de elegibilidade." Microcopy responsável próxima de cada CTA de inscrição.

Evite

Sem promessa absoluta

Nunca use "aprovação garantida", "sem nenhum custo" sem ressalva, "todo mundo ganha" ou linguagem governamental.

System · Trust

Segurança Visual

Padrões visuais que protegem o usuário de fraude, golpes e ambiguidade - pilares de confiança alinhados à governança do programa.

Canais Oficiais

Identificação clara de domínios e redes autorizadas em cada rodapé.

Protocolos PRF

Todo formulário gera código rastreável (PRF-DS, PRF-INS etc.) para acompanhamento.

Antifraude

Alertas visuais padronizados (cor amber + ícone) 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 - sempre.

Governança · Orientaçã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 rastreável para acompanhamento.

Dúvidas Frequentes

Esclarecimentos diretos sobre este tema

Q.O que é o Design System do PRONAFACE?

É o conjunto de tokens, componentes e diretrizes que sustenta a identidade visual, a acessibilidade e a confiança do programa em todos os canais digitais. Tudo é baseado em variáveis CSS semânticas e componentes shadcn/ui customizados.

Q.Como uso as cores oficiais corretamente?

Use sempre os tokens semânticos (--accent, --navy-deep, --muted-foreground), nunca valores hex hardcoded em componentes. Isso garante consistência entre temas e simplifica auditorias visuais.

Q.Quais são as fontes oficiais?

Sora 800 para títulos e display (carregada localmente em /fonts/sora-800.woff2). Manrope 500–700 variable para corpo e UI (/fonts/manrope-500.woff2). Não usamos Google Fonts em runtime - evitamos CLS e tracking externo.

Q.Por que peso 800 e não 900?

Carregamos apenas o peso 800 do Sora. Forçar 900 obrigava o browser a sintetizar o peso, resultando em renderização borrada. Padronizamos em 800 para usar o glifo real desenhado pelo type designer.

Q.Posso criar novos componentes?

Novos componentes podem ser solicitados via formulário desta página. Passam por auditoria de acessibilidade (WCAG AA mínimo), consistência de tokens, motion guidelines e responsividade mobile-first antes de entrar na biblioteca.

Q.Como reportar uma inconsistência visual?

Use o formulário com assunto 'Reportar Inconsistência'. Cada solicitação gera protocolo PRF-DS rastreável e entra no backlog de governança visual.

Compliance & Legal Integrity

PRONAFACE is a 100% private initiative by Appmart.ai / Grupo OTB. Registration does not guarantee approval, subsidy grant, discount percentage, free service, store publication or financial result. Technology funding up to 100% depends on technical review, scope viability, current edition and operational availability. The benefit is not financial credit and cannot be converted into cash. Third-party costs, hosting, official stores, APIs, premium support and future enhancements may be charged separately.

View integrity guidelines

Ready for the next level?

Start your digital journey with technical funding.

Submit your organization for review today and receive an eligibility diagnosis within 48 business hours. Estimated timeframe, may vary depending on application volume and demand complexity.

Request Technical Review Check Eligibility