WePlanner Design System

Princípios de Design

Os valores que guiam cada decisão de interface no WePlanner

✦

Clareza em primeiro lugar

Interfaces limpas que reduzem a carga cognitiva. Cada elemento visual tem propósito claro e hierarquia bem definida.

⬡

Consistente e escalável

O design baseado em tokens garante consistência visual em todo o produto, facilitando a manutenção e evolução do sistema.

◈

Consciente da função

A interface se adapta às funções de Cliente, Gestor e Colaborador, mostrando informações e ações relevantes para cada perfil.

→

Orientado para a ação

Cada tela direciona o usuário para uma ação clara e objetiva. Botões e CTAs são posicionados estrategicamente para guiar o fluxo.

◎

Acessível

Compatível com WCAG 2.1 AA, com navegação completa por teclado, contraste adequado e suporte a leitores de tela.

⊡

Responsivo

Design otimizado para desktop que se adapta perfeitamente a tablets e dispositivos móveis sem perder funcionalidade.

Design baseado em tokens

Todos os valores visuais são definidos como tokens reutilizáveis (cores, espaçamentos, tipografia, sombras). Isso garante consistência e facilita a manutenção do design system em toda a aplicação.

Color Palette

Brand and semantic colors

Primary

#FF5623

Yellow

#FEBA31

Green

#019364

Red

#F32C2C

Purple

#987DFE

Pink

#FFBEE9

Neutrals

50

100

200

300

400

500

600

700

800

900

Semantic Backgrounds

Info Background

Informational messages

Warning Background

Warning messages

Success Background

Success messages

Error Background

Error messages

Typography

SF Pro Display & SF Pro Rounded - Type scale and weights

SF Pro Display

The quick brown fox h1 · 32px / Bold

The quick brown fox h2 · 24px / Semibold

The quick brown fox h3 · 20px / Semibold

The quick brown fox h4 · 16px / Medium

The quick brown fox Body L · 18px / Regular

The quick brown fox Body · 16px / Regular

The quick brown fox Body S · 14px / Regular

The quick brown fox Caption · 12px / Medium

SF Pro Rounded

The quick brown fox h1 · 32px / Bold

The quick brown fox h2 · 24px / Semibold

The quick brown fox h3 · 20px / Semibold

The quick brown fox h4 · 16px / Medium

The quick brown fox Body L · 18px / Regular

The quick brown fox Body · 16px / Regular

The quick brown fox Body S · 14px / Regular

The quick brown fox Caption · 12px / Medium

Badges & Tags

Status indicators, priorities, roles, and chips

Status Badges

A Fazer Em Progresso Revisão Concluído Bloqueado Arquivado Novo

Priority Badges

Baixa Média Alta Urgente Alta

Role Badges

Cliente Gestor Colaborador

Category Tags

Design Frontend Backend UI/UX Database Migration Testing API

Info Chips

15 Mar 2026 Weekly Zoom Sala de reuniões 3B Participants: 8 14:00 - 15:30

Cards

KPI, task, meeting, and compact card variants

KPI Cards

Active Tasks

24

+12% from last week

Completed

156

+8% from last month

Team Members

12

+2 new this month

Credits Used

450

-15% from last month

Simple Task Cards

Alta Em Progresso

15 Mar 2026

Redesign da Landing Page

Atualizar hero section, cards de features e formulário de contato

#Design #Frontend

AL

65%

Média Revisão

18 Mar 2026

API de Autenticação

Implementar OAuth2 e refresh tokens para o módulo de login

#Backend #API

MR

80%

Baixa A Fazer

22 Mar 2026

Documentação do Design System

Criar guia de componentes e tokens para a equipe de desenvolvimento

#UI/UX

CS

10%

Detailed Task Cards

Urgente Em Progresso

Migração do Banco de Dados

Migrar dados de PostgreSQL para MongoDB com validação de integridade

Subtasks 3/560%

Entrega: 20 Mar

#Database #Migration #Backend

AL

MR

3 7

Média Concluído

Sistema de Notificações

Implementar push notifications e email alerts com templates customizáveis

Subtasks 5/5100%

Entrega: 10 Mar

#Frontend #Backend

CS

JN

FS

5 12

Meeting Cards

Video Call Hoje, 14:00

Sprint Planning

