Design systems de SaaS
Sistemas de design extraídos de sites de software e SaaS: apps de produtividade, ferramentas de gestão de projetos, CRMs e outros produtos vendidos como serviço. A maioria combina uma paleta contida e uma cor de destaque com uma escala tipográfica clara, o que faz deles um bom ponto de partida para um dashboard ou uma página de marketing de produto.
3 exemplos de DESIGN.md nesta categoria, de Figma, Linear e Notion. 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.
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.
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.
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.
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.