Design System
O sistema por trás do site da Artcode
Paleta estrita de três cores, geometria de blocos herdada do logo, Geist + Geist Mono e componentes com tema light/dark. Tudo que está nas páginas deste site nasce daqui.
MarcaCoresTipografiaEspaçamentoMotionComponentes
Brand
Marca
Logo — fundos claroslogo-*-light.svg
Logo — fundos escuroslogo-*-dark.svg
Pixel motifgeometria de blocos do logo: grades, escadas, partículas quadradas
8px block unit · cantos retos nos pixels · roxo com parcimônia
Voz & tompt-BR · confiante, direto, resultados acima de buzzwords
✓ ASSIM
“Entregamos em sprints. Você vê progresso toda semana.”
“Do discovery ao deploy.”
“Resposta em até 24h.”
✗ NUNCA
“Soluções sinérgicas e disruptivas de próxima geração 🚀”
Buzzwords, superlativo vazio, emoji, exclamações.
Marca exibida: sempre “Artcode” — “4rtcode” só em domínio/slug.
Colors
Cores
Paleta da marcapaleta estrita de três cores
--purple · acento#7F39E8
--graphite#242424
--white#FFFFFF
Escala de acentoroxo é só acento — nunca superfície inundada
--accent
--accent-hover
--accent-active
--accent-muted
--accent-subtle
--accent-glow
Tema lightsuperfícies, texto e bordas do tema padrão
--bg
--bg-subtle
--surface-sunken
--border-1 / -2
Aa
--text-1
Aa
--text-2
Aa
--text-3
Aa
--accent-text
Tema darkbase grafite, superfícies em camadas, branco com opacidade
--bg
--bg-subtle
--surface-sunken
--border-1 / -2
Aa
--text-1
Aa
--text-2
Aa
--text-3
Aa
--accent-text
Type
Tipografia
DisplayGEIST · 600 · TRACKING -0.03EM · LEADING 1.08
Transformamos ideias em produtos digitais
Corpo & títulosescala de 12 a 32px
--text-2xl · 32 · 600Título de seção
--text-lg · 20 · 600Subtítulo de card
--text-md · 17 · 400Lead: sistemas, apps e sites sob medida.
--text-sm/base · 400Corpo: qualidade de engenharia do discovery ao deploy. Frases curtas.
Detalhes em monoGeist Mono para eyebrows, tags, stats e código
■ AGÊNCIA DE TECNOLOGIA
01 DESCOBRIR — 02 DESENHAR — 03 CONSTRUIR — 04 ESCALAR
40+ projetos entregues
$ npm run deploy
Spacing
Espaçamento & motion
Escala de espaçamentobase 4px, bloco de 8px vindo da grade do logo
1·4
2·8
3·12
4·16
5·24
6·32
7·48
8·64
9·96
Radius & bordascantos de 8–16px, bordas 1px de baixo contraste
--radius-sm 8
--radius-md 12
--radius-lg 16
hover glow
Motion150–300ms ease-out; lift + glow no hover
150ms--duration-fast
200ms--duration-base
300ms--duration-slow · ease-out
Components
Componentes
Buttonprimary / secondary / ghost · sm / md / lg
sm
md
lg
Badgeneutral / accent / outline
NeutralAccentOutline
Eyebrowmarcador quadrado + mono caps
Agência de tecnologia
Variante neutra
Carddefault e interactive (hover: lift + glow)
Default
Superfície com borda 1px.
Interactive
Passe o mouse: lift + glow.
Statcontagem animada ao entrar na viewport
0+
projetos entregues
0%
de satisfação
Terminalsempre grafite, com digitação
artcode — sprint.log
PixelGridpartículas animadas do motif
SectionHeadereyebrow + título com palavra em acento
Serviços
Tudo que seu produto precisa
Um parceiro técnico sênior para cada etapa.
ServiceCardícone em chip acentuado
Sistemas Web
Plataformas e painéis sob medida, prontos para escalar.
CaseCardimagem 16:9 + badge + resultado
[ IMAGEM DO CASE ]
IA
Agente de atendimento com IA
→ 72% dos tickets resolvidos sem humano
ProcessStepnúmero mono + régua com pixel
01
Descobrir
Entendemos o problema, o negócio e quem usa.
02
Desenhar
UX/UI e arquitetura antes de qualquer linha de código.
TestimonialCardaspas mono em acento
“
O time entende de negócio, não só de código. Isso muda tudo.
Rafael T.
Diretor de Operações · Varejo
FormsField + Input / Select / Textarea · focus ring roxo
Navbar · Footer · ThemeTogglecomponentes vivos nesta página
A navegação no topo, o rodapé abaixo e o toggle de tema light/dark desta página são os próprios componentes do design system em uso — experimente alternar o tema para ver os tokens trocando.