Definição de tarefas e prioridades para Sprint 24

AL

MR

CS

In Person Amanhã, 10:00

Design Review

Revisão dos protótipos da nova interface do dashboard

JN

FS

Sala 3B

Video Call Sex, 16:00

Retrospective

Análise do Sprint 23 e identificação de melhorias

AL

MR

CS

+3

Compact Cards

Atualizar componentes do sidebar

Em Progresso · Alta

AL

Testes unitários do módulo de pagamento

Concluído · Média

MR

Fix bug no modal de criação de projeto

Bloqueado · Urgente

CS

Escrever docs da API REST

A Fazer · Baixa

JN

Quadro Kanban

Gestão de tarefas com colunas arrastar e soltar

EM PROGRESSO

2

Urgente

Migração do Banco de Dados

Migrar dados de PostgreSQL para MongoDB

#Database #Migration

AL

60%

Alta

Redesign da Landing Page

Atualizar hero section e formulário

#Design

MR

65%

CONCLUÍDO

2

Concluído

Sistema de Notificações

Push notifications e email alerts

#Frontend #Backend

CS

100%

Concluído

Testes Unitários

Cobertura completa do módulo de pagamento

#Testing

FS

100%

A FAZER

2

Média

Documentação do DS

Guia de componentes para a equipe

#UI/UX

JN

0%

Baixa

API de Relatórios

Endpoints para exportação em PDF e CSV

#API

AL

0%

Iconografia

Ícones Lucide utilizados no projeto - biblioteca completa

Navegação

Home

Search

Settings

ChevronRight

ChevronDown

ExternalLink

ArrowRight

X

Ações

Plus

Edit3

Trash2

Copy

Share2

Download

Upload

Send

Filter

Sliders

Status & Feedback

CheckSquare

CheckCheck

CheckCircle2

AlertTriangle

Loader

Eye

Flag

Star

Heart

Bookmark

Comunicação

Bell

MessageCircle

MessageSquare

Mail

AtSign

Video

Conteúdo & Arquivos

FileText

FileImage

ImagePlus

Paperclip

Folder

Link2

Tag

Pessoas & Segurança

Users

UserCircle

UserPlus

Shield

Briefcase

Code

Lock

Unlock

Globe

Dashboard & Data

Dashboard

Target

Activity

Zap

Sparkles

Calendar

Clock

RefreshCw

MapPin

Hash

MoreH

Tema

Sun

Moon

Notificações

Componentes de notificação e alertas do sistema

Notificações de Ação

AL

Ana Lima comentou na tarefa Redesign da Landing Page

Há 5 minutos

MR

Marcos Reis concluiu a tarefa API de Autenticação

Há 20 minutos

CS

Carla Santos adicionou você na tarefa Migração do DB

Há 1 hora

JN

Julia Nunes marcou como bloqueada Deploy Pipeline

Há 2 horas

Painel de Notificações

Notificações

3 novas

AL

Ana Lima comentou na Landing Page

5 min

MR

Marcos Reis concluiu API Auth

20 min

CS

Carla Santos te adicionou em Migração DB

1 hora

Components

Reusable UI components and patterns

User Profile Card

FS

Felipe Stephan

Product Designer

Gestor

AL

Ana Lima

Frontend Developer

Colaborador

MR

Marcos Reis

Backend Developer

Cliente

Avatar Stack

Small (3 max)

AL

MR

CS

+2

Medium (4 max)

FS

AL

MR

CS

+1

Large (5 max)

FS

AL

MR

CS

JN

Progress Bars

25%25/100

50%50/100

75%75/100

100%100/100

Buttons

Upload Files

Drop file here or browse

PDF, DOC, PNG up to 10MB

Project_Brief.pdf

2.4 MB

Requirements.docx

1.1 MB

AI Prompt Builder

Gerar relatório Sprint 24 Team Alpha Last 30 days

Spacing & Radius

Consistent spacing scale and border radius tokens

Spacing Scale

4px

spacing-1

8px

spacing-2

12px

spacing-3

16px

spacing-4

24px

spacing-6

32px

spacing-8

48px

spacing-12

64px

spacing-16

Border Radius

2px

radius-sm

6px

radius-md

8px

radius-default

12px

radius-lg

16px

radius-xl

9999px

radius-full