e.works cloud

Identidade visual

Marca e design system

Tudo o que você precisa para produzir apresentações, vídeos e carrosséis com a mesma identidade do eworks.cloud. Consumível também por outros sistemas via feed JSON.

Feed público (JSON)

https://eworks.cloud/api/public/brand

Endpoint estável, sem autenticação, com cores, tipografia, tokens, logos e regras. Use-o para gerar templates automaticamente. v1.1.0

01

Cores

Paleta oficial. Use os hex exatos — nada de aproximações.

e.works Dark

#292929

rgb(41, 41, 41)

oklch(0.2795 0 0)

Cor principal da marca. Fundos escuros, títulos e botões primários.

Dark Alt

#3D3D3D

rgb(61, 61, 61)

oklch(0.3717 0 0)

Superfícies e cards sobre fundo escuro.

e.works Lime

#C2D201

rgb(194, 210, 1)

oklch(0.8215 0.1898 118.4)

Acento de energia: o ponto do 'e.works', destaques, CTAs e dados positivos.

e.works Blue

#0084C1

rgb(0, 132, 193)

oklch(0.5806 0.1245 236.4)

Acento de tecnologia: links, gráficos, traços de circuito e foco.

Light Gray

#E6E6E6

rgb(230, 230, 230)

oklch(0.9247 0 0)

Divisores, bordas e superfícies claras.

White

#FFFFFF

rgb(255, 255, 255)

oklch(1 0 0)

Fundo das faixas claras e texto sobre fundo escuro.

02

Tipografia

Murecho em todos os materiais.

Murecho

Google Fonts · https://fonts.google.com/specimen/Murecho

fallback: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif

Pesos: 300, 400, 500, 600, 700

  • Murecho em todos os materiais: site, apresentações, vídeos e carrosséis.
  • Corpo de texto em peso 300 (Light); títulos em 600 (SemiBold).
  • Títulos com tracking negativo (-0.02em) e nunca em caixa alta.
  • Eyebrows/labels em caixa alta com tracking 0.32em.

Escala

  • displayclamp(2.5rem, 5vw, 3.75rem) · 600 · -0.02em
  • h12.5rem · 600 · -0.02em
  • h22rem · 600 · -0.02em
  • h31.25rem · 600 · -0.01em
  • body1rem · 300 · 0
  • eyebrow0.6875rem · 500 · 0.32em

03

Logos

Combinações aprovadas de marca e fundo.

e.works CLOUD (white)

e.works CLOUD (white)

