A marca em uma página.

O símbolo é uma faixa diagonal — paralelogramo com ângulo de 30°, proporção 96×88 e espessura lateral de 33 unidades. É o único elemento gráfico da marca além do logo. Usa pra ancorar layouts, separar seções ou assinar materiais. Nunca rotaciona, nunca inverte, nunca preenche fundo inteiro.

.diagonal-band {
  clip-path: polygon(
    0%    0%,      /* topo esquerdo  */
    100%  62.5%,   /* topo direito   */
    100%  100%,    /* bottom direito */
    0%    37.5%    /* bottom esquerdo*/
  );
  /* regra: brand @ 50% sobre #121212 */
  background: rgba(0, 13, 255, 0.5);
}

A malha isométrica é uma grade de tiles axis-aligned. Cada célula W × cellH recebe as duas orientações do paralelogramo sobrepostas (↘ e ↗). Rows adjacentes se sobrepõem verticalmente pela espessura da banda — é o que faz as diagonais se conectarem de célula em célula, formando o lattice completo.

1. Define tile: W × H (ratio 96:88)
2. Célula mais baixa: cellH = H - 0.375·H
   (rows adjacentes se sobrepõem pela espessura)
3. Pra cada [col][row]: renderiza AS DUAS orientações sobrepostas

// posição:
x = col * W
y = row * cellH

// duas clip-paths no mesmo bounding box:
polygon(0% 0%,    100% 62.5%, 100% 100%,  0% 37.5%)   // ↘
polygon(0% 62.5%, 100% 0%,    100% 37.5%, 0% 100%)    // ↗

:root {
  --band-width: 96px;
  --band-height: calc(var(--band-width) * 88 / 96);
  --cell-height: calc(var(--band-height) * 0.625);
  --band-color: #000DFF;
  --band-opacity: 0.5;      /* brand rule */
  --bg-color: #121212;
}

.iso-bg {
  position: relative;
  background: var(--bg-color);
  overflow: hidden;
}

.tile {
  position: absolute;
  width: var(--band-width);
  height: var(--band-height);
  background: var(--band-color);
  opacity: var(--band-opacity);
}

.tile--down {
  clip-path: polygon(0% 0%, 100% 62.5%, 100% 100%, 0% 37.5%);
}

.tile--up {
  clip-path: polygon(0% 62.5%, 100% 0%, 100% 37.5%, 0% 100%);
}

No demo acima, o SVG gera os tiles server-side a partir das fórmulas. As duas camadas compartilham a mesma lista de posições — muda só a clip-path. Pra produção: JS gera as divs uma vez e redesenha no ResizeObserver, ou exporta como SVG <pattern> pra uso estático (OG images, PDFs, email).

Versão renderizada e exportada como SVG. Mesma grade, mesma lógica — mas congelada, sem JS, pronta pra OG images, PDFs, email ou onde quer que precise de um asset fixo.

Pensa o canvas como uma malha de tiles W×H alinhada aos eixos (nada de staircase). Em cada célula entra um paralelogramo, em uma de duas orientações: ↘ ou ↗. A variedade visual emerge da distribuição das orientações — aleatório, alternado, xadrez, zig-zag em faixas. Muda o padrão de escolha, muda a composição. O grid nunca se quebra — só troca de tile.

// duas variações do mesmo shape, no mesmo bounding box W×H
<clipPath id="tile-down">  <!-- ↘ -->
  <polygon points="0,0    1,0.625  1,1    0,0.375" />
</clipPath>
<clipPath id="tile-up">    <!-- ↗ -->
  <polygon points="0,0.625 1,0     1,0.375 0,1" />
</clipPath>

// a célula é mais baixa que o paralelogramo:
const overlapY = 0.375 * H       // = espessura da banda
const cellH    = H - overlapY    // rows adjacentes se sobrepõem
                                 //   por overlapY

// pra cada [col][row]:
const x = col * W
const y = row * cellH
const down = rng() < 0.5         // ↘ ou ↗

<rect x={x} y={y} width={W} height={H}
      clip-path={down ? 'url(#tile-down)' : 'url(#tile-up)'} />

Truchet-style: duas peças, uma célula, decisão binária — mas o espaço de composições é grande. 100% ↘ = faixas paralelas; alternando por coluna= zig-zag vertical; xadrez = losangos nos cantos; random = trama caótica. Pra compor shapes específicos (logo, silhueta, hero com recorte), troca a função que escolhe a orientação — e aí dá pra construir padrões direcionados.

O logo é a base. Use sobre fundo escuro (preferido) ou sobre fundo claro. Sempre respeitando a clearspace — mínimo uma altura do logo em volta. Nunca distorça, nunca aplique cor chapada, nunca rotacione.

Primária · fundo escuro

Alternativa · fundo claro

Blue Solid (#000DFF) é a cor da marca — e é sempre aplicada a 50% de opacidade sobre #121212. É o que preenche símbolo, grade iso, gradientes — e o fill dos botões em repouso. Nunca chapada. Blue Hi (#4A5BFF) entra no hover do botão (o "activate") e como cor de ação em links, nav ativo, badges, eyebrows. Cyan só em gradient-tail com Blue Solid e glow ambiente. O resto é monocromático.

Inter 300-800, carregada via next/font pra performance. Headings sempre 700-800 com letter-spacing negativo. Body sempre 400 com line-height 1.7.

A voz da Axis é a mesma em copy do site, posts de LinkedIn, email pro lead e mensagem no WhatsApp. Mudar de registro quebra a marca.

Botões, badges e inputs são os três blocos mais usados. Bordas arredondadas (8-12px), gradiente nos botões primários, glow cyan sutil em hover.

A gente constrói software. O sistema abaixo mostra a paleta aplicada — brand, neutros e semânticas — e depois os exemplos reais de UI: shell, tabela, formulário, estados. Referência pra manter consistência entre produtos.

Logo PNG em alta resolução, favicon, background. Pra casos específicos (SVG editável, versão em preto puro, aplicação em material impresso) fala com a gente no WhatsApp que a gente manda direto.