FASE 01 CONCLUÍDA

FASE 03 EM DESENVOLVIMENTO

Foundations Design Tokens Layout System Typography Color System

Motion System Component Library Analytics System Form System Visualization Governance Centro Executivo

WCS® — Color System

Wake Color System®

Name: Wake Hub
Address: BR
Price range: $$

Muito mais do que cores. Uma linguagem visual capaz de transmitir confiança, inovação e pertencimento.

Seção 02

Cada cor comunica.

No Ecossistema Wake Hub as cores possuem função estratégica. Elas organizam informações, guiam decisões, criam identidade, transmitem emoção, facilitam leitura e fortalecem reconhecimento.

Identidade

Cores que fortalecem o reconhecimento da marca.

Hierarquia

Organização visual que guia o olhar do usuário.

Emoção

Transmissão de sentidos e atmosfera.

Usabilidade

Facilitam navegação, leitura e ações.

Consistência

Padrão cromático em todo o ecossistema.

Seção 03

Paleta Principal

A identidade cromática principal do ecossistema.

Primary Purple

#7B2CF6

rgb(123, 44, 246)

hsl(262, 84%, 58%)

Cor principal da marca

Dark Purple

#5B21B6

rgb(91, 33, 182)

hsl(262, 69%, 42%)

Variação escura para profundidade

Purple Gradient

