FASE 01 CONCLUÍDA

FASE 03 EM DESENVOLVIMENTO

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

WLS® — Layout System

Wake Layout System®

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

A arquitetura espacial que conecta todos os produtos do Ecossistema Wake Hub.

Container

Grid

Componentes

Interface

Produto

Ecossistema

Seção 02

Layout é experiência.

Um excelente produto não depende apenas de componentes. Ele depende da forma como esses componentes ocupam o espaço. O WLS garante organização, clareza, ritmo visual e consistência em todas as interfaces.

Clareza

Organização visual que comunica hierarquia sem ruído.

Hierarquia

Estrutura que guia o olhar do usuário naturalmente.

Respiração

Espaços que evitam saturação e reduzem carga cognitiva.

Escalabilidade

Layouts que crescem sem perder consistência.

Seção 03

Containers

Containers oficiais do Wake Layout System.

Container XSMobile / conteúdo mínimo

480pxmargin: 16px

480px

Container SMMobile largo / conteúdo focado

640pxmargin: 20px

640px

Container MDTablet / conteúdo médio

768pxmargin: 24px

768px

Container LGNotebook / conteúdo padrão

1024pxmargin: 32px

1024px

Container XLDesktop / conteúdo amplo

1280pxmargin: 32px

1280px

Container XXLDesktop large / dashboards

1440pxmargin: 48px

1440px

Container FluidFullscreen / painéis / mapas

100%margin: 24px

100%

Seção 04

Grid System

Sistemas de grid por contexto de uso.

4colunas

Mobile / conteúdo simples

8colunas

Tablet / conteúdo médio

12colunas

Landing Pages / Desktop

16colunas

Dashboards / CRM / Painéis

24colunas

DataGrid / Sistemas complexos

Seção 05

Breakpoints

Breakpoints oficiais do WLS.

Mobile S

320—374px

Mobile M

375—424px

Mobile L

425—767px

Tablet

768—1023px

Notebook

1024—1439px

Desktop

1440—1919px

Wide

1920—2559px

Ultra Wide

2560—3840px

Seção 06

Safe Areas

Áreas de respiro e segurança para conteúdo.

Área de conteúdo seguro

↤ Safe outer↤ Safe inner↤ Safe read

Conteúdo24px

Espaço mínimo ao redor de todo conteúdo principal.

CTA16px

Área segura para botões e calls-to-action.

Leitura40px

Respiro para blocos de texto longo.

Seção 07

Sistema de Espaçamento

Escala oficial de espaçamento e aplicações práticas.

Escala

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

80px

96px

120px

160px

Aplicações

Cards

Padding interno padrão

16px

Tabelas

Padding de células

12px

Formulários

Espaço entre campos

24px

Hero

Padding vertical do hero

80px

Footer

Padding vertical do footer

48px

Dashboard

Gap entre widgets

24px

Seção 08

Layouts Responsivos

Reorganização automática por dispositivo.

TV

24 cols1920px

Layout expandido / 10ft UI

Desktop

12 cols1440px

Layout padrão / dashboards

Notebook

12 cols1280px

Layout compacto

Tablet

8 cols768px

Layout adaptado / 2 colunas

Mobile

4 cols375px

Layout empilhado / 1 coluna

Seção 09

Landing Page System

Estrutura oficial de landing pages do ecossistema.

Hero

Problema

Solução

Produtos

Resultados

Comunidade

CTA

Footer

01Hero

02Problema

03Solução

04Produtos

05Resultados

06Comunidade

07CTA

08Footer

Seção 10

Dashboard System

Estrutura oficial de dashboards e painéis.

Topbar

Seção 11

App System

Layouts para aplicativos mobile e tabelas.

App Mobile

Tabela Simples

DataGrid

Seção 13

Form System

Estruturas de formulário e alinhamentos.

1 ColunaLogin / onboarding / formulários curtos

2 ColunasCheckout / dados básicos / contato

3 ColunasCadastro completo / configurações

WizardMulti-step com progresso linear

StepperEtapas com validação entre passos

Seção 14

Navegação

Padrões de navegação do ecossistema.

Sidebar

Navegação lateral fixa para painéis e dashboards.

Mega Menu

Menu expansível com categorias e subníveis.

Top Navigation

Barra superior horizontal para sites.

Bottom Navigation

Navegação inferior para aplicativos mobile.

Breadcrumb

Trilha de navegação hierárquica contextual.

Floating Navigation

Navegação flutuante e contextual.

Context Menu

Menu de ações contextuais por item.

Seção 15

Exemplos Reais

Aplicação do WLS nos produtos do ecossistema.

Wake Hub

Site Institucional

Container XL + 12 cols

Client Center

Portal

Sidebar + 16 cols

W HUB CRM

Sistema

Sidebar + 24 cols DataGrid

NEXUS

Inteligência

Fluid + 16 cols

LEVE

Produto

Container LG + 12 cols

W CITY

Produto

Container MD + 8 cols

Landing

Marketing

Container XL + 12 cols

Dashboard

Painel

Fluid + 16 cols

Aplicativo

Mobile

4 cols + Bottom Nav

Seção 16

Roadmap

Progresso do WDS — do fundamento à governança.

01.0AFundação

01.0BTokens

01.0CLayout System

01.0DTipografia

01.0ECores

01.0FMotion

01.0GComponentes

01.0HDashboards

01.0IForms

01.0JCharts

01.0KGovernança