Design System
Design System
Medeiros Advogados
Este guia visual representa a essência de uma marca comprometida com a excelência jurídica e a eficiência processual. Desenvolvido para traduzir a seriedade e o profissionalismo do escritório Medeiros Advogados em soluções visuais consistentes e sofisticadas.
Introdução ao Design System
Identidade Visual
A identidade visual do Medeiros Advogados foi cuidadosamente desenvolvida para refletir profissionalismo e confiança. A paleta de cores em tons de azul transmite seriedade, enquanto os elementos dourados adicionam sofisticação.
Elementos e Padrões
Os padrões geométricos sutis e gradientes elegantes criam profundidade visual, enquanto a tipografia combina a elegância da Cormorant Garamond com a clareza da Inter para uma leitura confortável.
Cores Principais
Azul profundo e dourado para transmitir confiança e tradição
Tipografia
Combinação de fontes serifadas e sem serifa
Gradientes
Transições suaves entre tons complementares
Padrões
Texturas geométricas e grids sutis
Princípios de Design
Hierarquia Visual
Organização clara de elementos para guiar o usuário através do conteúdo.
Consistência
Padrões visuais consistentes para uma experiência coesa.
Elegância
Design sofisticado que reflete a seriedade e profissionalismo.
A Jornada das Cores
Nossa paleta de cores conta uma história que acompanha o ciclo natural do dia, representando a jornada contínua do escritório na busca pela excelência jurídica.
Azul Noturno
#1d3658
Azul Madrugada
#2d4666
Dourado Aurora
#fccc83
Claridade Diurna
#dbdbdb
Sombra Noturna
#292828
A História das Nossas Cores
O Azul Noturno representa a profundidade da noite, simbolizando a seriedade e confiabilidade do nosso trabalho. Como a noite que guarda os segredos do dia, guardamos com zelo as causas de nossos clientes.
O Dourado Aurora traz a promessa do amanhecer, simbolizando novos começos e soluções inovadoras. É a luz que surge após a escuridão, representando esperança e resultados positivos.
A Claridade Diurna reflete a transparência de nossas ações, a clareza de nossos argumentos e a objetividade de nosso trabalho.
A Sombra Noturna nos lembra da seriedade de nossa missão, da força de nossos princípios e da solidez de nossa experiência.
Aplicação Principal
- • Elementos de marca
- • Botões principais
- • Títulos importantes
Elementos de Destaque
- • Call-to-actions
- • Ícones e ilustrações
- • Elementos interativos
Combinações
- • Gradientes elegantes
- • Contrastes harmoniosos
- • Transições suaves
Sistema Tipográfico
Heading 1
Medeiros Advogados
Heading 2
Áreas de Atuação
Heading 3
Direito Ambiental
Body
O escritório Medeiros Advogados é especializado em questões ambientais e imobiliárias, oferecendo soluções jurídicas personalizadas para demandas complexas.
Small Text
Texto pequeno para informações secundárias e notas de rodapé.
Alertas
Informação
Erro
Cards
Card Básico
Exemplo de card com título e descrição
Conteúdo do card com informações relevantes para o usuário.
Card Interativo
Card com efeitos de hover
Exemplo de card com interações e animações no hover.
Card com Gradiente
Fundo com gradiente e overlay
Card com fundo gradiente e efeitos de transparência.
Card com Hover
Muda de cor no hover
Exemplo de card que muda completamente no hover.
Links
Links com Ícones
Links em Botões
Fotografia
Diretrizes Fotográficas
A fotografia desempenha um papel crucial na comunicação visual do escritório, transmitindo profissionalismo, confiança e expertise. Abaixo, apresentamos as diretrizes para o uso de imagens em nossos materiais.
Elementos Jurídicos
Fotografias que incorporam elementos tradicionais do direito, como a balança da justiça, martelo do juiz e livros jurídicos, transmitindo autoridade e tradição.
Infraestrutura e Meio Ambiente
Imagens que destacam projetos de infraestrutura em harmonia com o meio ambiente, enfatizando nossa expertise em direito ambiental.
Especificações Técnicas
Resolução
- • Mínimo de 2000px de largura
- • 300 DPI para impressão
- • Proporção 16:9 ou 4:3
Estilo
- • Iluminação natural
- • Cores neutras e profissionais
- • Foco em detalhes arquitetônicos
Contexto
- • Ambiente profissional
- • Escritório e sala de reuniões
- • Projetos e obras relevantes
Recomendações de Uso
Recomendado
- ✓ Fotos profissionais do escritório
- ✓ Imagens de projetos e obras
- ✓ Retratos corporativos da equipe
- ✓ Elementos jurídicos contextualizados
Evitar
- ✗ Imagens de bancos gratuitos
- ✗ Fotos com baixa resolução
- ✗ Elementos visuais clichês
- ✗ Fotografias sem contexto profissional
Padrões e Texturas
Grid Pattern
Padrão de grade usado em fundos de seção
Radial Gradient
Gradiente radial usado em fundos coloridos
Diagonal Pattern
Padrão diagonal para texturas sutis
Dot Pattern
Padrão pontilhado para texturas delicadas
Boas Práticas
Diretrizes essenciais para manter a qualidade e consistência em todos os aspectos do design system.
Recomendações
- ✓Manter consistência visual em todos os elementos
- ✓Seguir a hierarquia tipográfica estabelecida
- ✓Utilizar a paleta de cores conforme definido
- ✓Implementar micro-interações com propósito
O que Evitar
- ✗Misturar diferentes estilos de design
- ✗Usar cores fora da paleta definida
- ✗Ignorar as diretrizes de espaçamento
- ✗Adicionar elementos sem propósito claro
Consistência Visual
- • Manter padrões de design
- • Usar componentes existentes
- • Seguir guias de estilo
Acessibilidade
- • Contraste adequado
- • Hierarquia clara
- • Feedback visual
Performance
- • Otimizar imagens
- • Minimizar animações
- • Código limpo
Layouts
Estruturas de layout padronizadas para garantir consistência e harmonia visual em todas as páginas.
Grid System
Grid de 12 colunas para layouts flexíveis e responsivos
Espaçamento
Sistema de espaçamento baseado em múltiplos de 4
Containers
Breakpoints
- Mobile:320px
- Tablet:768px
- Desktop:1024px
- Large:1280px
Aspectos
Mockups
Exemplos de aplicação da identidade visual em diferentes contextos e dispositivos, demonstrando a versatilidade e consistência da marca.
Cartão de Visita
Dr. Rodrigo Medeiros
Direito Ambiental e Imobiliário
+55 (44) 3030-3030
Pasta Processual
Pasta de Documentos
Pasta de Contratos
Pasta de Assinatura
Papelaria
Email Marketing
Redes Sociais
Diretrizes de Mockup
Proporções
- • Manter proporções originais
- • Respeitar grids e margens
- • Usar escala modular
Elementos
- • Logo sempre visível
- • Hierarquia clara
- • Espaçamento consistente
Interações
- • Feedback visual
- • Transições suaves
- • Estados interativos
Sistema de Ilustrações
Sistema de ilustrações que reforça a identidade visual e facilita a comunicação de conceitos complexos, mantendo consistência e elegância em toda a comunicação visual.
Estilo Concêntrico
Camadas que representam profundidade e experiência
Estilo Geométrico
Formas precisas que simbolizam solidez e confiança
Paleta Cromática
Cores institucionais em gradientes elegantes
Composição
Elementos sobrepostos
Animações
Transições suaves
Princípios
- • Minimalismo elegante
- • Clareza na comunicação
- • Consistência visual
- • Harmonia entre elementos
Aplicações
- • Material institucional
- • Apresentações
- • Mídias sociais
- • Website
Técnicas
- • Vetores limpos
- • Gradientes sutis
- • Sombras suaves
- • Animações fluidas
Micro-interações
Design System desenvolvido pela Agência Integrare para o escritório Medeiros Advogados, traduzindo a excelência e eficiência em soluções jurídicas ambientais e imobiliárias em uma identidade visual coesa e sofisticada. Maringá, Paraná • 2025
Design System por
