O manual de
quem constrói com a marca.
Tokens, componentes e diretrizes visuais para designers e devs. Tudo que você precisa para construir interfaces com a identidade da Arbeit Studio — sem precisar perguntar para ninguém.
O que orienta cada decisão visual.
Antes de usar qualquer token ou componente, entenda o porquê. Esses princípios guiam as escolhas estéticas e funcionais do sistema.
Grid antes de ornamento
Margens, alinhamento e proporção são o design. Elementos decorativos existem para reforçar estrutura — nunca para disfarçar a ausência dela.
Mono como linguagem
A escolha por fontes monoespaçadas não é estética de terminal — é precisão. Cada caractere com o mesmo peso visual reforça a ideia de rigor e construção.
Vermelho com intenção
O vermelho é o sinal — ação, destaque, erro, foco. Usado em excesso perde o sentido. Cada aparição deve ter uma razão.
Paleta de tokens.
Todas as cores do sistema nomeadas por intenção, não por valor. Use os tokens CSS — nunca o hex diretamente no código.
Cores primárias
Cores secundárias
Neutros
Duas fontes, papéis distintos.
Martian Mono para display e títulos. JetBrains Mono para corpo, UI e labels. Nenhuma fonte serifada, nenhuma sans-serif — o sistema é inteiramente monoespaçado.
/* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root { --disp: 'Martian Mono', monospace; /* headlines */ --mono: 'JetBrains Mono', monospace; /* body / UI */ }
Escala de espaço.
Escala baseada em múltiplos de 4px. Use as variáveis CSS — não valores arbitrários.
Símbolos do sistema.
O sistema usa símbolos tipográficos — sem biblioteca de ícones externa. Isso garante consistência de peso com as fontes mono.
Botões.
Quatro variantes, três tamanhos. Sempre font-family: var(--mono). Transição de transform e background em .25s ease.
/* Primário */ .btn-red { background: var(--red); color: #fff; } .btn-red:hover { background: var(--red-deep); transform: translateY(-2px); } /* Ghost */ .btn-ghost { border: 1px solid var(--line); background: transparent; } .btn-ghost:hover { border-color: var(--ink); } /* Tamanhos */ .btn-sm { padding: 9px 16px; font-size: 11.5px; } .btn { padding: 13px 22px; font-size: 13px; } .btn-lg { padding: 17px 28px; font-size: 14px; }
/* Botão translúcido (sobre fundo escuro) */ style="background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3)"
Tamanhos
Tags, chips e badges.
Tags são bordas finas com texto uppercase. Chips têm fundo e são arredondados. Badges são sólidos e usados para status.
/* Tag padrão */ .tag { border: 1px solid var(--line); padding: 5px 12px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; } .tag-red { border-color: var(--red); color: var(--red); background: var(--red-tint); } /* Chip */ .chip { background: var(--line-soft); border-radius: 20px; padding: 4px 12px; } /* Badge */ .badge { background: var(--red); color: #fff; padding: 4px 10px; font-size: 10px; } /* Sobre laranja e ciano, texto escuro (branco não tem contraste) */ .badge-orange { background: var(--orange); color: var(--ink); } .badge-cyan { background: var(--cyan); color: var(--ink); }
Campos e seleções.
Inputs com apenas borda inferior — sem caixa completa. Foco muda a borda para --red. Label sempre acima, em uppercase com letter-spacing.
Seleção múltipla (choice grid)
.choice { border: 1px solid var(--line); } .choice.selected { border-color: var(--red); background: var(--red-tint); color: var(--red-deep); }
/* Campo base */ .field input { background: transparent; border: none; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 15px; padding: 10px 2px; transition: border-color .25s; } .field input:focus { border-color: var(--red); outline: none; }
Cards.
Três padrões principais: card de artigo, card de trabalho e card de membro. Todos usam border: 1px solid var(--line) — sem box-shadow em repouso.
Capas de case usam .case-cover: a ilustração aparece inteira (object-fit: contain) sobre --line-soft, a cor de fundo das ilustrações, em capas de qualquer proporção. Exporte em 2× a largura do card: 1164 × 728 px.
Card de membro: foto de 104 px, colorida, com borda de 1 px em --line e zoom de 4% no hover. O arquivo tem 208 × 208 px (2×), recortado em círculo e com um anel de 10 px em --line já na imagem. O mesmo arquivo vira o avatar do autor no blog, em 34, 40 e 54 px.
Card de artigo
Design systems que sobrevivem
Governança leve e documentação que o time realmente lê.
Card de projeto
Estrutura para escala
Card de membro
Header e nav links.
Header sticky com altura 84px. Fundo transparente que vira color-mix com blur ao rolar. Links com underline animado em --red.
ARBEIT STUDIO.site-head { position: sticky; top: 0; height: 84px; z-index: 50; } .site-head.scrolled { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom-color: var(--line); } /* Nav link underline */ .navlinks a::after { content: ""; width: 0; height: 1.5px; background: var(--red); transition: width .25s; } .navlinks a:hover::after { width: 100%; } /* CTA do header — ghost, 32px, alinhado ao seletor de idioma */ .nav-cta { height: 32px; padding: 0 18px; line-height: 1; } /* Seletor de idioma — mesma altura de 32px */ .lang-btn { height: 32px; padding: 0 9px; border: 1px solid var(--line); } .lang-btn.active { color: var(--ink); border-color: var(--ink-faint); }
Breadcrumb
Indicadores de progresso.
Dois padrões: barra de leitura (fixed top) e segmentos do wizard.
Barra de leitura
65% lido
.progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--red); z-index: 200; }
Wizard (passo a passo)
.seg { flex: 1; height: 2px; background: var(--line); } .seg.done { background: var(--red); }
Faixa de marquee.
Scrollx infinito com animation: scrollx 42s linear infinite. Conteúdo duplicado para loop seamless. Separador ✳ vermelho entre itens.
.marquee .track { animation: scrollx 42s linear infinite; } @keyframes scrollx { from { transform: translateX(0); } to { transform: translateX(-50%); } /* conteúdo duplicado */ }
Animação com propósito.
Cada transição tem intenção. A curva padrão é cubic-bezier(.2,.7,.2,1) — entrada suave, saída rápida. Nunca use ease-in em elementos que aparecem.
Scroll reveal
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } [data-d="1"] { transition-delay: .08s; } [data-d="2"] { transition-delay: .16s; } [data-d="3"] { transition-delay: .24s; } /* Topo da página: já está na tela, então anima ao carregar (CSS), sem esperar o scroll */ @keyframes reveal-in { from { opacity: 0; transform: translateY(22px); } } .hero .reveal, .mast .reveal { animation: reveal-in .7s cubic-bezier(.2,.7,.2,1) both; }
Hover states
/* Arrow slide on hover */ .motion-link span { transition: transform .25s ease; } .motion-item:hover .motion-link span { transform: translateX(5px); } /* Lift on hover */ .hover-lift:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
Padrões de layout recorrentes.
Os padrões que aparecem em todas as seções do site. Reuse — não reinvente.
Section head (eyebrow + título + meta)
Um processo só, do problema ao produto.
Design e software na mesma mesa, desde o primeiro dia.
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 56px; } .section-head .meta { max-width: 34ch; text-align: right; color: var(--ink-soft); }
Processo (grid 4 colunas sobre vermelho)
Descoberta
Imersão no problema e nas pessoas.
Design
Da arquitetura ao pixel final.
Engenharia
Código sólido e testado.
Evolução
Metrificamos e iteramos.
CTA do footer