Pular para o conteúdo
xablauinitiative

Brand kit

Um chassi, várias marcas.

A Xablau Initiative endossa marcas independentes. O chassi é comum a todas: nomes de tokens, títulos em Outfit, escalas e o selo do rodapé. A cor-líder, a fonte do corpo e o tom de voz ficam com cada marca.

Arquitetura

Marca endossada: cada produto tem identidade própria e a Xablau aparece como selo.

O que é comum

  • Os nomes dos tokens (--x-fundo, --x-lider…), definidos em base.css
  • Outfit em todos os títulos
  • Espaçamento 4 · 8 · 16 · 24 · 32 · 48, raios 8 · 12 · 16, movimento 150 · 300 · 500 ms
  • Botões em pílula e contraste AA nos dois modos
  • Modo claro e escuro desde o primeiro dia
  • O selo "um projeto Xablau Initiative" no rodapé

O que cada marca escolhe

  • A cor-líder e a cor de apoio
  • A fonte do corpo: Inter, Space Grotesk ou Source Serif 4
  • Se nasce clara (família Terra) ou escura (família Neon)
  • Logotipo, imagens e tom de voz
  • O domínio: próprio ou subdomínio de xablauinitiative.com.br

Símbolo e assinatura

Um x entrelaçado: um traço passa por baixo do outro, como fios de projetos diferentes no mesmo tecido.

Sobre claro · Pesto
Sobre escuro · Pesto claro
Monocromático
xablauinitiative
Assinatura · Outfit 600 + 400

Arquivos: símbolo em cor (troca sozinho para o tom claro no modo escuro) e símbolo monocromático (herda a cor do texto). Área de respiro: metade da largura do símbolo em volta. Tamanho mínimo: 16 px.

Selo do rodapé

Vai no rodapé de todos os sites. Herda a cor do texto ao redor, então funciona em qualquer fundo sem ajuste.

© 2026 Cafesinn
© 2026 GroovGym
© 2026 ObiterJus
© 2026 Precedentes
<a href="https://xablauinitiative.com.br/" style="display:inline-flex;align-items:center;gap:.5em;font:500 13px/1 Outfit,system-ui,sans-serif;color:inherit;opacity:.85;text-decoration:none">
  <svg viewBox="0 0 64 64" width="18" height="18" aria-hidden="true"><mask id="x-selo-m"><rect width="64" height="64" fill="#fff"/><path d="M20 20 44 44M44 20 36.5 27.5M27.5 36.5 20 44" fill="none" stroke="#000" stroke-width="7" stroke-linecap="round"/></mask><rect width="64" height="64" rx="15" fill="currentColor" mask="url(#x-selo-m)"/></svg>
  <span>um projeto <b style="font-weight:600">Xablau Initiative</b></span>
</a>

Paleta-mãe

As cores do colors_e_fonts.txt, que Cafesinn e ObiterJus já usavam. Cada marca da família Terra reivindica uma como líder. Clique para copiar o hex.

    Família Neon

      Tokens de cor

      Os mesmos nomes em todas as marcas. Os valores abaixo são lidos ao vivo dos arquivos CSS, então esta tabela nunca fica desatualizada.

      TokenUsoClaroEscuro

      Tipografia

      Outfit amarra a família nos títulos. O corpo muda conforme o tipo de leitura de cada produto.

      OutfitTítulos · todas as marcas

      Ferramentas para café, treino e Direito

      InterCorpo · Xablau, Cafesinn, ObiterJus

      Publicações, prazos e processos num só lugar.

      FrauncesEditorial · Cafesinn

      De onde vêm os sabores do café?

      Space GroteskCorpo · GroovGym

      4 × 10 · 80 kg · descanso de 90 s

      Source Serif 4Corpo · Precedentes

      A prescrição atinge apenas as prestações vencidas antes do quinquênio.

      Escalas

      As mesmas do app GroovGym, que já eram praticamente as do Cafesinn.

      Espaçamento

      --x-esp-1
      --x-esp-2
      --x-esp-3
      --x-esp-4
      --x-esp-5
      --x-esp-6
      --x-esp-7
      --x-esp-8

      Raios

      8 · p
      12 · m
      16 · g
      pílula

      Movimento

      Passe o mouse sobre cada um.

      Temas por marca

      Cada tema é um arquivo que só troca valores. Abaixo, o mesmo componente em cada marca, no claro e no escuro.

      Como usar

      Dois arquivos e um atributo. Copie os arquivos para o site, ou aponte para os daqui.

      <html lang="pt-BR" data-marca="precedentes">
<head>
  <!-- reaplica a escolha de tema antes da primeira pintura -->
  <script>try{var t=localStorage.getItem('xablau.tema');if(t==='claro'||t==='escuro')document.documentElement.setAttribute('data-tema',t)}catch(e){}</script>
  <link rel="stylesheet" href="https://xablauinitiative.com.br/marca/tokens/base.css">
  <link rel="stylesheet" href="https://xablauinitiative.com.br/marca/tokens/tema-precedentes.css">
</head>

/* no CSS do site: nunca um hex solto, sempre o token */
.botao { background: var(--x-lider); color: var(--x-sobre-lider); }
a      { color: var(--x-lider-texto); }
      • Uma cor-líder por marcaA de apoio aparece em detalhes, nunca em dois botões lado a lado.
      • Nenhum hex fora dos tokensÉ o que faz o modo escuro funcionar sem retrabalho.
      • Texto nunca abaixo de --x-texto-3É o tom mais claro que ainda passa no contraste AA.
      • Selo em todo rodapéCom link para o hub; é ele que mostra que os projetos são da mesma casa.
      • GroovGym: limão e roxoAs cores do logotipo. O rosa #FF0055 do site sai na próxima revisão.
      • Imagem por modoLogotipo escuro em fundo escuro some: use as classes so-claro e so-escuro.