Pular para o conteúdo

Design systems

Comparativo

Cinco direções para a mesma marca, com a mesma paleta. Compare aqui, abra o guia de cada um ou vá direto a uma das 78 páginas.

Gambito

v1.1.0Pronto

gambito.design.dev.br

Direção

O primeiro sistema da marca, extraído da landing Shopify. Corte diagonal na inclinação do símbolo e tema por seção.

Guia

16 seções numa página

Fontes

Inter

Temas

5 claro, névoa, pistache, escuro e verde

Tokens

90 --gb-*
11 símbolos no sprite

Falta

  • Correções da auditoria de navegador, previstas para a 1.2
  • Órbita, vitrine, modal, carrossel, marquee, ticker e dash ficaram de fora; estão no Roque
  • Guia offline a gerar
  • Pacote Open Design a gerar

Baixar

Mudou em 17 out 2026

Roque

v1.0.0Em construção

roque.design.dev.br

Direção

Respiro e imagem: foto e vídeo grandes, tipografia no lugar de etiquetas e a troca como assinatura de movimento.

Guia

19 páginas, 6 a fazer

Fontes

Hanken Grotesk · JetBrains Mono

Temas

6 claro, névoa, pistache, escuro, verde e imagem

Tokens

218 --rq-*
114 símbolos no sprite

Falta

  • Funil e captação: escolha, quiz, Meta do dia, barra de lucro, contato
  • Produto e dados: app shell, filtros, calendário e atividade
  • Modelos: home, serviço, vaga, funil e painel
  • Fotos reais da equipe para retrato e avatar
  • Teste no Firefox e no Safari
  • Pacote Open Design a gerar de novo

Baixar

Mudou em 16 out 2026

Espanhola

v1.0.0Pronto

espanhola.design.dev.br

Direção

Campanha cartaz: blocos sólidos em Neve, Laranja e Grafite, cartaz enorme, faixas e selos.

Guia

10 seções numa página

Fontes

Istok Web

Temas

6 claro, névoa, pistache, escuro, verde e laranja

Tokens

70 --es-*
sem sprite

Falta

  • Conferência ao vivo a 1440 px
  • Bordas decorativas abaixo de 3:1 e cores forçadas parciais

Baixar

Mudou em 16 out 2026

Xeque

v1.0.0Pronto

xeque.design.dev.br

Direção

Engenharia tática e editorial suíço: grelhas expostas, coordenadas de tabuleiro, cantoneiras e tipografia dramática.

Guia

14 páginas

Fontes

Schibsted Grotesk · Xeque Mono

Temas

6 claro, névoa, pistache, escuro, verde e imagem

Tokens

294 --xq-*
122 símbolos no sprite

Falta

  • Conferir a regra laranja e verde depois da fase 5
  • Capa (.xq-cover-cell) a redesenhar quando voltar a ser usada

Baixar

Mudou em 16 out 2026

Francesa

v1.0Pronto

francesa.design.dev.br

Direção

Campanha e impacto no formato de cartaz: bloco chapado, tarja de 6 px e sombra seca, sem raio.

Guia

19 seções numa página

Fontes

Plus Jakarta Sans · DM Mono

Temas

6 claro, névoa, pistache, escuro, verde e laranja

Tokens

79 --fr-*
9 símbolos no sprite

Falta

  • Decidir a conversão no tema pistache
  • Contorno ao lado da conversão fica pistache no hover do escuro
  • Sombra do bloco sai grafite em todos os temas
  • Pacote Open Design a gerar de novo

Baixar

Mudou em 16 out 2026

O que os cinco têm em comum

A paleta da marca

Os cinco declaram os mesmos valores --cl-* e montam os próprios tokens em cima deles.

  • Neve --cl-snow #F7F8F2
  • Névoa Verde --cl-mist #E5ECDD
  • Pistache Vivo --cl-pistachio #B9D88A
  • Verde Estratégia --cl-forest #284B3C
  • Grafite Verde --cl-ink #1D2621
  • Laranja Ação --cl-orange #F58A52

Laranja não toca verde

Decisão de 16 out 2026, aplicada nos cinco. Laranja sólido não fica sobre verde sólido nem encostado nele.

  • ConversãoNo claro, laranja com rótulo grafite
  • ConversãoNo verde, vira pistache com rótulo grafite
  • ConversãoNo pistache, vira grafite com rótulo neve

No escuro o laranja fica. O anel do botão laranja é grafite nos temas claros e neve nos escuros. Ao lado da conversão vai contorno ou suave. Gráficos, texto fino e ícone ficam de fora.

Temas. Claro, névoa, pistache, escuro e verde nos cinco; imagem no Roque e no Xeque; laranja na Espanhola e na Francesa. Todos trocam de tema pelo atributo data-tema.

Sem dependência. CSS e JS puros: nenhum dos cinco importa biblioteca. O JS é opcional nos cinco.