Identidade Visual WES

Logotipos

Abaixo estão as variações oficiais da marca. Utilize a opção que oferecer o melhor contraste com o fundo da sua aplicação.

Largura (px)

Formato quadrado. A altura será igual à largura.

Largura (px)

Formato quadrado. A altura será igual à largura.

Largura

Altura

Formato retangular. As dimensões são ajustadas proporcionalmente.

Largura

Altura

Formato retangular. As dimensões são ajustadas proporcionalmente.

Largura (px)

Formato quadrado. A altura será igual à largura.

Largura (px)

Formato quadrado. A altura será igual à largura.

Largura

Altura

Formato retangular. As dimensões são ajustadas proporcionalmente.

Largura

Altura

Formato retangular. As dimensões são ajustadas proporcionalmente.

Template Slide

Baixe o template oficial em PowerPoint (PPTX) ou para importar no Google Slides.

Arquivos: Template slide WES (Claro e Escuro)

Template Claro

Base branca com elementos em azul para apresentacoes em ambientes claros.

Baixar Template Claro (PPTX)

Template Escuro

Base escura com contraste alto para apresentacoes em tela e auditorios.

Baixar Template Escuro (PPTX)

Template Papel Timbrado

Baixe o template oficial do papel da empresa nos formatos Pages, Word e PDF.

Arquivo: A4 - WES

Biblioteca de icones

Utilize a biblioteca Lucide para os icones do projeto.

lucide.dev

Paleta Original WES

Use esta paleta para manter a compatibilidade visual com as interfaces atuais do WES.

Gradiente Principal

