branding-devkit-react

name	branding-DevKit-react
description	Aplica a identidade visual DevKit em interfaces React/Next.js com consistencia de marca, legibilidade e boas praticas de composicao. Use quando: criar telas, componentes, layouts ou qualquer UI que use marca DevKit.
user-invocable	true

Branding DevKit em React

Quando Usar

• Antes de criar qualquer tela com elementos visuais da marca
• Ao revisar componentes existentes para alinhamento de identidade
• Quando houver duvida sobre qual variacao de logo, simbolo ou icone usar

Regras de Identidade (Fonte Oficial)

• Estilo visual: minimalista, profissional e tecnologico
• Marca: simbolo em "E" + logotipo "DevKit"
• Cor primaria: #7852EA (usar como destaque; evitar como fundo dominante)
• Cores base: #000000, #FFFFFF
• Cores de apoio: #E9F2F4, #F5F5F5, #F4F1FD
• Tipografia: Sora

Tipografia Obrigatoria

• Titulos: Sora ExtraBold
• Subtitulos: Sora SemiBold ou Sora Bold
• Corpo: Sora Regular
• Alinhamento: sempre a esquerda
• Proibido: texto justificado ou alinhado a direita
• Texto pequeno: preferir Bold para legibilidade

Regras de Aplicacao

• Nunca rotacionar a marca
• Nunca distorcer proporcoes
• Nunca aplicar sombra ou degrade no logo/simbolo
• Nunca trocar cores oficiais da marca
• Garantir contraste minimo adequado no fundo

Dimensoes Minimas

Digital:

• Horizontal: 90px
• Vertical: 70px
• Favicon: 20px

Impresso:

• Horizontal: 15mm
• Vertical: 9mm

Fluxo Recomendado

1. Definir tema da tela (claro/escuro)
2. Escolher variacao correta de logo/simbolo
3. Aplicar tokens de cor e tipografia
4. Validar tamanho minimo e contraste
5. Executar checklist de proibicoes

Output Esperado

• Interface React alinhada a identidade DevKit
• Uso correto de cores, tipografia e variacoes de logo/icone
• Nenhuma violacao das proibicoes de marca