Brand Guide · v2.0

DataStrike.

Sistema de marca

Identidade visual, variações de logo, tokens e aplicações para a plataforma de inteligência de dados.

Marca primária

Versão completa em gradiente sobre fundo escuro. Use sempre que possível: hero de site, decks, capas.

Lockup vertical · gradiente · fundo escuro datastrike-primary.svg

Lockups

Três lockups oficiais. Use o que melhor se acomoda ao espaço — nunca recrie a relação ícone/texto.

Vertical lockup-vertical.svg

Horizontal lockup-horizontal.svg

Wordmark · sem ícone wordmark.svg

Símbolo · favicon · avatar symbol.svg

Sólido & Wireframe

Duas execuções do símbolo. Use o wireframe em destaques (hero, capa). Use o sólido em tamanhos pequenos (≤ 32px).

Wireframe · destaque ≥ 64px

Sólido · padrão ≥ 32px

Sólido mono · UI ≥ 16px

Fundo claro

Em fundos claros, escurecemos a wordmark para o tom violet-dark e mantemos o gradiente do raio.

Vertical · claro lockup-vertical-light.svg

Horizontal · claro lockup-horizontal-light.svg

Monocromático

Para impressão 1-cor, gravação, embossing e contextos onde o gradiente não é viável.

Preto · vert.100K

Preto · horiz.100K

Branco · vert.0K

Branco · horiz.0K

Paleta

Violet conduz a marca, orange é o acento de energia, gold é o detalhe de precisão. Os neutros sustentam dashboards e produto.

Primárias

01 / Brand

Strike Violet

#9D00FF → #7700CC

02 / Energy

Strike Orange

#FF5C00 → #CC4400

03 / Precision

Strike Gold

#D3AF37 → #B89020

04 / Signature

Bolt Gradient

violet → orange → gold

Surface

Void

#0A0A0F

Bg-2

Surface

#12121A

Panel

#22222E

Ink-3

Mute

#6B6B7B

⚠ Regra crítica de gradiente

Nunca misture violet diretamente com orange sem uma transição intermediária — cria rosa. O gradiente oficial vai violet → orange → gold. Gradiente invertido (gold → orange → violet) também é permitido.

Tipografia

Barlow Condensed 800 nos títulos, Inter para texto corrido. Uma única família por hierarquia.

Display Strike fast Barlow Condensed 800 · 96/95

H1 Data intelligence, sharper Barlow Condensed 800 · 56/0.95

H2 Section heading Barlow Condensed 800 · 36

Eyebrow Real-time analytics Barlow Condensed 800 · 14 · tracking 0.18em

Body A B2B data intelligence platform that turns marketing signals into decisions — sharper, faster, in real time. Inter 400 · 16/1.55

Mono curl -X POST api.datastrike.io/v1/query SF Mono / ui-monospace · 14

Área de proteção & tamanhos

A área de proteção mínima é a metade da altura do raio (X/2). Não invada com elementos.

Clear space min: X/2

64px

48px

32px

24px

16px

Tamanhos mínimos poly ≥ 64px · solid ≥ 32px · mono ≥ 16px

Don'ts

Nunca faça. Estas aplicações destroem a marca.

Cor fora da paleta

Espelhar / flipar

Versão gradiente em fundo branco puro

Fonte errada (não usar Arial/outra)

Baixa opacidade / desbotado

Weight errado (não usar 400)

Tokens CSS

Variáveis prontas para colar em qualquer projeto. Fonte única de verdade para cores e tipografia.

/* DataStrike Design Tokens v2.0 */
:root {
  /* Brand */
  --ds-violet:        #9D00FF;
  --ds-violet-light:  #BB66FF;
  --ds-violet-dark:   #7700CC;
  --ds-orange:        #FF5C00;
  --ds-orange-deep:   #CC4400;
  --ds-gold:          #D3AF37;
  --ds-gold-deep:     #B89020;

  /* Surface */
  --ds-bg:            #0A0A0F;
  --ds-bg-2:          #12121A;
  --ds-panel:         #1A1A24;
  --ds-panel-2:       #22222E;
  --ds-line:          #2A2A38;

  /* Ink */
  --ds-ink:           #ECECF1;
  --ds-ink-2:         #9999A8;
  --ds-ink-3:         #6B6B7B;

  /* Gradients */
  --ds-gradient-bolt: linear-gradient(135deg, #BB66FF 0%, #9D00FF 35%, #FF5C00 75%, #D3AF37 100%);
  --ds-gradient-bolt-soft: linear-gradient(135deg,
    rgba(187,102,255,0.35) 0%, rgba(157,0,255,0.28) 50%,
    rgba(255,92,0,0.30) 75%, rgba(211,175,55,0.40) 100%);

  /* Typography */
  --ds-font-display: 'Barlow Condensed', sans-serif;
  --ds-font-body:    'Inter', sans-serif;
  --ds-font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;
}