Beleza e brutalismo: como projetei blakecrosley.com na interseção

Projetei blakecrosley.com sem cores, sem gradientes, sem ilustrações e sem elementos decorativos. Apenas tipografia branca sobre preto absoluto (#000000), com camadas de opacidade a 5%, 10%, 40% e 65% criando toda a hierarquia visual. O site obtém 100/100 no desempenho do Lighthouse e alcança o que chamo de “beleza honesta”: clareza estrutural com execução precisa.¹

Resumo

Brutalismo no design digital reduz interfaces à honestidade estrutural: tipografia crua, grids visíveis, decoração mínima. A beleza adiciona refinamento: relações harmoniosas de cor, espaçamento preciso, micro-interações. Os produtos modernos mais impactantes (Linear, Notion, Arc Browser) operam na interseção. Construí blakecrosley.com nessa mesma interseção, e este post documenta as decisões específicas de CSS, o que removi e por que a tensão entre honestidade e ofício produz interfaces melhores do que qualquer um dos princípios isoladamente.

Meu design system: brutalismo como fundação

A não-paleta de cores

A maioria dos design systems começa com uma paleta de cores. O meu começa com a ausência de uma:

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

Sem cores de marca. Sem cores semânticas além dos níveis de opacidade. Toda a hierarquia visual opera através de quatro camadas de transparência: 100% (primário), 65% (secundário), 40% (terciário) e 10% (bordas estruturais). Isso é brutalista em princípio: o material (luz sobre escuro) é usado diretamente, em vez de decorado.²

A decisão foi deliberada. Durante meus 16 estudos de design de produto, percebi que os produtos que mais respeitava (Linear, Vercel, Raycast) usavam paletas contidas, onde tipografia e espaçamento faziam o trabalho de hierarquia. Produtos com mais de 8 cores semânticas frequentemente usavam cor como substituto para clareza estrutural.

Tipografia como hierarquia principal

Sem cor para sustentar a hierarquia, a tipografia carrega tudo:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-display:  5rem;     /* 80px - hero headlines */
  --font-size-7xl:      3.875rem; /* 62px */
  --font-size-base:     1rem;     /* 16px - body text */
  --font-size-xs:       0.75rem;  /* 12px - metadata */
}

Fontes do sistema, não fontes web customizadas. Essa é tanto uma escolha brutalista (usar o material nativo da plataforma) quanto uma escolha de desempenho (zero latência no carregamento de fontes, contribuindo para pontuações perfeitas no Lighthouse). O tamanho display (80px) com letter-spacing reduzido (-0.03em) dá peso aos títulos sem decoração. O texto do corpo a 16px com line-height generoso (1.7) prioriza legibilidade em vez de densidade.³

O sistema de espaçamento de 8 pontos

Cada valor de espaçamento deriva de uma base de 8 pontos:

:root {
  --spacing-xs:  0.5rem;  /* 8px */
  --spacing-sm:  1rem;    /* 16px */
  --spacing-md:  1.5rem;  /* 24px */
  --spacing-lg:  2rem;    /* 32px */
  --spacing-xl:  3rem;    /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */
  --spacing-4xl: 8rem;    /* 128px */
}

Sem valores arbitrários. Se um espaçamento não existe no sistema, o design está errado, não o sistema. Aprendi isso da maneira difícil quando usei --spacing-2xs em uma margem de subtítulo (um token que não existia) e o layout quebrou silenciosamente. A correção foi mudar para --spacing-xs, não criar um novo token.⁴

O que removi (e por quê)

Sem gradientes

Gradientes servem a dois propósitos: interesse visual e simulação de profundidade. Em um site construído em torno de conteúdo (posts de blog, descrições de projetos), gradientes competem com o conteúdo pela atenção visual. Removi todos os gradientes e deixei o conteúdo ser o interesse visual.

Sem ilustrações ou ícones

Sem SVGs decorativos, sem ilustrações de hero, sem bibliotecas de ícones. A fotografia serve como o único elemento visual não tipográfico (fotos pessoais na página inicial). Cada foto tem um container com proporção 4/3 e apenas border-radius — sem sombras, sem overlays, sem tratamentos de cor.

Sem box shadows (estado padrão)

Elementos no estado padrão têm sombra zero. Estados de hover adicionam profundidade sutil:

.lab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