Lockup principal do produto. Use sobre fundo escuro (#292929).

PNG
e.works (white)

e.works (white)

Wordmark curto para rodapés e assinaturas em fundo escuro.

PNG
e.works Labs (white)

e.works Labs (white)

Marca corporativa em fundo escuro.

PNG
e.works Labs (dark)

e.works Labs (dark)

Marca corporativa em fundo claro (#FFFFFF).

PNG

Regras de uso

  • Área de respiro mínima igual à altura da letra 'e' do wordmark em todos os lados.
  • Altura mínima: 24 px em tela, 12 mm em impressão.
  • Nunca recolorir, distorcer, aplicar sombra, contorno ou gradiente ao logo.
  • Não aplicar a versão escura sobre fundo escuro nem a branca sobre fundo claro.
  • Sobre fotos, use a versão branca com um scrim escuro (opacidade ≥ 45%).

04

Tokens de layout e movimento

Radius & spacing

radius: 0.25rem

4px · 8px · 12px · 16px · 24px · 32px · 48px · 64px · 96px

Cantos discretos — 4px. Nada arredondado demais.

Layout

max-width 1152px, padding 24px

band padding: 80px mobile / 112px desktop

Backgrounds

radial blooms of blue 12% and lime 14% over white, with a 64px foreground grid at 6% opacity

radial-gradient(60% 55% at 50% 50%, background 62%, transparent 100%) behind foreground cards

Motion

easing: cubic-bezier(0.22, 1, 0.36, 1)

micro: 150ms · ui: 250ms · ambient: 4000–5000ms loops

Movimento ambiente lento e contínuo (neurônios, pulsos em traços). Interações rápidas e discretas. Respeitar prefers-reduced-motion.

Formatos para redes e vídeo

  • LinkedIn carousel — 1080 × 1350 (4:5)
  • LinkedIn single post — 1200 × 627 (1.91:1)
  • LinkedIn cover — 1584 × 396 (4:1)
  • Instagram feed — 1080 × 1080 (1:1)
  • Story / Reels — 1080 × 1920 (9:16)
  • Video / deck — 1920 × 1080 (16:9)

Receita de slide

  1. Capa: faixa escura (#292929), padrão de circuito 45% de opacidade, logo e.works CLOUD no topo, título em 600, eyebrow em lime.
  2. Conteúdo: faixa clara (#FFFFFF) com o canvas de blooms, título à esquerda, no máximo 3 blocos por slide.
  3. Dados: número grande em 600, unidade em muted, barra de acento em lime ou blue.
  4. Encerramento: faixa escura, wordmark e.works, CTA em lime com texto #292929.

05

Tom de voz

  • Direto e técnico, sem jargão de marketing vazio.
  • Confiança sem exagero: prometemos o que a plataforma entrega.
  • Português do Brasil, frases curtas, voz ativa.
  • Nomes de apps sempre em minúsculas com ponto: e.chat, e.dash, e.audit.

Escreva assim

  • ✓ IA nativa
  • ✓ e.works cloud
  • ✓ eworks.cloud
  • ✓ e.works Labs

Evite

  • ✕ E-Works
  • ✕ eWorks
  • ✕ AI-native (em PT)
  • ✕ E-Chat

Direção de imagem

  • Motivo central: cérebro eletrônico / nuvem neural — grafo de nós e conexões.
  • Traços de circuito em cinza claro (#E6E6E6) no claro e #3D3D3D no escuro.
  • Alternância rigorosa de faixas claras e escuras ao longo da página ou do deck.
  • Fotografia: ambientes corporativos sóbrios, sem pessoas sorrindo para a câmera.
  • Sem ilustrações genéricas de IA (robôs humanoides, cérebros roxos, neon).

06

Padrão de página de aplicativo

Toda página de aplicativo segue a mesma sequência previsível de faixas (bands). Isso mantém a consistência visual entre e.chat, e.dash, e.knowledge e facilita a produção de novos apps como o e.gateway.

  1. 01

    Hero (faixa escura)

    Eyebrow "APPLICATIONS", nome do app (H1), subtítulo de uma linha, parágrafo de posicionamento e label "WHO IT IS FOR" com o público.

  2. 02

    Capacidades-chave (faixa clara)

    De 3 a 5 blocos de capacidade, cada um com título em destaque e descrição curta.

  3. 03

    Faixa diferencial (faixa escura)

    Seção específica do app (ex.: Canais de trabalho, Modelo de segurança, Fontes de dados). Grid de 3 colunas com ícone + título + descrição.

  4. 04

    Casos de uso (faixa clara / surface)

    De 4 a 6 cards de caso de uso com título e descrição.

  5. 05

    Ideal para (faixa clara)

    Declaração concisa de público e contexto de adoção.

  6. 06

    Funciona com (faixa clara)

    Lista horizontal com os apps integrados, cada um linkando para /apps/<slug>.

  7. 07

    Navegação entre apps (faixa escura)

    Grid "Outros aplicativos da plataforma" com os 8 apps, cada card linkando para /apps/<slug>.

Tokens de layout

  • max-width: 1152px, padding 24px
  • band padding: 80px mobile / 112px desktop
  • alternate dark (#292929) and light (#FFFFFF) bands
  • section headings: H2, text-3xl md:text-4xl, weight 600, tracking -0.02em
  • card headings: H3, text-base, text-foreground
  • eyebrow labels: uppercase, 0.32em tracking, font-medium

Faça

  • Mantenha a sequência de faixas sempre na mesma ordem.
  • Encerre toda página com o grid de navegação entre apps.
  • Alterne rigorosamente faixas claras e escuras.

Não faça

  • Não pule o bloco "WHO IT IS FOR" no hero.
  • Não use mais de 6 casos de uso.
  • Não invente novos estilos de card fora dos tokens acima.