Design systems de ferramentas para desenvolvedores
Sistemas de design extraídos de sites de ferramentas para desenvolvedores e de infraestrutura: hospedagem, bancos de dados, APIs, IDEs e produtos de DevOps. Muitos apostam em superfícies escuras, detalhes em fonte monoespaçada e blocos de código tratados como componentes de primeira classe, com uma tipografia compacta e técnica.
3 exemplos de DESIGN.md nesta categoria, de Neon, Railway e Supabase. Extraídos das páginas públicas de cada site. Não são diretrizes oficiais de marca. Ainda não conhece o formato? Leia o que é um DESIGN.md.
Neon
O sistema de design da Neon é uma marca voltada a desenvolvedores, com foco no modo escuro, construída sobre um fundo quase preto (#000000, #18191b) e um verde neon vibrante como cor primária (#00e599), apoiado por um verde intermediário (#34d59a). O sistema tipográfico combina Inter (interface e texto corrido) com GeistMono (código e dados), ambas com espaçamento entre letras negativo e apertado. O espaçamento segue uma grade base de 4px. O raio de borda é uniformemente mínimo, com 4px. A elevação é obtida pelo contraste de bordas, e não por sombras, com uma única sombra difusa usada com moderação. A seção principal traz um fundo de visualização de dados animado que ocupa toda a largura, reforçando a identidade da marca voltada a bancos de dados e infraestrutura.
Railway
O sistema de design da Railway é uma interface de plataforma para desenvolvedores com tema escuro por padrão, ancorada em superfícies azul-marinho quase preto profundo (#13111c, #0b0b0f), texto off-white de alto contraste (#f7f7f8) e um distintivo tom roxo de destaque da marca (#853bce / #553f83). O hero usa IBM Plex Serif para dar peso editorial, enquanto a Inter cuida de todo o texto da interface e JetBrains Mono / SF Mono são usadas em contextos de código. A elevação é obtida por bordas internas com brilho branco (rgba(255,255,255,0.2) 1.5px inset) em vez de sombras projetadas, o que dá à interface uma estética de painéis de vidro. O sistema de espaçamento é baseado em múltiplos de 4px, com um ritmo marcante de 8/12/16/24/32. Os raios de borda são discretos (4px predominante), com 8px e 16px usados seletivamente em cards e contêineres do hero.
Supabase
Supabase usa um sistema de design com foco no modo escuro, ancorado em um fundo quase preto e profundo (oklch ~0.19) e um verde vibrante como cor de destaque da marca (#3ecf8e / #3fcf8e). A estrutura do layout se organiza em uma grade responsiva de cards de recursos, com Manrope para títulos de destaque e Inter para textos de corpo e elementos de interface. Source Code Pro é usada em todos os contextos de código e monoespaçados. O sistema de cores é construído sobre propriedades personalizadas em oklch, com nomes semânticos. Os cards têm raio de 12px e um tratamento de borda sutil, os botões usam raio de 6 a 8px, e a densidade geral é moderada, com uma grade de espaçamento base de 8px.
Não encontrou o site que procura?
Cole qualquer URL para gerar o DESIGN.md de qualquer site. Cores, tipografia, espaçamento e tokens, prontos para o seu fluxo de trabalho com IA.