Sombras aparecem apenas como feedback funcional (este elemento é interativo e você está interagindo com ele), nunca como decoração.

Sem modo claro

O site não tem media query prefers-color-scheme. Opera exclusivamente em modo escuro. Essa é uma escolha deliberadamente intransigente: em vez de manter dois sistemas visuais e inevitavelmente comprometer ambos, projetei um único sistema bem-feito. O fundo preto absoluto (#000000 em vez de #0a0a0a ou #1a1a1a) dá à tipografia o máximo contraste.⁵

Onde a beleza entra

Estrutura brutalista sozinha produz hostilidade. A beleza no meu design vem do ofício na execução, não da decoração:

Micro-interações como feedback funcional

Todo elemento interativo tem uma transição, mas nenhuma transição existe por prazer estético:

:root {
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav a::after {
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav a:hover::after {
  transform: scaleX(1); /* Underline grows from left */
}

Links de navegação revelam um sublinhado no hover (funcional: confirma a interatividade). Cards de projeto escalam para 1,08x (funcional: indica a área clicável). O hambúrguer mobile anima para um X (funcional: comunica mudança de estado). Nenhuma animação existe sem um propósito funcional.⁶

Animações de entrada para grupos de cards

Cards entram com uma animação escalonada de translateY(16px):

@keyframes socialCardIn {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

Isso serve a um propósito funcional: comunica que o conteúdo foi carregado e direciona a atenção para elementos recém-visíveis. O escalonamento (cada card atrasado em 100ms) cria um ritmo que ajuda os usuários a escanear o grupo. A animação é de 500ms com easing cubic-bezier — rápida o suficiente para não atrasar a interação, suave o suficiente para parecer bem-executada.

O header com glassmorphism

O único elemento quase decorativo:

.header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-overlay); /* rgba(0,0,0,0.8) */
}

O header desfocado serve a um propósito funcional: indica que o conteúdo rola por trás da navegação, estabelecendo o header como uma camada persistente. Mas o blur também adiciona refinamento visual — é um dos poucos momentos em que o design prioriza beleza junto com função.

Produtos que encontram o mesmo equilíbrio

Linear: estrutura brutalista, execução bela

A interface de gerenciamento de projetos do Linear é densa, orientada por teclado e pressupõe usuários profissionais. Sem ilustrações, sem onboarding gradual. A estrutura é brutalista. A execução é bela: tipografia precisa, tema escuro harmonioso, animações suaves a 60fps. Cada pixel serve a um propósito. O propósito é servido com ofício.⁷

Notion: blocos brutos, sistema refinado

O Notion expõe seu modelo de dados subjacente (blocos) diretamente aos usuários. A honestidade estrutural é brutalista. O refinamento aparece no design de interação: drag-and-drop suave, edição inline responsiva e uma paleta de comandos que faz o sistema de blocos parecer natural.⁸

Arc Browser: navegação brutalista, acabamento belo

O Arc expõe o sistema subjacente de gerenciamento de abas do navegador (abas verticais, workspaces, split views). A honestidade estrutural é brutalista. A execução visual (temas com gradiente, animações suaves) torna o gerenciamento de abas agradável em vez de clínico.⁹

O ponto de equilíbrio

A abordagem mais eficaz usa princípios brutalistas para estrutura e princípios de beleza para execução:

Principais conclusões

Para designers: - Use princípios brutalistas para estrutura (layout, arquitetura de informação, cor) e princípios de beleza para execução (tipografia, espaçamento, micro-interações); a combinação produz interfaces que são honestas e agradáveis - Remova cada elemento decorativo e pergunte o que quebra; se nada quebrar, a decoração era desnecessária - Projete bem para um modo em vez de adequadamente para dois; minha abordagem exclusivamente escura produz um sistema mais coerente do que um toggle claro/escuro comprometido

Para desenvolvedores: - Implemente design tokens como CSS custom properties sem valores arbitrários; se um espaçamento não existe no sistema, corrija o design em vez de adicionar um valor avulso - Trate micro-interações como feedback funcional; uma transição de hover de 150ms comunica interatividade, enquanto uma animação de entrada de 2 segundos não comunica nada útil

Para líderes de produto: - Alinhe o posicionamento estético ao contexto do usuário; ferramentas profissionais tendem ao brutalismo, produtos de consumo tendem à beleza, e os melhores produtos encontram a interseção

Referências