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.
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
Definir tema da tela (claro/escuro)
Escolher variacao correta de logo/simbolo
Aplicar tokens de cor e tipografia
Validar tamanho minimo e contraste
Executar checklist de proibicoes
Output Esperado
Interface React alinhada a identidade DevKit
Uso correto de cores, tipografia e variacoes de logo/icone