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.

Arquivo: Template slide WES.pptx

Baixar PPTX

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 baseada no Material Design do dashboard.

Font Family

"Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif

--md-display-large 57px

Display Large

Weight: 700 Line height: 64px Track: 0

--md-display-medium 45px

Display Medium

Weight: 600 Line height: 52px Track: 0

--md-headline-large 32px

Headline Large

Weight: 600 Line height: 40px Track: 0

--md-title-medium 16px

Title Medium

Weight: 600 Line height: 24px Track: 0

--md-body-large 16px

Body Large

Weight: 400 Line height: 24px Track: 0

--md-body-medium 14px

Body Medium

Weight: 400 Line height: 20px Track: 0

--md-label-large 14px

Label Large

Weight: 700 Line height: 20px Track: 0

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%)

Search Highlight

HEX #FFF2A8

RGB rgb(255, 242, 168)

HSL hsl(51, 100%, 83%)

CMYK cmyk(0%, 5%, 34%, 0%)

Search Highlight Active

HEX #FFE16A

RGB rgb(255, 225, 106)

HSL hsl(47, 100%, 71%)

CMYK cmyk(0%, 12%, 58%, 0%)

Button Dark Hover

HEX #102860

RGB rgb(16, 40, 96)

HSL hsl(223, 71%, 22%)

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

Focus Outline

RGBA rgba(56, 188, 255, 0.45)

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

Baseada em Roboto Flex para comunicação institucional.

Font Family

"Roboto Flex", "Roboto", sans-serif

Hero H1 48px / 1.2

O futuro da sua operacao

Section H2 32px / 1.3

Conheca nossas solucoes

Body 16px / 1.6

Texto institucional com clareza e leitura confortavel.

Label 14px / 1.2

Botao / CTA

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

Brand Blue

HEX #1991FA

Midnight

HEX #001035

Background

HEX #F5F8FB

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