linear-gradient(135deg, #7B2CF6, #3B82F6)

rgb(—)

Destaques e CTAs premium

Purple Glow

rgba(123,44,246,0.25)

rgb(123, 44, 246)

hsl(262, 84%, 58%)

Brilho e efeitos de glow

Purple Glass

rgba(123,44,246,0.06)

rgb(123, 44, 246)

hsl(262, 84%, 58%)

Superfícies glassmorphism

Seção 04

Paleta Secundária

Cores complementares do ecossistema.

Blue

#3B82F6rgb(59, 130, 246)

Cyan

#22d3eergb(34, 211, 238)

Green

#22c55ergb(34, 197, 94)

Orange

#f59e0brgb(245, 158, 11)

Red

#ef4444rgb(239, 68, 68)

Yellow

#eab308rgb(234, 179, 8)

Pink

#ec4899rgb(236, 72, 153)

White

#f7f7f7rgb(247, 247, 247)

Black

#080808rgb(8, 8, 8)

Gray Scale

#fafafa

100

#f4f4f5

200

#e4e4e7

300

#d4d4d8

400

#a1a1aa

500

#71717a

600

#52525b

700

#3f3f46

800

#27272a

900

#18181b

950

#09090b

Seção 05

Escala Tonal

Escalas tonais de 50 a 950 para cada cor base.

Purple

#faf5ff

100

#f3e8ff

200

#e9d5ff

300

#d8b4fe

400

#c084fc

500

#a855f7

600

#9333ea

700

#7B2CF6

800

#6b21a8

900

#581c87

950

#3b0764

Blue

#eff6ff

100

#dbeafe

200

#bfdbfe

300

#93c5fd

400

#60a5fa

500

#3b82f6

600

#2563eb

700

#1d4ed8

800

#1e40af

900

#1e3a8a

950

#172554

Cyan

#ecfeff

100

#cffafe

200

#a5f3fc

300

#67e8f9

400

#22d3ee

500

#06b6d4

600

#0891b2

700

#0e7490

800

#155e75

900

#164e63

950

#083344

Green

#f0fdf4

100

#dcfce7

200

#bbf7d0

300

#86efac

400

#4ade80

500

#22c55e

600

#16a34a

700

#15803d

800

#166534

900

#14532d

950

#052e16

Seção 06

Semantic Colors

Estados semânticos e when to use.

Success#22c55e

Operações concluídas, confirmações

Erros ou atenção

Warning#f59e0b

Atenção, precaução

Sucesso ou erro crítico

Danger#ef4444

Erros, ações destrutivas

Sucesso ou informação neutra

Info#3B82F6

Informações, dicas

Ações críticas

Neutral#71717a

Estados neutros, default

Destaques importantes

Highlight#a855f7

Destaque visual, features

Estados de erro

Disabled#52525b

Elementos desabilitados

Elementos ativos

Loading#6366f1

Carregamento, processamento

Estados finais

Pending#eab308

Aguardando aprovação

Aprovado ou rejeitado

Approved#22c55e

Status aprovado

Rejeitado ou pendente

Rejected#ef4444

Status rejeitado

Aprovado

Archived#52525b

Arquivado, inativo

Ativo ou em destaque

Seção 07

Background System

Sistema de camadas de fundo.

Primary

#080808Fundo principal da aplicação

Secondary

#0D0D0DSuperfície alternativa

Elevated

#151515Cards e elementos elevados

Modal

#1A1A1ABackground de modais e dialogs

Dashboard

#0A0A0APainéis e dashboards

Hero

radial-gradient(...)Background com glow radial

Overlay

rgba(0,0,0,0.6)Overlay para modais

Transparent

transparentFundos transparentes

Seção 08

Glass System

Camadas de glassmorphism.

Glass Light

blur: 12pxopacity: 2%

Glass Medium

blur: 20pxopacity: 3%

Glass Premium

blur: 40pxopacity: 5%

Glass Frost

blur: 32pxopacity: 4%

Glass Ultra

blur: 50pxopacity: 4%

Seção 09

Glow System

Efeitos de brilho do ecossistema.

Glow Purple

Glow Blue

Glow Cyan

Glow Green

Glow Orange

Glow Red

Glow White

Glow Gradient

Seção 10

Estados da Interface

Estados visuais padronizados.

Hover

Press

Focus

Disabled

Success

Error

Warning

Selected

Seção 11

Contraste

Padrões WCAG de acessibilidade.

Texto em fundo

Aa Bb 123

15.5:1 · AAA

Aa Bb 123

1.8:1 · Fail

Texto em card

Aa Bb 123

9.2:1 · AAA

Aa Bb 123

2.1:1 · Fail

Botão

Aa Bb 123

4.8:1 · AA

Aa Bb 123

1.2:1 · Fail

Link

Aa Bb 123

5.1:1 · AA

Aa Bb 123

1.1:1 · Fail

Seção 12 · 13

Dark Theme & Light Theme

Arquitetura de temas do ecossistema.

Dark Theme

Ativo

Background

#080808

Surface

#0D0D0D

Cards

#151515

Buttons

#7B2CF6

Borders

rgba(255,255,255,0.06)

Typography

#f7f7f7

Glass

rgba(255,255,255,0.03)

Glow

rgba(123,44,246,0.25)

Charts

#7B2CF6

Tabelas

#0D0D0D

Light Theme

Disponível na versão futura

Background

#FFFFFF

Surface

#F8F8F8

Cards

#FFFFFF

Buttons

#7B2CF6

Borders

rgba(0,0,0,0.08)

Typography

#080808

Glass

rgba(0,0,0,0.02)

Glow

rgba(123,44,246,0.15)

Charts

#7B2CF6

Tabelas

#F8F8F8

Seção 14

Acessibilidade

Padrões de acessibilidade cromática.

Daltonismo

Cores não dependem apenas do matiz. Diferenciação por forma, ícone e contraste.

Contraste

Mínimo 4.5:1 para texto normal (AA) e 7:1 para AAA.

Leitura

Cores de texto garantem legibilidade em todos os fundos.

Modo Alto Contraste

Variação extrema para usuários com baixa visão.

Escalas

Cores escalam sem perda de significado em diferentes tamanhos.

WCAG

Conformidade com Web Content Accessibility Guidelines 2.1.

Seção 15

Exemplos

Aplicação do WCS nos produtos do ecossistema.

Landing Page

Hero

Dashboard

Painel

CRM

Sistema

Client Center

Portal

LEVE

Produto

NEXUS

Inteligência

Aplicativo

Mobile

Tabela

Dados

Cards

Gráficos

Charts

Botões

CTA

Hero

Section

Seção 16

Playground

Experimente as cores em tempo real.

Controles

Cor

Background

Typography

Border Radius: 16px

Preview

Wake Hub

Color System Preview

color: #7B2CF6background: #080808text: #f7f7f7glow: on

Casos de Uso

Aplicação Prática

Como as cores devem ser aplicadas em cada cenário do ecossistema.

Landing Pages

Correto

Hero com gradiente roxo/azul sobre fundo escuro. CTA em cor primária com glow.

Incorreto

Texto cinza claro sobre fundo cinza. CTA sem contraste. Cores aleatórias.

Justificativa

Gradiente cria identidade e contraste. Fundo escuro aumenta impacto.

Impacto na UX

Aumenta conversão e reconhecimento de marca.

Seção 17

Exportação

Como as cores fluem do design ao código.

Figma Variables

JSON

Style Dictionary

CSS Variables

Tailwind

React

Flutter

Next.js

Seção 18

Roadmap

Progresso do WDS — do fundamento à governança.

01.0AFundação

01.0BTokens

01.0CLayout System

01.0DTypography

01.0EColor System

01.0FMotion

01.0GComponentes

01.0HDashboards

01.0IForms

01.0JCharts

01.0KGovernança