Design Systems para Startups: Como eu construí o meu de trás para frente

Eu construí meu design system de trás para frente. A maioria dos conselhos diz “espere o product-market fit.” Eu comecei com CSS custom properties no primeiro dia porque um bug de CLS no meu site pessoal me ensinou o custo de pular tokens: um Cumulative Layout Shift de 0,493 que levou duas sessões de depuração para rastrear até um valor de espaçamento inconsistente. A correção levou 15 minutos. A investigação levou 3 horas. Tokens teriam prevenido o bug por completo.¹

TL;DR

Design systems resolvem problemas de coordenação. Desenvolvedores solo com um único projeto não têm problemas de coordenação entre pessoas, mas têm problemas de coordenação entre o eu do passado e o eu do futuro. Depois de construir o sistema de design tokens para o blakecrosley.com — 10 tokens de cor, 13 passos de escala tipográfica, 8 valores de espaçamento — aprendi que a sequência certa é: tokens imediatamente (primeiro dia), padrões quando se repetem três vezes, sistema formal nunca (para projetos solo). O investimento em tokens se paga na primeira vez que uma inconsistência de espaçamento causa um bug de layout.

Meu Design System: Tokens e nada mais

A não-paleta de cores

Meu site inteiro opera com 10 CSS custom properties sem cores de marca:

: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;
}

Quatro níveis de transparência (100%, 65%, 40%, 10%) sustentam toda a hierarquia visual. Cada nível de texto passa no contraste WCAG AAA contra o fundo #000000. Sem gradientes, sem cores semânticas, sem alternância entre modo claro e escuro. A restrição produz um sistema coerente que uma biblioteca de componentes não conseguiria melhorar.²

A decisão de pular cores de marca foi uma escolha de design, não técnica. Durante meus 16 estudos de design de produto, notei que os produtos que eu mais respeitava (Linear, Vercel, Raycast) usavam paletas contidas onde a tipografia fazia o trabalho de hierarquia.

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. O sistema contém oito passos. Se um layout exige um espaçamento que não existe no sistema, o design está errado, não o sistema.

O bug do --spacing-2xs

Aprendi a regra do jeito difícil. Usei --spacing-2xs para um margin-top de subtítulo. O token não existia na minha definição :root. CSS custom properties falham silenciosamente — o navegador aplicou zero de margem em vez de lançar um erro. O subtítulo colapsou contra o título, o layout deslocou ao carregar, e meu score de Cumulative Layout Shift saltou para 0,493.³

O caminho de depuração: o Lighthouse sinalizou CLS. O DevTools identificou o elemento deslocado. Inspecionar os estilos computados revelou margin-top: 0 onde eu esperava 4px. Pesquisar --spacing-2xs na stylesheet mostrou um uso e zero definições.

A correção: trocar --spacing-2xs por --spacing-xs. A correção mais ampla: aderência estrita ao sistema de tokens sem exceções.

A escala tipográfica

13 passos de 12px a 80px, usando fontes do sistema:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-xs:      0.75rem;   /* 12px */
  --font-size-sm:      0.875rem;  /* 14px */
  --font-size-base:    1rem;      /* 16px */
  --font-size-lg:      1.125rem;  /* 18px */
  --font-size-xl:      1.3125rem; /* 21px */
  --font-size-2xl:     1.5625rem; /* 25px */
  --font-size-3xl:     1.875rem;  /* 30px */
  --font-size-4xl:     2.25rem;   /* 36px */
  --font-size-5xl:     2.7rem;    /* 43.2px */
  --font-size-6xl:     3.25rem;   /* 52px */
  --font-size-7xl:     3.875rem;  /* 62px */
  --font-size-display: 5rem;      /* 80px */
}

Fontes do sistema eliminam completamente a latência de carregamento de fontes. Sem FOIT (Flash of Invisible Text), sem FOUT (Flash of Unstyled Text), zero requisições de rede para fontes. Essa escolha contribui para meu score de 100/100 no Lighthouse.⁴

O problema do timing

Cedo demais: a armadilha da abstração prematura

Startups em estágio seed enfrentam extrema incerteza sobre o que o produto vai se tornar. Um design system codifica suposições sobre padrões de interação, hierarquia de componentes e linguagem visual. Quando o produto pivota, o design system se torna um passivo que resiste à mudança.⁵

