Design System Inspirado no Figma

Category: Design & Criatividade Ferramenta de design colaborativo. Multicolorida e vibrante, lúdica mas profissional.

1. Tema Visual & Atmosfera

A interface do Figma é a ferramenta de design que se projetou a si mesma — uma aula magistral de sofisticação tipográfica onde uma fonte variável personalizada (figmaSans) modula entre ultrafino (weight 320) e negrito (weight 700), com paradas em intermediários incomuns (330, 340, 450, 480, 540) que a maioria dos sistemas tipográficos jamais explora. Esse controle granular de peso confere a cada elemento de texto um peso visual precisamente calibrado, criando hierarquia por meio de micro-diferenças em vez do instrumento contundente de “regular vs negrito.”

A página apresenta uma dualidade fascinante: o cromo da interface é estritamente preto e branco (literalmente apenas #000000 e #ffffff detectados como cores), enquanto a seção hero e as vitrines de produto explodem com gradientes multicoloridos e vibrantes — verdes elétricos, amarelos brilhantes, roxos profundos, rosas intensos. Essa separação significa que o próprio design system é sem cor, tratando a saída colorida do produto como o conteúdo principal. A página de marketing do Figma é essencialmente uma parede de galeria branca exibindo arte colorida.

O que torna o Figma distintivo além da fonte variável é sua geometria de círculos e pílulas. Os botões usam raio de 50px (pílula) ou 50% (círculo perfeito para botões de ícone), criando uma sensação orgânica de paleta de ferramentas. O indicador de foco com contorno tracejado (dashed 2px) é uma escolha de design deliberada que ecoa as alças de seleção no próprio editor Figma — a linguagem de UI do site referencia a linguagem de UI do produto.

Características Principais:

• Fonte variável personalizada (figmaSans) com paradas de peso incomuns: 320, 330, 340, 450, 480, 540, 700
• Cromo de interface estritamente preto e branco — a cor existe apenas no conteúdo do produto
• figmaMono para rótulos técnicos em maiúsculas com amplo espaçamento entre letras
• Geometria de botões em pílula (50px) e circular (50%)
• Contornos de foco tracejados que ecoam as alças de seleção do editor Figma
• Gradientes hero multicoloridos e vibrantes (verde, amarelo, roxo, rosa)
• Feature OpenType "kern" ativado globalmente
• Espaçamento entre letras negativo em todo o site — até o corpo do texto usa de -0.14px a -0.26px

2. Paleta de Cores & Papéis

Primária

• Preto Puro (#000000): Todo o texto, todos os botões sólidos, todas as bordas. A única “cor” da interface.
• Branco Puro (#ffffff): Todos os fundos, botões brancos, texto em superfícies escuras. A outra metade do binário.

Nota: O site de marketing do Figma usa APENAS essas duas cores em sua camada de interface. Todas as cores vibrantes aparecem exclusivamente em capturas de tela do produto, gradientes hero e conteúdo incorporado.

Superfície & Fundo

• Branco Puro (#ffffff): Fundo principal da página e superfícies de cartão.
• Preto Vidro (rgba(0, 0, 0, 0.08)): Sobreposição escura sutil para botões circulares secundários e efeitos de vidro.
• Branco Vidro (rgba(255, 255, 255, 0.16)): Sobreposição de vidro fosco para botões em superfícies escuras/coloridas.

Sistema de Gradientes

• Gradiente Hero: Um gradiente multiparada vibrante usando verde elétrico, amarelo brilhante, roxo profundo e rosa intenso. Esse gradiente é a assinatura visual da seção hero — ele representa as possibilidades criativas da ferramenta.
• Gradientes de Seção do Produto: Áreas individuais do produto (Design, Dev Mode, Prototipagem) podem usar temas de cores distintos em suas vitrines.

3. Regras Tipográficas

Família de Fontes

• Primária: figmaSans, com fallbacks: figmaSans Fallback, SF Pro Display, system-ui, helvetica
• Monoespaçada / Rótulos: figmaMono, com fallbacks: figmaMono Fallback, SF Mono, menlo

Hierarquia

Princípios

• Precisão da fonte variável: figmaSans usa pesos que a maioria dos sistemas jamais toca — 320, 330, 340, 450, 480, 540. Isso cria hierarquia por meio de diferenças sutis de peso em vez de saltos dramáticos. A diferença entre 330 e 340 é quase imperceptível, mas estruturalmente significativa.
• Leve como base: A maior parte do corpo do texto usa 320–340 (mais leve que o “regular” típico de 400), criando uma experiência de leitura etérea e arejada que combina com a estética de ferramenta de design.
• Kern em todo lugar: Todo elemento de texto ativa a feature OpenType "kern" — o kerning não é opcional, é estrutural.
• Tracking negativo por padrão: Até o corpo do texto usa -0.1px a -0.26px de espaçamento entre letras, criando texto universalmente compacto. O texto de display comprime ainda mais para -0.96px e -1.72px.
• Mono para estrutura: figmaMono em maiúsculas com espaçamento positivo entre letras (0.54px–0.6px) cria rótulos de referência técnica.

4. Estilos de Componentes

Botões

Sólido Preto (Pílula)

• Fundo: Preto Puro (#000000)
• Texto: Branco Puro (#ffffff)
• Raio: círculo (50%) para botões de ícone
• Foco: contorno tracejado 2px
• Ênfase máxima

Pílula Branca

• Fundo: Branco Puro (#ffffff)
• Texto: Preto Puro (#000000)
• Padding: 8px 18px 10px (vertical assimétrico)
• Raio: pílula (50px)
• Foco: contorno tracejado 2px
• CTA padrão em superfícies escuras/coloridas

Vidro Escuro

• Fundo: rgba(0, 0, 0, 0.08) (sobreposição escura sutil)
• Texto: Preto Puro
• Raio: círculo (50%)
• Foco: contorno tracejado 2px
• Ação secundária em superfícies claras

Vidro Claro

• Fundo: rgba(255, 255, 255, 0.16) (vidro fosco)
• Texto: Branco Puro
• Raio: círculo (50%)
• Foco: contorno tracejado 2px
• Ação secundária em superfícies escuras/coloridas

Cartões & Contêineres

• Fundo: Branco Puro
• Borda: nenhuma ou mínima
• Raio: 6px (contêineres pequenos), 8px (imagens, cartões, diálogos)
• Sombra: efeitos de elevação sutis a médios
• Capturas de tela do produto como conteúdo do cartão

Navegação

• Nav horizontal limpa em branco
• Logo: wordmark do Figma em preto
• Abas de produto: navegação por abas em forma de pílula (50px)
• Links: texto preto, decoração sublinhado 1px
• CTA: botão pílula preto
• Hover: cor do texto via variável CSS

Componentes Distintivos

Barra de Abas do Produto

• Abas horizontais em formato de pílula (raio 50px)
• Cada aba representa uma área do produto Figma (Design, Dev Mode, Prototipagem, etc.)
• Aba ativa destacada

Seção de Gradiente Hero

• Fundo com gradiente multicolorido e vibrante de largura total
• Sobreposição de texto branco com título display de 86px
• Capturas de tela do produto flutuando dentro do gradiente

Indicadores de Foco Tracejados

• Todos os elementos interativos usam contorno dashed 2px no foco
• Referencia as alças de seleção no editor Figma
• Uma escolha de meta-design que conecta o site e o produto

5. Princípios de Layout

Sistema de Espaçamento

• Unidade base: 8px
• Escala: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px

Grade & Contêiner

• Largura máxima do contêiner: até 1920px
• Hero: gradiente de largura total com conteúdo centralizado
• Seções do produto: vitrines alternadas
• Rodapé: seção escura de largura total
• Responsivo de 559px a 1920px

Filosofia de Espaço em Branco

• Ritmo de galeria: O espaçamento generoso permite que cada seção do produto respire como uma exposição própria.
• Seções coloridas como respiração visual: O hero gradiente e as vitrines do produto proporcionam alívio cromático entre as seções monocromáticas da interface.

Escala de Raio de Borda

• Mínimo (2px): Pequenos elementos de link
• Sutil (6px): Contêineres pequenos, divisores
• Confortável (8px): Cartões, imagens, diálogos
• Pílula (50px): Botões de aba, CTAs
• Círculo (50%): Botões de ícone, elementos circulares

6. Profundidade & Elevação

Filosofia de Sombra: O Figma usa sombras com parcimônia. Os principais mecanismos de profundidade são o contraste de fundo (conteúdo branco em seções coloridas/escuras) e a dimensionalidade inerente das próprias capturas de tela do produto.

7. O Que Fazer e O Que Evitar

Faça

• Use figmaSans com pesos variáveis precisos (320–540) — o controle granular de peso É o design
• Mantenha a interface estritamente preto e branco — a cor vem apenas do conteúdo do produto
• Use geometria de pílula (50px) e circular (50%) para todos os elementos interativos
• Aplique contornos de foco tracejados de 2px — o padrão de acessibilidade característico
• Ative a feature "kern" em todo o texto
• Use figmaMono em maiúsculas com espaçamento positivo entre letras para rótulos
• Aplique espaçamento negativo entre letras em todo o site (-0.1px a -1.72px)

Evite

• Não adicione cores à interface — a paleta monocromática é absoluta
• Não use pesos de fonte padrão (400, 500, 600, 700) — use as paradas únicas da fonte variável (320, 330, 340, 450, 480, 540)
• Não use cantos afiados nos botões — apenas geometria de pílula e circular
• Não use contornos de foco sólidos — o tracejado é a assinatura
• Não aumente o peso da fonte do corpo acima de 450 — a estética de peso leve é central
• Não use espaçamento positivo entre letras no corpo do texto — é sempre negativo

8. Comportamento Responsivo

Breakpoints

Estratégia de Colapso

• Texto hero: 86px → 64px → 48px
• Abas do produto: scroll horizontal no mobile
• Seções de funcionalidades: coluna única empilhada
• Rodapé: múltiplas colunas → empilhado

9. Guia de Prompt para Agentes

Referência Rápida de Cores

• Tudo: “Preto Puro (#000000)” e “Branco Puro (#ffffff)”
• Vidro Escuro: “rgba(0, 0, 0, 0.08)”
• Vidro Claro: “rgba(255, 255, 255, 0.16)“

Exemplos de Prompts de Componentes

• “Crie um hero em um gradiente multicolorido e vibrante (verde, amarelo, roxo, rosa). Título em 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. Texto branco. Botão CTA pílula branca (raio 50px, padding 8px 18px).”
• “Projete uma barra de abas de produto com botões em formato de pílula (raio 50px). Ativa: fundo preto, texto branco. Inativa: transparente, texto preto. figmaSans em 20px weight 480.”
• “Construa um rótulo de seção: figmaMono 18px, maiúsculas, letter-spacing 0.54px, texto preto. Kern ativado.”
• “Crie corpo do texto em 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Preto Puro sobre branco.”

Guia de Iteração

1. Use as paradas de peso da fonte variável com precisão: 320, 330, 340, 450, 480, 540, 700
2. A interface é sempre preto + branco — nunca adicione cores ao cromo
3. Contornos de foco tracejados, não sólidos
4. O espaçamento entre letras é sempre negativo no corpo, sempre positivo nos rótulos mono
5. Pílula (50px) para botões/abas, círculo (50%) para botões de ícone