linear-gradient(90deg, #38BCFF 0%, #20A4FE 25%, #1991FA 50%, #0B82F9 75%, #016FF4 100%)

Brand Gradient

CSS linear-gradient(90deg, #38BCFF 0%, #20A4FE 25%, #1991FA 50%, #0B82F9 75%, #016FF4 100%)

Paleta Cromatica

1. Cores para Fundo Claro (#FFFFFF)

Para fundos claros, priorize azuis mais escuros e saturados para manter contraste e leitura confortaveis.

2. Cores para Fundo Escuro (#000000)

Para fundos escuros, use variacoes mais claras e vibrantes da paleta para que os elementos de interface fiquem legiveis.

Tipografia WES Hub 360

Escala tipografica do Hub 360 organizada em prancha de referencia com Inter.

Font Family: Inter

Variable: Display Large

Size/Line Height: 56px/88px

Letter Spacing: -1% ou -0.01em

Font Weights:

Regular (400) Medium (500) Semi-Bold (600) Bold (700)

Font Family: Inter

Variable: Display Medium

Size/Line Height: 48px/72px

Letter Spacing: -1% ou -0.01em

Font Weights:

Regular (400) Medium (500) Semi-Bold (600) Bold (700)

Font Family: Inter

Variable: Headline Large

Size/Line Height: 32px/56px

Letter Spacing: -1% ou -0.01em

Font Weights:

Regular (400) Medium (500) Semi-Bold (600) Bold (700)

Font Family: Inter

Variable: Body

Size/Line Height: 16px/24px

Letter Spacing: Normal

Font Weights:

Regular (400) Medium (500) Semi-Bold (600) Bold (700)

Font Family: Inter

Variable: Label

Size/Line Height: 14px/16px

Letter Spacing: Normal

Font Weights:

Regular (400) Medium (500) Semi-Bold (600) Bold (700)

Paleta WES Hub 360

Use esta paleta nas novas interfaces do Hub 360.

Gradientes

Brand Gradient

CSS linear-gradient(90deg, #38bcff 0%, #20a4fe 35%, #1991fa 65%, #016ff4 100%)

Page Background

CSS radial-gradient(circle at 15% 15%, #eaf6ff, transparent 50%), ...

Tokens Principais

Light Blue

HEX #38BCFF

RGB rgb(56, 188, 255)

HSL hsl(200, 100%, 61%)

CMYK cmyk(78%, 26%, 0%, 0%)

Sky Blue

HEX #20A4FE

RGB rgb(32, 164, 254)

HSL hsl(204, 99%, 56%)

CMYK cmyk(87%, 35%, 0%, 0%)

Brand Blue

HEX #1991FA

RGB rgb(25, 145, 250)

HSL hsl(206, 96%, 54%)

CMYK cmyk(90%, 42%, 0%, 2%)

Active Blue

HEX #0B82F9

RGB rgb(11, 130, 249)

HSL hsl(211, 95%, 51%)

CMYK cmyk(96%, 48%, 0%, 2%)

Deep Blue

HEX #016FF4

RGB rgb(1, 111, 244)

HSL hsl(209, 99%, 48%)

CMYK cmyk(100%, 55%, 0%, 4%)

Midnight

HEX #001035

RGB rgb(0, 16, 53)

HSL hsl(222, 100%, 10%)

CMYK cmyk(100%, 70%, 0%, 79%)

Background

HEX #F4F6F9

RGB rgb(244, 246, 249)

HSL hsl(216, 20%, 97%)

CMYK cmyk(2%, 1%, 0%, 2%)

Text

HEX #0C0D0E

RGB rgb(12, 13, 14)

HSL hsl(210, 8%, 5%)

CMYK cmyk(14%, 7%, 0%, 95%)

Muted

HEX #6B7280

RGB rgb(107, 114, 128)

HSL hsl(220, 9%, 46%)

CMYK cmyk(16%, 11%, 0%, 50%)

Panel

HEX #FFFFFF

RGB rgb(255, 255, 255)

HSL hsl(0, 0%, 100%)

CMYK cmyk(0%, 0%, 0%, 0%)

Extras

White

HEX #FFFFFF

RGB rgb(255, 255, 255)

HSL hsl(0, 0%, 100%)

CMYK cmyk(0%, 0%, 0%, 0%)

Nav Hover

HEX #E3EFFF

RGB rgb(227, 239, 255)

HSL hsl(215, 100%, 95%)

CMYK cmyk(11%, 6%, 0%, 0%)

Button Dark Hover

HEX #102860

RGB rgb(16, 40, 96)

HSL hsl(223, 71%, 22%)

CMYK cmyk(83%, 58%, 0%, 62%)

Focus Outline

HEX #38BCFF

RGBA rgba(56, 188, 255, 0.45)

HSL hsl(200, 100%, 61%)

CMYK cmyk(78%, 26%, 0%, 0%)

Shadows

Shadow

CSS 0 8px 24px rgba(0, 0, 0, 0.06)

Componentes WES Hub 360

Componentes visuais com codigo em HTML, React e TypeScript.

Button

Variantes primary, outline e danger.

HTML

<button class="btn primary">Primary</button>
<button class="btn outline">Outline</button>
<button class="btn primary with-icon"><i class="icon"></i>Enviar pacote</button>
<button class="btn danger">Danger</button>

React

<button className="btn primary">Primary</button>
<button className="btn outline">Outline</button>
<button className="btn primary with-icon"><Icon />Enviar pacote</button>
<button className="btn danger">Danger</button>

TypeScript

type ButtonVariant = "primary" | "outline" | "danger";

type ButtonProps = {
  variant?: ButtonVariant;
  label: string;
  disabled?: boolean;
};

const Button: React.FC<ButtonProps> = ({ variant = "primary", label, disabled }) => (
  <button className={`btn ${variant}`} disabled={disabled}>{label}</button>
);

const IconButton: React.FC = () => (
  <button className="btn primary with-icon">
    <Icon />Enviar pacote
  </button>
);

Icon Button

Botao circular para acoes rapidas.

HTML

<button class="icon-btn" data-tooltip="Notificacoes">🔔</button>

React

<button className="icon-btn" data-tooltip="Notificacoes">🔔</button>

TypeScript

type IconButtonProps = {
  label: string;
  children: React.ReactNode;
};

const IconButton: React.FC<IconButtonProps> = ({ label, children }) => (
  <button className="icon-btn" data-tooltip={label}>{children}</button>
);

Badge

Indicador numerico para notificacoes.

3 12

HTML

<span class="badge">3</span>

React

<span className="badge">3</span>

TypeScript

type BadgeProps = { value: number };

const Badge: React.FC<BadgeProps> = ({ value }) => (
  <span className="badge">{value}</span>
);

Search Field

Campo de busca com icone.

HTML

<div class="search-field">
  <input type="text" placeholder="Buscar agendamento" />
</div>

React

<div className="search-field">
  <input type="text" placeholder="Buscar agendamento" />
</div>

TypeScript

const SearchField: React.FC = () => (
  <div className="search-field">
    <input type="text" placeholder="Buscar agendamento" />
  </div>
);

Form Field

Campo com label e input.

HTML

<label class="form-field">
  <span>Email</span>
  <input type="email" placeholder="voce@exemplo.com" />
</label>

React

<label className="form-field">
  <span>Email</span>
  <input type="email" placeholder="voce@exemplo.com" />
</label>

TypeScript

const FormField: React.FC = () => (
  <label className="form-field">
    <span>Email</span>
    <input type="email" placeholder="voce@exemplo.com" />
  </label>
);

Stat Card

Card de indicadores para dashboards.

124

Ativos

HTML

<div class="stat-card">
  <div class="stat-icon">...</div>
  <div class="stat-body">
    <div class="stat-value">124</div>
    <div class="stat-label">Ativos</div>
  </div>
</div>

React

<div className="stat-card">
  <div className="stat-icon">...</div>
  <div className="stat-body">
    <div className="stat-value">124</div>
    <div className="stat-label">Ativos</div>
  </div>
</div>

TypeScript

type StatCardProps = { value: number; label: string };

const StatCard: React.FC<StatCardProps> = ({ value, label }) => (
  <div className="stat-card">
    <div className="stat-icon">...</div>
    <div className="stat-body">
      <div className="stat-value">{value}</div>
      <div className="stat-label">{label}</div>
    </div>
  </div>
);

Tabs de Navegacao

Tabs horizontais com destaque azul na aba ativa.

HTML

<nav class="hub-tabs">
  <button class="hub-tab active">Visao geral</button>
  <button class="hub-tab">Assinatura</button>
  <button class="hub-tab">Faturamento</button>
  <button class="hub-tab">Chaves de API</button>
  <button class="hub-tab">Ambientes</button>
</nav>

React

<nav className="hub-tabs">
  <button className="hub-tab active">Visao geral</button>
  <button className="hub-tab">Assinatura</button>
  <button className="hub-tab">Faturamento</button>
  <button className="hub-tab">Chaves de API</button>
  <button className="hub-tab">Ambientes</button>
</nav>

TypeScript

type HubTab = { label: string; active?: boolean };

const HubTabs: React.FC<{ tabs: HubTab[] }> = ({ tabs }) => (
  <nav className="hub-tabs">
    {tabs.map((tab) => (
      <button
        key={tab.label}
        className={`hub-tab${tab.active ? " active" : ""}`}
        type="button"
      >
        {tab.label}
      </button>
    ))}
  </nav>
);

Tabela (Genérica)

Tabela com linhas arredondadas e ações à direita.

Item Alpha ITM-1024 Ativo Descrição do item com texto curto.

Item Beta ITM-2077 Pausado Descrição com informações resumidas.

HTML

<div class="hub-table">
  <div class="hub-row header">...</div>
  <div class="hub-row">...</div>
</div>

React

<div className="hub-table">
  <div className="hub-row header">...</div>
  <div className="hub-row">...</div>
</div>

TypeScript

type Row = { name: string; id: string; internal: string; desc: string };

const Table: React.FC<{ rows: Row[] }> = ({ rows }) => (
  <div className="hub-table">
    <div className="hub-row header">...</div>
    {rows.map((row) => (
      <div className="hub-row" key={row.id}>...</div>
    ))}
  </div>
);

Paginação

Navegação com seta e página ativa sublinhada.

…

HTML

<div class="hub-pagination">
  <button class="page-arrow">‹</button>
  <button class="page-btn active">1</button>
  <button class="page-btn">2</button>
  <span>…</span>
  <button class="page-arrow">›</button>
</div>

React

<div className="hub-pagination">
  <button className="page-arrow">‹</button>
  <button className="page-btn active">1</button>
  <button className="page-btn">2</button>
  <span>…</span>
  <button className="page-arrow">›</button>
</div>

TypeScript

const Pagination: React.FC = () => (
  <div className="hub-pagination">
    <button className="page-arrow">‹</button>
    <button className="page-btn active">1</button>
    <button className="page-btn">2</button>
    <span>…</span>
    <button className="page-arrow">›</button>
  </div>
);

Modal

Modal de criacao com campos.

HTML

<button class="btn primary">Criar agente</button>
<div class="modal-demo">
  <div class="modal-backdrop"></div>
  <div class="modal-card">...</div>
</div>

React

<button className="btn primary">Criar agente</button>
<div className="modal-demo">
  <div className="modal-backdrop" />
  <div className="modal-card">...</div>
</div>

TypeScript

const AgentModal: React.FC = () => (
  <div className="modal-demo">
    <div className="modal-backdrop" />
    <div className="modal-card">...</div>
  </div>
);

Toggle / Switch

Controle de habilitar/desabilitar.

HTML

<div class="modal-toggle">
  <span>Permitir conhecimento interno</span>
  <label class="switch">
    <input type="checkbox" />
    <span class="switch-track"></span>
  </label>
  <span>Nao</span>
</div>

React

<div className="modal-toggle">
  <span>Permitir conhecimento interno</span>
  <label className="switch">
    <input type="checkbox" />
    <span className="switch-track" />
  </label>
  <span>Nao</span>
</div>

TypeScript

const Toggle: React.FC = () => (
  <div className="modal-toggle">
    <span>Permitir conhecimento interno</span>
    <label className="switch">
      <input type="checkbox" />
      <span className="switch-track" />
    </label>
    <span>Nao</span>
  </div>
);

Filtro com Menu

Botão de filtros com menu de opções.

HTML

<button class="filter-btn">Filtros</button>
<div class="filter-menu">...</div>

React

<button className="filter-btn">Filtros</button>
<div className="filter-menu">...</div>

TypeScript

const FilterMenu: React.FC = () => (
  <div>
    <button className="filter-btn">Filtros</button>
    <div className="filter-menu">...</div>
  </div>
);

Ícones WES Hub 360

activity #016FF4

bell #016FF4

cloud #016FF4

message-square #016FF4

plus #016FF4

refresh-ccw #016FF4

search #016FF4

sliders-horizontal #016FF4

trash-2 #016FF4

Tipografia WES Landing Page

Escala tipografica aplicada na landing page institucional, com a prancha de referencia em Roboto.

Font Family: Roboto

Variable: Hero (H1)

Size/Line Height: 48px/56px

Letter Spacing: -1% ou -0.01em

Font Weights:

Regular (400) Medium (500) Semi-Bold (600) Bold (700)

Font Family: Roboto

Variable: Section (H2)

Size/Line Height: 32px/40px

Letter Spacing: -1% ou -0.01em

Font Weights:

Regular (400) Medium (500) Semi-Bold (600) Bold (700)

Font Family: Roboto

Variable: Body

Size/Line Height: 16px/24px

Letter Spacing: Normal

Font Weights:

Regular (400) Medium (500) Semi-Bold (600) Bold (700)

Font Family: Roboto

Variable: Label

Size/Line Height: 14px/16px

Letter Spacing: Normal

Font Weights:

Regular (400) Medium (500) Semi-Bold (600) Bold (700)

Paleta WES Landing Page

Identidade visual institucional do site.

Gradiente principal

Brand Gradient

CSS linear-gradient(90deg, #38BCFF 0%, #20A4FE 25%, #1991FA 50%, #0B82F9 75%, #016FF4 100%)

Cores principais

Light Blue

HEX #38BCFF

RGB rgb(56, 188, 255)

HSL hsl(200, 100%, 61%)

CMYK cmyk(78%, 26%, 0%, 0%)

Brand Blue

HEX #1991FA

RGB rgb(25, 145, 250)

HSL hsl(206, 96%, 54%)

CMYK cmyk(90%, 42%, 0%, 2%)

Midnight

HEX #001035

RGB rgb(0, 16, 53)

HSL hsl(222, 100%, 10%)

CMYK cmyk(100%, 70%, 0%, 79%)

Background

HEX #F5F8FB

RGB rgb(245, 248, 251)

HSL hsl(210, 43%, 97%)

CMYK cmyk(2%, 1%, 0%, 2%)

Componentes WES Landing Page

Componentes do site institucional com preview e snippets.

Cards Grid

Cards com imagem e tag.

Setor Público

Automação de processos e atendimento no setor público.

Energia

Monitoramento inteligente e previsões para redes elétricas.

Saúde

Leitura de exames e suporte à decisão clínica com IA.

Documentos

Processamento e validação de documentos em escala.

Personalizado

Soluções sob medida para o desafio específico do cliente.

HTML

<div class="cards-grid">
  <article class="card">
    <span class="tag">Setor Público</span>
    <img src="mock_publico.jpg" alt="Setor Público" />
    <div class="card-hover">Automação de processos e atendimento no setor público.</div>
  </article>
  <article class="card">
    <span class="tag">Energia</span>
    <img src="mock_energia.jpg" alt="Energia" />
  </article>
  <article class="card">
    <span class="tag">Saúde</span>
    <img src="mock_saude.jpg" alt="Saúde" />
  </article>
  <article class="card">
    <span class="tag">Documentos</span>
    <img src="mock_documentos.jpg" alt="Documentos" />
  </article>
  <article class="card wide">
    <span class="tag">Personalizado</span>
    <img src="mock_personalizado.jpg" alt="Personalizado" />
  </article>
</div>

React

<div className="cards-grid">
  <article className="card">
    <span className="tag">Setor Público</span>
    <img src="mock_publico.jpg" alt="Setor Público" />
    <div className="card-hover">Automação de processos e atendimento no setor público.</div>
  </article>
  <article className="card">
    <span className="tag">Energia</span>
    <img src="mock_energia.jpg" alt="Energia" />
  </article>
  <article className="card">
    <span className="tag">Saúde</span>
    <img src="mock_saude.jpg" alt="Saúde" />
  </article>
  <article className="card">
    <span className="tag">Documentos</span>
    <img src="mock_documentos.jpg" alt="Documentos" />
  </article>
  <article className="card wide">
    <span className="tag">Personalizado</span>
    <img src="mock_personalizado.jpg" alt="Personalizado" />
  </article>
</div>

TypeScript

const CardsGrid: React.FC = () => (
  <div className="cards-grid">
    <article className="card">
      <span className="tag">Setor Público</span>
      <img src="mock_publico.jpg" alt="Setor Público" />
      <div className="card-hover">Automação de processos e atendimento no setor público.</div>
    </article>
    <article className="card">
      <span className="tag">Energia</span>
      <img src="mock_energia.jpg" alt="Energia" />
    </article>
    <article className="card">
      <span className="tag">Saúde</span>
      <img src="mock_saude.jpg" alt="Saúde" />
    </article>
    <article className="card">
      <span className="tag">Documentos</span>
      <img src="mock_documentos.jpg" alt="Documentos" />
    </article>
    <article className="card wide">
      <span className="tag">Personalizado</span>
      <img src="mock_personalizado.jpg" alt="Personalizado" />
    </article>
  </div>
);

Solutions Carousel

Cards horizontais com CTA.

CCO Inteligente

Solução para monitoramento e gestão em tempo real com predições.

Cockpit de insights inteligente que gera sugestões e automações para reduzir falhas e acelerar decisões.

Gestão SEI

Plataforma de inteligência aplicada ao SEI com painel simples.

Centraliza processos, prazos e intimações, com resumos claros e alertas proativos.

Errata Inteligente

Aplique correções em massa com busca inteligente.

Automatize o processamento de correções e elimine a busca manual linha por linha.

PrevClima

Antecipação de falhas na rede elétrica com IA.

Cruze previsões e históricos para mapear riscos e reduzir tempo de resposta.

Leitura de Exames

Validação automática de exames.

Analise requisições, confronte inventário e destaque divergências com rapidez.

Faturamento Logístico

Validação automática de rotas e quilometragem.

Audite trajetos e assegure pagamentos precisos com dados de GPS.

Cidadão 360

Gestão unificada do relacionamento com o município.

Centralize dados e crie campanhas automatizadas com visão única.

HTML

<div class="solutions-carousel">
  <div class="solutions-track">
    <article class="solution-card">...</article>
    <article class="solution-card">...</article>
  </div>
</div>

React

<div className="solutions-carousel">
  <div className="solutions-track">
    <article className="solution-card">...</article>
    <article className="solution-card">...</article>
  </div>
</div>

TypeScript

const SolutionsCarousel: React.FC = () => (
  <div className="solutions-carousel">
    <div className="solutions-track">
      <article className="solution-card">...</article>
      <article className="solution-card">...</article>
    </div>
  </div>
);

Mobile Menu

Menu mobile com links e CTA.

HTML

<div class="mobile-header">
  <button class="menu-toggle">☰</button>
</div>
<div class="mobile-menu">
  <nav class="mobile-nav">...</nav>
  <input type="text" placeholder="Buscar..." />
  <a class="btn primary">Fale conosco</a>
</div>

React

<div className="mobile-header">
  <button className="menu-toggle">☰</button>
</div>
<div className="mobile-menu">
  <nav className="mobile-nav">...</nav>
  <input type="text" placeholder="Buscar..." />
  <a className="btn primary">Fale conosco</a>
</div>

TypeScript

const MobileMenu: React.FC = () => (
  <>
    <div className="mobile-header">
      <button className="menu-toggle">☰</button>
    </div>
    <div className="mobile-menu">
      <nav className="mobile-nav">...</nav>
      <input type="text" placeholder="Buscar..." />
      <a className="btn primary">Fale conosco</a>
    </div>
  </>
);

Carousel Controls

Setas e pontos de navegação.

HTML

<div class="carousel-controls">
  <button class="icon-button ghost"><i data-lucide="arrow-left"></i></button>
  <div class="dots">...</div>
  <button class="icon-button ghost"><i data-lucide="arrow-right"></i></button>
</div>

React

<div className="carousel-controls">
  <button className="icon-button ghost"><i data-lucide="arrow-left"></i></button>
  <div className="dots">...</div>
  <button className="icon-button ghost"><i data-lucide="arrow-right"></i></button>
</div>

TypeScript

const CarouselControls: React.FC = () => (
  <div className="carousel-controls">
    <button className="icon-button ghost"><i data-lucide="arrow-left"></i></button>
    <div className="dots">...</div>
    <button className="icon-button ghost"><i data-lucide="arrow-right"></i></button>
  </div>
);

FAB (Back to Top)

Botao flutuante de retorno ao topo.

HTML

<button class="back-to-top">↑</button>

React

<button className="back-to-top">↑</button>

TypeScript

const BackToTop: React.FC = () => <button className="back-to-top">↑</button>;

Ícones WES Landing Page

menu #38BCFF

x #38BCFF

arrow-left #38BCFF

arrow-right #38BCFF

arrow-up #38BCFF

monitor #38BCFF

files #38BCFF

file-text #38BCFF

cloud-lightning #38BCFF

stethoscope #38BCFF

bus #38BCFF

users #38BCFF