+
+ evandro
+
+
+
+
+ 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
+
+
+
+
+
+
+
+ App Store ยท 180px
+
+
+
+
+
+
+
+ 64px
+
+
+
+
+
+ 32px
+
+
+
+
+
+ 16px
+