Design System Completo
evandro
.dev
.br
Sistema de identidade visual e componentes para uma empresa de programação. Cada elemento é intencionalmente destilado até seu essencial.
4px
Base unit
9×
Type scale
4+
Tokens cor
D — Slash Mark · Conceito final
Escala: 280×200 · Viewbox
01 — Identidade
Logo System
O Slash Mark em todas as variações, fundos e escalas de uso permitidas.
Fundo Escuro · Principal
Fundo Claro · Secundário
Fundo Acento · Evento
evandro.dev.br
DESENVOLVIMENTO DE SOFTWARE
Horizontal com Tagline
64px
32px
16px
Símbolo — Escalas de ícone
↕ X
X ↔
Clearspace = altura do "E"
Anatomia do Símbolo
01
E Estrutural — A letra E com proporções 1:1 em grid de 8px. Representa o nome Evandro e a estrutura do código.
02
Slash Diagonal — O "/" de URL/path em amarelo-code (#E8FF00). Representa o caminho, a execução, a navegação técnica.
03
Ponto Terminal — Círculo que referencia o ".dev" do domínio. O ponto final de toda instrução executada.
02 — Cores
Color Tokens
Sistema semântico de tokens. Cada cor tem papel único — nada é decorativo.
Primários
--ink
#0A0A0A
Logo · Texto · UI
--paper
#F4F2ED
Fundo primário
--white
#FFFFFF
Texto em dark
Acento & Estado
--slash
#E8FF00
Acento · Logo · CTA
--meta
#777777
Texto secundário
--border
rgba(10,10,10,.10)
Divisores · Bordas
Gradiente de Opacidade — --ink
03 — Tipografia
Type System
Duas famílias, nove tamanhos, um sistema semântico claro.
Token
Amostra
Tamanho
Peso
--display-2xl
Ev/
clamp(40,72px)
800
--display-xl
Build. Ship. Scale.
48px
800
--display-lg
Produtos que escalam
32px
700
--heading-md
Arquitetura de Software
22px
700
--heading-sm
Componentes & APIs
16px
600
--body-lg
Construímos software com propósito e precisão.
14px
400
--body-md
Da arquitetura ao deploy. TypeScript, React, Node.
12px
400
--label
FULL-STACK DEVELOPMENT
10px
500
--meta
v1.0 · MIT · 2026
9px
400–500
evandro.config.ts
// Configuração de tipografia — evandro.dev.br import type { Config } from 'tailwindcss' export const typography = { fonts: { display: 'Syne', // Títulos, logo, hero mono: 'Geist Mono' // Corpo, UI, código }, scale: { 'display-2xl': 'clamp(40px, 5vw, 72px)', 'display-xl': '48px', 'display-lg': '32px', 'heading-md': '22px', 'body-md': '12px', 'label': '10px', } } satisfies Partial<Config>
04 — Espaçamento
Spacing Scale
Base 4px. Cada token tem um papel semântico no layout — não são intercambiáveis.
Token
Visual
px
Uso
--sp-1
4px
Gap micro
--sp-2
8px
Gap ícone
--sp-3
12px
Gap interno
--sp-4
16px
Padding btn
--sp-6
24px
Padding card
--sp-8
32px
Gap seção
--sp-12
48px
Padding section
--sp-16
64px
Padding layout
--sp-20
80px
Hero sections
--sp-24
96px
Section header
05 — Componentes
Component Library
Todos os primitivos de UI. Hover nos componentes para ver as interações.
Buttons — Variantes
Buttons — Dark Mode
Badges & Tags
Default
Online
Entregue
Erro
React
TypeScript
Node.js
PostgreSQL
Docker
AWS
Form Inputs
Seu email
URL do projeto
https://
Cards
Desenvolvimento
Full-stack · React · Node
Construção de produtos digitais do zero, com arquitetura escalável e código de qualidade.
Design System
UI Kit · Tokens · Docs
Criação de sistemas de design escaláveis com documentação e componentes reutilizáveis.
Performance
Core Web Vitals · SEO
Otimização de performance com foco em métricas reais de usuário e SEO técnico avançado.
Toggles & Progress
Dark mode ativo
Notificações (acento)
Inativo
TypeScript95%
React / Next.js92%
Node / Bun88%
Notificações & Skeleton
Deploy concluído
evandro.dev.br em produção às 14:32
Build com warning
2 dependências desatualizadas
Erro no pipeline
Tests falharam em 3 arquivos
Tokens de Componentes
| Componente | Token | Valor | Estado |
|---|---|---|---|
| Button | --btn-h-default | 40px | Estável |
| Button | --btn-h-sm | 32px | Estável |
| Button | --btn-h-lg | 52px | Estável |
| Input | --input-h | 40px | Estável |
| Card | --card-radius | 8px | Estável |
| Badge | --badge-radius | 999px | Estável |
| Tooltip | --tooltip-delay | 300ms | Beta |
06 — Iconografia
Icon Style
Estilo: Stroke 1.5px, corners arredondados, 24×24 viewport. Hover para ver interação.
code
package
api
perf
deploy
git
slack
security
time
add
check
search
coffee
arrow
layout
light
07 — Animação
Motion System
Hover nos cards para ver as animações. Motion não é decoração — tem semântica.
Fade · Entrada/Saída
opacity · 400ms ease-out
Slide · Navegação
transform · 400ms ease-out
Scale · Micro-interação
scale + rotate · 400ms spring
motion.config.ts
// Curvas de easing do sistema — nunca use ease padrão do CSS export const easing = { // Entradas de UI — sensação de gravidade natural out: 'cubic-bezier(.16, 1, .3, 1)', // Saídas — rápido para não bloquear o usuário in: 'cubic-bezier(.4, 0, 1, 1)', // Micro-interações críticas (botão, link) spring: 'cubic-bezier(.34, 1.56, .64, 1)', } export const duration = { instant: 100, // hover state fast: 200, // botões, toggles normal: 350, // modais, drawers slow: 600, // page transitions }
08 — Voz da Marca
Brand Voice
Como a marca fala. Tom técnico, direto, sem ego. Como o melhor dev sênior que você conhece.
Direto
Não: prolixo
Técnico
Não: vago
Honesto
Não: vendedor
Confiante
Não: arrogante
✓ Use isso
"Entregamos APIs que processam 50k req/s. Sem mágica — arquitetura sólida e código testado."
Específico, verificável, sem exagero. Mostra competência através de dado concreto.
✕ Evite isso
"Somos apaixonados por inovação e entregamos soluções digitais de alta performance para o seu negócio."
Genérico, vazio, poderia ser de qualquer empresa. Não diz nada de real.
✓ Use isso
"Projeto tem bug crítico no checkout. Corrijo em 4h ou é de graça."
Comprometimento real, prazo específico, accountability. Isso cria confiança.
✕ Evite isso
"Vamos analisar a situação e alinhar as expectativas para encontrar a melhor solução possível."
Corporativês sem substância. Fuga de responsabilidade disfarçada de profissionalismo.
09 — Aplicações
Brand in the Wild
A identidade em contextos reais de uso.
Cartão de Visita · 85×54mm
evandro.dev.br
FULL-STACK DEVELOPMENT
Assinatura de Email
Evandro
Full-Stack Developer · evandro.dev.br
Favicon & App Icons