Exemplos de DESIGN.md
Arquivos DESIGN.md reais extraídos de sites públicos. Cada um reúne as cores, a tipografia, o espaçamento e os componentes de um site no formato que os agentes de código com IA leem. Abra um card para ver a prévia e copiá-lo para o seu repositório.
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.
Airbnb
O sistema de design da Airbnb se baseia em uma única fonte variável proprietária (Airbnb Cereal VF), com uma paleta neutra quase monocromática ancorada no cinza-carvão profundo (#222222) e em cinzas claros. O coral-rosa característico da marca, "Rausch" (#ff385c), é reservado exclusivamente para os CTAs principais e para o logotipo. O layout é uma grade responsiva de cards com fotos, com proporção generosa de imagem para texto, cantos arredondados de 20px nos cards e um sistema de sombras ambientes em múltiplas camadas que cria profundidade sutil, sem contraste forte. A barra de busca é um contêiner de destaque em formato de pílula, que reúne a principal ação do usuário.
Anthropic
A identidade de design da Anthropic é contida e guiada pela tipografia, construída em torno de duas fontes personalizadas, Anthropic Serif e Anthropic Sans, sobre um fundo off-white quente (#faf9f5). A paleta é deliberadamente mínima: preto-quase-puro (#141413) sobre o off-white quente, com tons de pedra discretos para textos secundários e bordas. Títulos serifados em grande escala sustentam a voz editorial, enquanto uma seção em painel escuro (fundo quase preto com texto em tom marfim) cria um contraste dramático. A estética como um todo transmite seriedade intelectual e uma missão voltada à segurança, por meio de espaços em branco generosos, forte contraste tipográfico e ausência total de ornamentos decorativos.
Apple
Tokens de design extraídos por análise de frequência no CSSOM, sem interpretação por LLM.
Dribbble
O sistema de design do Dribbble é construído sobre um azul-marinho quase preto e profundo (#0d0c22), combinado com uma superfície branca nítida, e pontuado por um rosa-choque característico (#ea4c89), usado com moderação para ênfase editorial e destaques interativos. Todo o sistema tipográfico utiliza exclusivamente a família Mona Sans em todos os pesos, criando hierarquia apenas por peso e tamanho. Botões em formato de pílula (border-radius: 1e+07px) e cards arredondados (raio de 12px) definem a linguagem geométrica. O layout é espaçoso, com uma grade base de 8px, e a elevação é transmitida por sombras suaves em vez de camadas pesadas.
Duolingo - The world’s most popular way to learn
Tokens de design extraídos por análise de frequência do CSSOM, sem interpretação por LLM.
Figma
O site de marketing da Figma usa um sistema monocromático rigoroso em preto e branco, ancorado na fonte variável proprietária figmaSans. O design é guiado pela tipografia: títulos de display grandes, em 88px/56px, com letter-spacing negativo e apertado, contrastam com textos de corpo leves, em peso 330. Os CTAs usam formatos de pílula totalmente arredondados (border-radius: 9999px), em preto sólido com texto branco. O layout é baseado em grid, com largura máxima de conteúdo de 1440px, padding vertical generoso de 80px nas seções e uma tela branca limpa. A profundidade é mínima, com sombras sutis baseadas em sobreposições em oklch. Um acento lavanda/roxo (#cb9fd2) aparece no banner do rodapé. No geral, a estética é confiante, sofisticada na tipografia e muito centrada na marca.
Harvey
Harvey tem uma identidade tipográfica própria com duas famílias: HarveySerifFont para a autoridade editorial e HarveySansFont para a clareza funcional. A barra de navegação em preto quente (#0f0e0d) contrasta com a superfície de conteúdo em marfim fora-branco (#fafaf9). A paleta é deliberadamente monocromática, com uma escala de cinzas quentes graduada (gray-50 a gray-950) e sem cores de destaque, transmitindo confiança e contenção, adequadas a trabalhos jurídicos de alto risco. A elevação é sugerida pelo contraste entre superfícies, e não por sombras. O título principal da página usa a serifada em 72px, criando autoridade tipográfica imediata, enquanto o texto corrido e os elementos de interface usam a sans personalizada. O espaçamento segue uma grade base de 8px, com tokens de escala nomeados (xs, sm, md, xl, 2xl).
IKEA
A página inicial global da IKEA usa um sistema de design ousado e chapado, ancorado no amarelo IKEA (#ffdb00) como superfície principal de ação e no azul IKEA (#0058a3) como destaque da logo da marca. Todo o sistema tipográfico se apoia em uma única fonte personalizada, a Noto IKEA, nos pesos 400 e 700, seguindo uma escala bem definida que vai de 14px no texto corrido até 51px nos títulos de destaque. A hierarquia de elevação vem inteiramente do contraste de cor e da estrutura do layout, sem sombras. O layout usa um contêiner com largura máxima de 90rem e um espaçamento de grade de 1,5rem no desktop, além de um token de border-radius consistente de 8px aplicado aos elementos interativos. O fundo off-white (#fffefb) traz calor em contraste com o texto #111111, criando uma experiência de leitura acessível e de alto contraste.
Klarna
O sistema de design da Klarna apresenta um azul-marinho escuro sofisticado como cor primária (#0b051d), com cores de destaque vibrantes, incluindo o rosa característico da marca (#ffa8cd). O sistema usa fontes próprias da Klarna junto com fontes do sistema, enfatiza cantos arredondados (32px é o mais comum) e mantém alto contraste para acessibilidade. O design equilibra profissionalismo e acessibilidade por meio de espaçamentos generosos e uma hierarquia tipográfica clara.
Linear
O design system da Linear é um produto de interface densa, com tema escuro como padrão, pensado para equipes de engenharia. A paleta de superfícies se ancora em preto-quase-puro (#08090a, #0f1011), com tons de cinza escuro em camadas para diferenciar barra lateral, cards e painéis. A tipografia usa exclusivamente Inter Variable, com letter-spacing negativo e preciso em tamanhos de display, e Berkeley Mono para código inline. A linguagem de raio é deliberadamente pequena (2–6px predominante), com formas de pílula reservadas para badges e chips de status. A elevação se expressa por bordas internas sutis de 1px e sombras suaves de baixa opacidade, em vez de sobreposições dramáticas. A cor de CTA principal é o índigo característico da Linear (#5e6ad2), usado no botão Sign Up e em links-chave.
Magentix Studio
Magentix Studio veste um estúdio de produtos de IA com a estética de uma publicação editorial e de uma galeria de arte.
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.
Notion
A página inicial de marketing da Notion combina uma seção de destaque em azul-marinho profundo (#02093a) com um corpo de página claro (#f6f5f4), usando uma tipografia personalizada (NotionInter) em todos os papéis de texto. O design emprega uma grade de 12 colunas com calhas de 28px, uma linguagem de dupla curvatura (8px para cards, 9999px para pills) e um sistema de sombras progressivas em múltiplas camadas para elementos flutuantes. O azul da marca (#2537b1) conduz os CTAs e os destaques de acento, enquanto uma escala de cinzas semânticos (de gray-200 a gray-900) estrutura toda a hierarquia de texto e superfícies.
Paperclip
Paperclip é uma plataforma de gerenciamento de agentes de IA com um design ousado de fundo escuro, ancorado em um preto quase total (#0a0a0a) e texto em branco (#ffffff). O destaque do hero é uma ilustração em gradiente multicolorido de formas empilhadas em cápsula nas cores magenta, violeta, turquesa, laranja e amarelo, criando uma identidade visual cromática e energética sobre o fundo escuro. A tipografia combina Inter Tight (títulos condensados, pesados e com espaçamento entre letras negativo) com Inter (texto corrido e interface) e JetBrains Mono (código e status). O botão principal de ação é um botão branco em formato de pílula sobre fundo escuro. Um sistema de status em verde semântico (#22c55e) sinaliza os estados de agentes e tarefas em toda a interface do produto. A navegação é minimalista e plana, com uma borda inferior sutil.
PayPal
A homepage holandesa da PayPal usa um design ousado e voltado ao consumidor, ancorado em uma seção hero em azul-céu vibrante (#60cdff) com títulos em preto ultra-pesado (PayPal Pro w900). A navegação é branca, com texto preto e dois botões de CTA bem distintos: um "Inloggen" com contorno e um "Rekening openen" preenchido em preto. Um banner de anúncio em azul-marinho escuro fica no topo. A linguagem geral é de alto contraste, com cantos muito arredondados em formato de pílula e forte dependência da tipografia da marca, transmitindo confiança e acessibilidade para um amplo público de serviços financeiros ao consumidor.
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.
Shopify
O homepage de marketing da Shopify usa um hero dramático em vídeo de tela cheia, com fundo quase preto (#02090a), que contrasta fortemente com a barra de navegação branca logo acima. A cor de destaque principal é um verde-menta vibrante (#36f4a4), usado com moderação em realces e estados interativos. A tipografia se divide entre NeueHaasGrotesk, para títulos de display e editoriais, e Inter-Variable, para o texto de corpo da interface. Os CTAs usam formatos de pílula totalmente arredondados (border-radius: 9999px). O sistema como um todo é confiante, de alto contraste e aspiracional, pensado para converter visitantes em lojistas.
Snapchat
O site da Snapchat usa um tema claro de alto contraste, ancorado no amarelo icônico da marca, #FFFC00, em superfícies principais quase pretas (#121314) e em um fundo de página branco e limpo. O design combina Avenir Next (primária) com Graphik (secundária), criando uma hierarquia tipográfica amigável, mas bem estruturada. Os elementos de interação, como botões, pílulas e tags, usam cantos totalmente arredondados (100px), enquanto os campos de entrada usam um raio sutil de 5px. A navegação é uma pílula flutuante com uma sombra suave. O conteúdo é apresentado em cards de mídia grandes com texto branco sobreposto, criando um layout imersivo e voltado à prévia do app. A densidade geral é moderada, com espaçamento generoso e uma hierarquia visual clara que une convenções de marketing e de interface de produto.
Stripe
A página inicial de marketing da Stripe usa um sistema de design rigorosamente controlado (HDS — Stripe Design System), construído em torno da fonte variável "sohne-var" em pesos leves (300–400), uma paleta de marca que vai do azul-marinho profundo ao índigo, ancorada por #533afd (Stripe Indigo), e um hero com gradiente espectral de largura total, característico da marca. Os componentes têm raio baixo (4–6px), sombras planas ou mínimas e se organizam em uma grade de espaçamento base de 8px. O tom geral é autoritário, mas acessível: infraestrutura financeira comunicada por meio de uma tipografia segura e um uso contido da cor.
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.
The Onion
O The Onion é um sistema de design de jornal satírico digitalizado: manchetes em gótico condensado e pesado, na cor preta, com um verde-floresta característico (#006b3a) usado nos rótulos de seção, nos selos de tendência e nos CTAs, tudo sobre uma tela branca e cinza-claro sem adornos. A tipografia é a principal ferramenta de design: grotescas condensadas e semicondensadas do Adobe Fonts (tablet-gothic, rocky-condensed) dominam os títulos, enquanto utopia-std-caption cuida do texto corrido. O layout é denso em informação, com grades de cards compactas, separadores de artigo com borda inferior e raios de borda quase nulos nos elementos estruturais. A elevação é mínima, com apenas algumas sombras sutis em sobreposições.
Uber
A linguagem de design da Uber combina minimalismo limpo com ilustrações vibrantes para criar uma plataforma de transporte acessível e, ao mesmo tempo, profissional. A base em preto e branco contrastante oferece clareza e legibilidade, enquanto as ilustrações coloridas nas seções de destaque trazem calor e conexão humana. A tipografia se apoia na família personalizada UberMove para manter a consistência da marca, com espaçamentos generosos que dão respiro à interface como um todo.
WIRED
WIRED é um sistema de design monocromático de alto contraste, orientado pela editorial, construído em torno de um sistema tipográfico proprietário (Breve Text, WIRED Mono, WiredDisplay, Apercu) e de uma paleta cromática quase inexistente. O preto (#000000) domina com 2961 ocorrências, ancorando textos, bordas, ícones e estados interativos. O branco (#ffffff) fornece a superfície principal. A cor de destaque aparece com moderação: apenas #057dbc surge como azul da marca, nos botões de assinatura. O layout usa uma grade de matérias em múltiplas colunas bem estruturada, com espaçamento base apertado de 8px, superfícies planas sem sombras e raio de borda mínimo (4px no padrão). A tipografia é o principal diferencial: o corpo editorial usa Breve Text em 19px, os rótulos de seção usam WIRED Mono em maiúsculas com espaçamento entre letras, e os títulos de destaque usam WiredDisplay. A estética geral é autoritária, densa em informação e voltada, antes de tudo, à leitura.
xAI
xAI usa no seu site de marketing uma paleta de superfícies em tons quentes de off-white, ancorada em --color-ivory (#f9f8f6) e --color-white (#ffffff), com #0a0a0a quase preto como texto e cor de primeiro plano dominante. O sistema tipográfico se divide entre universalSansDisplay para títulos grandes (60–72px, com letter-spacing negativo e apertado), universalSans para textos de corpo e interface, e GeistMono para código e contextos de terminal. A linguagem de raios é dominada por formas de pílula com 9999px em botões de chamada para ação e tags, com 12px e 6px para cards e campos de entrada. A elevação é mínima: os cards usam uma sombra suave de múltiplas camadas, enquanto a maioria das superfícies é plana. O tom geral é técnico-premium: cor contida, espaço em branco generoso e uma forte estética de código monoespaçado que transmite credibilidade para desenvolvedores.
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.