Um time de três engenheiros e um designer não precisa de uma biblioteca de componentes com documentação, versionamento e uma instância do Storybook. O overhead de coordenação excede o problema de coordenação.

Mas tokens são diferentes. Tokens não são abstrações — são valores. Um token de cor não impõe uma estrutura de componentes. Um token de espaçamento não restringe padrões de interação. Tokens sobrevivem a pivots porque operam abaixo da camada de componentes.

Tarde demais: a espiral de dívida de design

Empresas Series B com 30 engenheiros e nenhum padrão de design compartilhado enfrentam o problema oposto. Cada time de feature inventa seus próprios estilos de botão, layouts de formulário e valores de espaçamento. O produto parece três aplicações diferentes costuradas juntas.⁶

Vejo o mesmo padrão em escala menor nos meus próprios projetos. Quando começo um projeto novo sem copiar meus tokens :root, inconsistências aparecem na primeira semana. Os tokens são um seguro barato contra uma espiral de dívida que se torna cara de reverter.

O framework de investimento progressivo

Estágio 1: Apenas tokens (primeiro dia, qualquer tamanho de time)

Defina e compartilhe apenas os valores fundamentais. Minha implementação:

41 tokens no total. Zero componentes. Zero site de documentação. O objetivo é prevenir divergência no nível dos valores enquanto preserva máxima flexibilidade para experimentação.⁷

Estágio 2: Extração de padrões (quando padrões se repetem 3x)

Quando o mesmo elemento de UI aparece em três features distintas, extraia o padrão. Meu site tem padrões extraídos para: - Layouts de card (cards de projeto, cards de blog, cards de redes sociais): padding consistente, border-radius, estados de hover - Sublinhados de navegação (links de nav, breadcrumbs): transição scaleX(0) → scaleX(1) no hover - Header com glassmorphism: backdrop-filter: blur(20px) com border-bottom

Cada padrão existe porque construí a mesma coisa três vezes e percebi a duplicação. Extraio padrões do código em produção em vez de projetá-los antecipadamente. Padrões de produção codificam requisitos reais.⁸

Estágio 3: Sistema formal (25+ engenheiros, nunca para projetos solo)

Em escala, o problema de coordenação justifica bibliotecas de componentes, espelhamento no Figma, processos de contribuição e changelogs versionados. Não cheguei a esse estágio com nenhum projeto pessoal e não espero chegar. Para desenvolvedores solo, tokens + padrões extraídos fornecem estrutura suficiente sem o overhead de manutenção de um sistema formal.

O que eu pulo completamente

Site de documentação

Sites de documentação de design system voltados ao público consomem tempo de engenharia que produz zero valor para o usuário em projetos solo. Minha “documentação” é o bloco :root no critical.css. Qualquer desenvolvedor (ou agente de IA) que leia o arquivo entende o sistema imediatamente.

Suporte multi-framework

Meu site usa CSS puro. Sem componentes React, sem wrappers Vue, sem Web Components. Os tokens funcionam em qualquer framework porque CSS custom properties são agnósticas a framework. A camada de abstração é o próprio CSS.

Teatro de acessibilidade prematura

Acessibilidade importa — meu site atinge contraste WCAG AAA em todos os níveis de texto. Mas construí o sistema de contraste primeiro (tokens com proporções conhecidas) e verifiquei a conformidade depois. Começar com tokens que têm acessibilidade embutida (cada nível de texto excede contraste 7:1) é mais eficaz do que auditar escolhas de cor arbitrárias após o fato.⁹

Principais conclusões

Para desenvolvedores solo: - Defina CSS custom properties para cor, tipografia, espaçamento e transições no primeiro dia; o investimento de 41 tokens previne bugs e inconsistências que custam horas para depurar depois - Pule bibliotecas de componentes, sites de documentação e Storybook; para projetos solo, o overhead de manutenção excede o benefício de coordenação - Extraia padrões do código em produção quando o mesmo elemento aparece em três lugares; extração prematura desperdiça esforço em padrões que podem não sobreviver à próxima iteração

Para líderes de design em startups: - Comece com tokens antes do product-market fit; tokens sobrevivem a pivots porque operam abaixo da camada de componentes - Resista ao sistema formal até que 25+ engenheiros criem um problema de coordenação genuíno; formalização antes desse limiar cria overhead de manutenção que desacelera a iteração

Referências