Design System TailwindCSS SaaS

DorckDS

Sistema de design para interfaces SaaS de gerenciamento de projetos. Inspirado nos princípios do Notion: minimalismo funcional, hierarquia clara e baixo ruído visual.

Stack: TailwindCSS · Inter · JetBrains Mono · SVG Icons · Vanilla JS para demos

Filosofia de Interface

O DorckDS é guiado por um princípio central: a interface deve ser invisível até ser necessária. Cada pixel deve ganhar seu lugar. Chrome, decorações e ruído visual são eliminados para deixar o conteúdo do usuário em destaque.

Minimalismo Funcional

Cada elemento tem uma função clara. Sem ornamentação. Sem efeitos desnecessários.

Hierarquia Tipográfica

Peso, tamanho e cor trabalham juntos para guiar o olhar sem precisar de decorações.

Modularidade

Blocos compostos por primitivos. Qualquer layout emerge da mesma linguagem base.

Feedback Imediato

Estados de hover, focus e loading são rápidos (100–150ms). Nunca deixe o usuário em dúvida.

Alta Escaneabilidade

O usuário processa 90% das informações com os olhos. Layout e tipografia devem guiar esse scan.

Densidade Controlada

Informação densa mas respirável. Espaçamento consistente cria ritmo visual mesmo em listas longas.

Regra de ouro: Se um elemento não carrega informação nem facilita uma ação, ele não existe. Bordas, sombras e cores de fundo são permitidas apenas quando criam separação visual necessária.

Grid & Layout

Estrutura Geral

sidebar
224px

topbar — 52px

content area
max-w-5xl

detail
panel
320px

/* Layout principal — app shell */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Sidebar */
w-56          /* 224px — sidebar padrão */
w-64          /* 256px — sidebar expandida */
w-14          /* 56px  — sidebar colapsada (só ícones) */

/* Topbar */
h-13          /* 52px — altura fixa */

/* Content area */
max-w-5xl mx-auto px-8 py-6   /* página padrão */
max-w-3xl mx-auto px-6 py-8   /* editor de documento */
w-full px-4                     /* kanban / tabela (full width) */

/* Detail panel */
w-80          /* 320px — painel lateral direito */

Breakpoints

Breakpoint	Valor	Comportamento
sm	640px	Sidebar oculta, modal full-screen
md	768px	Sidebar colapsada, topbar compacto
lg	1024px	Layout completo, sidebar padrão
xl	1280px	Painel lateral opcional visível
2xl	1536px	Sidebar expandida, max-w aplicado

Sistema de Colunas

/* Grid para dashboards e cards */
grid grid-cols-1 gap-4
grid grid-cols-2 gap-4
grid grid-cols-3 gap-4
grid grid-cols-4 gap-4     /* max para cards de projeto */

/* Grid para formulários */
grid grid-cols-2 gap-x-6 gap-y-4

/* Grid para kanban */
flex gap-3 overflow-x-auto   /* colunas scrolláveis horizontalmente */

Escala de Espaçamento

Base: 4px. Toda unidade é múltiplo de 4. Use a escala Tailwind sem valores customizados.

0.5 / 2px

Separadores, dot indicators

1 / 4px

Gap entre ícone e texto, badge padding

2 / 8px

Padding interno de chips, gap entre metadados

3 / 12px

Padding de botões (px), gap entre items de lista

4 / 16px

Padding de cards, gap entre colunas

5 / 20px

Padding lateral de sidebar, gap entre seções compactas

6 / 24px

Padding de modais, separação entre grupos

8 / 32px

Padding de páginas, margin de seções

12 / 48px

Espaço entre blocos de conteúdo

16 / 64px

Margem de seções grandes, padding de empty states

/* Padrões de espaçamento por contexto */

/* Row de lista/tabela */
px-4 py-2.5          /* linha compacta */
px-4 py-3            /* linha padrão */
px-4 py-4            /* linha espaçosa */

/* Card */
p-4                  /* card compacto */
p-5                  /* card padrão */

/* Modal */
p-6                  /* padding interno */

/* Página de conteúdo */
px-8 py-6            /* padrão */
px-6 py-8            /* documento/editor */

/* Gaps */
gap-1   /* itens muito próximos (ícone + label) */
gap-2   /* itens relacionados */
gap-3   /* grupo de botões */
gap-4   /* cards em grid */
gap-6   /* seções */

Tipografia

Fontes: Inter (UI principal) · JetBrains Mono (código, metadados, IDs)

text-4xl / 36px Título de Página

text-3xl / 30px Heading 1

text-2xl / 24px Heading 2

text-xl / 20px Heading 3

text-lg / 18px Subtítulo

text-base / 16px Texto de interface padrão, labels, botões

text-sm / 14px Metadados, captions, timestamps

text-xs / 12px LABELS DE SEÇÃO · BADGES

Pesos e Uso

Peso	Tailwind	Uso
Light 300	font-light	Textos longos, placeholders grandes
Regular 400	font-normal	Corpo de texto, parágrafos
Medium 500	font-medium	Labels, metadados, botões
Semibold 600	font-semibold	Títulos, nomes de projetos, headings

Hierarquia de Cores de Texto

text-neutral-900   /* Títulos principais, nomes */
text-neutral-800   /* Subtítulos, texto importante */
text-neutral-700   /* Texto de interface padrão */
text-neutral-600   /* Descrições, texto secundário */
text-neutral-500   /* Metadados, captions */
text-neutral-400   /* Placeholders, texto desabilitado */

/* Texto de código/mono */
font-mono text-sm text-neutral-700

Paleta de Cores

Neutros

100

150

200

300

400

500

600

700

800

900

Brand (Azul)

100

200

300

400

500 ★

600

700

Estados

Success

#22C55E

Warning

#EAB308

Danger

#EF4444

Info

#3B82F6

Tokens de Interface

/* Backgrounds */
bg-neutral-0      /* branco puro — cards, modais */
bg-neutral-50     /* página principal, sidebar */
bg-neutral-100    /* hover sutil, inputs desabilitados */
bg-neutral-150    /* hover de itens de lista */
bg-neutral-200    /* active state, selected */

/* Bordas */
border-neutral-200  /* border padrão de cards */
border-neutral-150  /* border sutil */
border-neutral-300  /* border de inputs */

/* Hover States */
hover:bg-neutral-100   /* hover de botão ghost */
hover:bg-neutral-150   /* hover de linha de lista */
hover:bg-neutral-200   /* hover de item de sidebar */

/* Focus Ring */
focus:ring-2 focus:ring-brand-400 focus:ring-offset-0

/* Disabled */
opacity-40 cursor-not-allowed pointer-events-none

Sistema de Bordas

rounded-none

rounded-sm

rounded

rounded-md

rounded-lg

rounded-xl

rounded-full

/* Uso por componente */
rounded-sm    /* badges, chips, tags — 3px */
rounded      /* botões, inputs — 5px */
rounded-md    /* cards compactos — 7px */
rounded-lg    /* cards de projeto, kanban columns — 10px */
rounded-xl    /* modais, dropdowns grandes — 14px */
rounded-full  /* avatares, pill badges, switches */

/* Divisores */
border-t border-neutral-200    /* divisor horizontal */
border-l border-neutral-200    /* divisor vertical (sidebar) */
divide-y divide-neutral-100   /* entre linhas de lista */

/* Sombras */
shadow-xs   /* elevação mínima */
shadow-sm   /* cards, inputs focused */
shadow-md   /* dropdowns, popovers */
shadow-lg   /* modais, tooltips */

Componentes Base

Botões

/* Botão Primary */
px-3 py-1.5 rounded bg-neutral-900 text-white text-sm font-medium
hover:bg-neutral-800 active:bg-neutral-900 transition-colors duration-100

/* Botão Secondary */
px-3 py-1.5 rounded bg-white text-neutral-700 text-sm font-medium
border border-neutral-300 hover:bg-neutral-50 hover:border-neutral-400
active:bg-neutral-100 transition-colors duration-100

/* Botão Ghost */
px-3 py-1.5 rounded text-neutral-600 text-sm font-medium
hover:bg-neutral-100 hover:text-neutral-800 transition-colors duration-100

/* Botão Danger */
px-3 py-1.5 rounded bg-danger-500 text-white text-sm font-medium
hover:bg-danger-700 transition-colors duration-100

/* Icon Button */
w-8 h-8 rounded flex items-center justify-center text-neutral-500
hover:bg-neutral-100 hover:text-neutral-800 transition-colors duration-100

Inputs

Nome do Projeto

Status

Descrição

/* Input base */
w-full px-3 py-2 rounded border border-neutral-300
text-sm text-neutral-800 bg-white placeholder-neutral-400
focus:outline-none focus:ring-2 focus:ring-brand-400 focus:ring-offset-0
focus:border-brand-400 transition-all duration-100

/* Input com erro */
border-danger-500 focus:ring-danger-400

/* Input desabilitado */
bg-neutral-100 text-neutral-400 cursor-not-allowed opacity-60

/* Search input */
pl-9 bg-neutral-50 border-neutral-200

Seleção

Checkbox vazio

Checkbox marcado

Toggle switch

Radio selecionado

Badges & Tags

Default Em progresso ✓ Concluído ⚠ Bloqueado Urgente 12 alta prioridade

Sistema de Cores para Tags

12 cores disponíveis para labels, tags de projeto, categorias e etiquetas — seguindo o padrão Trello/Linear. Cada cor tem fundo suave, texto legível e dot indicator.

Paleta Completa — 12 cores

Design Backend Frontend Em revisão Concluído Integração Em progresso Planejamento Pesquisa Marketing Urgente Dados

Tag Picker — Interativo

Frontend Sprint 4

Exemplo em card

Redesenhar onboarding

Alta prioridade Frontend UX Research

Variante — só dot (para listas densas)

Frontend

UX Research

Urgente

Sprint 4

/* Tag chip — HTML */
<span class="tag-chip tag-blue">
  <span class="tag-dot"></span>
  Frontend
</span>

/* Variantes disponíveis */
tag-gray | tag-brown | tag-orange | tag-yellow | tag-green
tag-teal | tag-blue | tag-indigo | tag-purple | tag-pink | tag-red | tag-cyan

/* CSS base da classe */
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 6px; border-radius: 4px;
  font-size: 11px; font-weight: 500;
  border: 1px solid transparent;
}

Avatares

Tabs

underline

pill

icon-only

Tooltip

Passe o mouse no botão

Componentes de Interface SaaS

Sidebar de Navegação

Projetos

João Dias

← Sidebar de navegação

/* Sidebar shell */
w-56 h-screen sticky top-0 flex flex-col bg-neutral-50
border-r border-neutral-200 py-3 overflow-y-auto

/* Nav item */
flex items-center gap-2 px-2 py-1.5 rounded text-sm text-neutral-600
hover:bg-neutral-150 transition-colors duration-80

/* Nav item active */
bg-neutral-200 text-neutral-900 font-medium

/* Section label */
text-xs font-medium text-neutral-400 uppercase tracking-wider px-2 mb-1

Topbar

Projetos / Redesign App / Sprint 4

Tabela de Dados

Tarefa	Projeto	Responsável	Status	Prazo
Redesenhar onboarding	Redesign App	JD João Dias	Em progresso	15 Jan
Configurar CI/CD	API v2	MR Maria Rosa	✓ Concluído	10 Jan
Revisar proposta	Marketing Q4	TS Tiago Santos	Urgente	Venceu

Kanban Board

Backlog 3

Pesquisa com usuários

Wireframes mobile

Design

Em progresso 2

Redesenhar onboarding

Fluxo completo de boas-vindas

Alta

3/7

Concluído 5

Setup do projeto

✓ Done

Comentários

João Dias há 2h

Precisamos revisar o fluxo de onboarding. O step 3 está causando muita fricção nos testes. Sugiro simplificar para apenas 2 campos obrigatórios.

Maria Rosa há 1h

Concordo. Podemos mover nome da empresa pro perfil depois.

Editor de Documento

Projetos/Redesign App/Brief do Produto

Brief do Produto — Redesign App

Atualizado há 3 dias · por João Dias

💡

Este documento é a fonte de verdade para decisões de design do Q1 2025.

Objetivo

Redesenhar a experiência de onboarding para aumentar a taxa de ativação de 32% para 58% em 90 dias.

Métricas

•Taxa de ativação ≥ 58% em D7
•Tempo médio de setup < 4 minutos
•NPS do onboarding ≥ 45

Checklist

Pesquisa com 15 usuários

Wireframes de baixa fidelidade

Protótipo interativo no Figma

/* Editor de documento — container */
max-w-3xl mx-auto px-6 py-8

/* Título editável */
text-4xl font-semibold text-neutral-900 outline-none border-none
placeholder-neutral-300 leading-tight

/* Bloco callout */
flex gap-3 p-3 bg-brand-50 border-l-2 border-brand-400 rounded-r-lg

/* Bloco de código inline */
font-mono text-sm bg-neutral-100 px-1.5 py-0.5 rounded text-neutral-700

/* Heading estilos dentro do editor */
h1: text-3xl font-semibold text-neutral-900 mt-8 mb-2
h2: text-xl font-semibold text-neutral-800 mt-6 mb-2
h3: text-base font-semibold text-neutral-700 mt-4 mb-1.5

Estados de Interface

Nenhuma tarefa ainda

Crie sua primeira tarefa para começar.

Carregando tarefas...

Algo deu errado

Não foi possível carregar. Tente novamente.

Alterações salvas!

Todas as mudanças foram aplicadas.

Toast Notifications

Alterações salvas

Nova atualização disponível

Plano expira em 3 dias

Falha ao enviar arquivo

Skeleton Loading

/* Empty state */
flex flex-col items-center justify-center py-16 text-center

/* Skeleton */
bg-neutral-200 animate-pulse rounded
/* texto: h-3, h-4 | avatar: w-8 h-8 rounded-full */

/* Loading dots */
w-2 h-2 rounded-full bg-neutral-400 animate-bounce
/* usar animation-delay para escalonar */

/* Toast */
fixed bottom-4 left-1/2 -translate-x-1/2 z-50
inline-flex items-center gap-2.5 px-4 py-2.5
bg-neutral-900 text-white text-sm rounded-lg shadow-xl

Sistema de Ícones

Biblioteca: Font Awesome 7 Free. Ícones fa-solid para ações primárias, fa-regular para estados neutros e fa-light (Pro) para decorativos. Tamanho controlado via Tailwind text-sm / text-base / text-lg. Cor sempre via currentColor.

Tamanhos

xs / 12px

sm / 14px

base / 16px

lg / 18px

xl / 20px

2xl / 24px

Estilos — solid · regular

star

heart

bookmark

bell

check

Ícones de interface — por categoria

Navegação & Ações

plus

xmark

filter

sort

ellipsis

ellipsis-v

arrow-left

chevron-r

chevron-d

pen

trash

copy

link

upload

Projeto & Tarefas

check

list-check

kanban

calendar

clock

stopwatch

flag

tag

user

users

folder

file

inbox

layers

chart

gear

Estados & Feedback

success

warning

danger

info

lock

eye

eye-slash

rotate

Ícones em componentes

Tarefa concluída

Em andamento

/* Font Awesome 7 Free — CDN */
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/js/all.min.js" defer></script>

/* Uso básico */
<i class="fa-solid fa-plus"></i>      /* sólido — ações primárias */
<i class="fa-regular fa-star"></i>    /* regular — estados neutros */

/* Tamanho via Tailwind (text-* → font-size) */
text-xs   /* 12px — ícone inline em badge/botão */
text-sm   /* 14px — ícone em botão padrão */
text-base /* 16px — ícone de ação principal */
text-lg   /* 18px — ícone de destaque/nav */

/* Cor via currentColor (herda do pai) */
<button class="text-neutral-500 hover:text-neutral-800">
  <i class="fa-solid fa-gear"></i>
</button>

/* Ícone com texto */
<button class="flex items-center gap-2">
  <i class="fa-solid fa-plus text-xs"></i>
  Nova Tarefa
</button>

Interações & Microinterações

/* Durações */
duration-75    /* 75ms  — feedback imediato (botões, checks) */
duration-100   /* 100ms — hover states padrão */
duration-150   /* 150ms — transições de cor */
duration-200   /* 200ms — expansão/colapso de elementos */
duration-300   /* 300ms — modais, drawers, sidebars */

/* Easing */
ease-in-out    /* transições de estado */
cubic-bezier(0.4, 0, 0.2, 1)  /* smooth — default */
cubic-bezier(0.34, 1.56, 0.64, 1)  /* spring — bouncy (modais) */

/* Hover padrão */
transition-colors duration-100

/* Hover com elevação */
transition-all duration-100 hover:-translate-y-px hover:shadow-md

/* Focus ring */
focus-visible:ring-2 focus-visible:ring-brand-400 focus-visible:ring-offset-1
focus-visible:outline-none

/* Modal entrada */
animate-in fade-in zoom-in-95 duration-200
/* backdrop: animate-in fade-in duration-150 */

/* Sidebar collapse */
transition-all duration-300 ease-in-out
/* w-56 → w-14 */

/* Dropdown */
animate-in slide-in-from-top-1 fade-in duration-100

/* Item de lista */
transition-colors duration-80

/* Checkbox / switch */
transition-all duration-150 cubic-bezier(0.34, 1.56, 0.64, 1)

Regra: Nunca use transition-all em elementos que mudam de tamanho com frequência (pode causar jank). Use transition-colors para hover/focus e transition-transform para movimentos.

Regras de Consistência

1. Nunca use valores mágicos

Toda cor, espaçamento ou tamanho deve vir da escala do Tailwind config. Se precisar de um valor fora da escala, revise o design antes de criar um valor custom.

2. Hierarquia visual via peso, não cor

Diferencie importância com font-semibold vs font-normal e text-neutral-900 vs text-neutral-500. Cores de destaque (brand, success, danger) são para estados funcionais, não decoração.

3. Densidade consistente por contexto

Listas e tabelas usam py-2.5. Cards usam p-4. Modais usam p-6. Nunca misture densidades no mesmo contexto.

4. Bordas apenas quando necessário

Use border-neutral-200 apenas para separar elementos que precisam de contenção visual. Cards sobre fundo branco precisam de borda; cards sobre fundo neutro podem dispensar.

5. Ícones sempre com texto quando possível

Ícones sem label são aceitáveis apenas em toolbars e icon buttons conhecidos. Em formulários, listas e ações principais, sempre acompanhe com texto.

6. Estados de foco são obrigatórios

Nunca remova outline sem substituir por focus-visible:ring. Acessibilidade não é opcional.

7. Componentes compostos por primitivos

Um card de projeto é composto por Badge + Avatar + Heading + Meta. Nunca crie variantes que quebrem esses primitivos — estenda-os.

8. Responsive mobile-last

Esta é uma aplicação desktop-first. O design base é para ≥1024px. Mobile é uma versão simplificada, não o ponto de partida.

Exemplos de Layouts

Dashboard de Projetos

Projetos

Projetos ativos 12

Tarefas abertas 84

Concluídas hoje 7

Vencendo hoje 3

Recentes

📱

Ativo

Redesign App

Atualizado há 2h

12/34 tasks

🔌

Ativo

API v2

Atualizado há 1d

28/40 tasks

📣

Pausado

Marketing Q4

Atualizado há 3d

5/22 tasks

/* Dashboard layout */
flex h-screen overflow-hidden

/* Stats grid */
grid grid-cols-4 gap-3 mb-6

/* Stat card */
bg-white border border-neutral-200 rounded-lg p-3

/* Project card */
bg-white border border-neutral-200 rounded-lg p-4
hover:shadow-md hover:-translate-y-px transition-all duration-100 cursor-pointer

/* Progress bar */
h-1 bg-neutral-100 rounded-full overflow-hidden
/* inner: */ h-full bg-brand-400 rounded-full transition-all

Lista de Tarefas

Redesenhar tela de onboarding

👁 Detalhes

Em progresso

15 Jan

Setup CI/CD pipeline

✓ Feito

10 Jan

Revisar proposta de parceria

Urgente

Vencida

Nova tarefa...

/* Task list container */
divide-y divide-neutral-100

/* Task row */
flex items-center gap-3 px-4 py-3 group
hover:bg-neutral-50 transition-colors duration-80 cursor-pointer

/* Reveal on hover */
opacity-0 group-hover:opacity-100 transition-opacity duration-100

/* Completed task text */
text-neutral-400 line-through

Tabela com Pesquisa & Paginação

Exibir por página

Cliente	Email	Tags	Plano	Status	Desde

Exibindo 1–5 de 18

/* Toolbar da tabela */
flex items-center gap-3 px-4 py-3 bg-white border-b border-neutral-200

/* Coluna sortável */
flex items-center gap-1 cursor-pointer hover:text-neutral-800 select-none

/* Paginação footer */
flex items-center justify-between px-4 py-3 bg-white border-t border-neutral-200

/* Botão de página ativo */
w-7 h-7 rounded bg-neutral-900 text-white text-xs font-medium
/* inativo: */
w-7 h-7 rounded text-neutral-500 hover:bg-neutral-100 text-xs

/* Overlay */
fixed inset-0 bg-neutral-900/30 backdrop-blur-sm
flex items-center justify-center z-50

/* Modal container */
bg-white rounded-xl shadow-xl w-80

/* Animação de entrada */
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal { animation: modalIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Modal com header/body/footer */
/* Header */
flex items-center justify-between px-5 py-4 border-b border-neutral-200
/* Body */
p-5 space-y-4 overflow-y-auto max-h-[60vh]
/* Footer */
px-5 pb-4 pt-4 flex justify-end gap-2 border-t border-neutral-100

Cards — Cliente · Projeto · Tarefa · Documento

Acme Corp Ativo

SaaS · Tecnologia

contato@acme.com

(11) 98765-4321

Enterprise Recorrente Parceiro

Projetos

R$12k

MRR

98%

NPS

Sprint 4

Mobile

Redesign App

Redesenhar a experiência completa do app mobile, focando em onboarding e retenção.

Frontend UX Research Alta prioridade

42%

Prazo: 15 Fev

Redesenhar tela de onboarding

Redesign App → Sprint 4

Criar novo fluxo de boas-vindas com foco em ativação rápida (menos de 3 steps).

Alta prioridade Em progresso

15 Jan

Brief do Produto — Q1 2025

Redesign App · 3 páginas

Documento central de decisões de produto para o primeiro trimestre. Inclui métricas, objetivos e escopo.

João Dias

Editado há 2h

/* Card base */
bg-white border border-neutral-200 rounded-lg p-4
hover:shadow-md hover:-translate-y-px transition-all duration-100 cursor-pointer

/* Divisor interno do card */
pt-3 border-t border-neutral-100

/* Stat mini dentro do card */
text-base font-semibold text-neutral-900   /* valor */
text-xs text-neutral-400                   /* label */

Dashboard com Gráficos

Visão Geral — Janeiro 2025

Comparado ao mês anterior

Tarefas concluídas

142

↑ +18% vs mês anterior

Tempo médio/tarefa

2.4h

↓ -12% mais rápido

Projetos ativos

→ Sem alteração

Taxa de entrega

87%

↓ -3% vs meta

Tarefas concluídas por dia

Este mês

Mês anterior

1 Jan 8 Jan 15 Jan 22 Jan 29 Jan

Por status

Em progresso 63%

Concluído 25%

Bloqueado 12%

Por membro

João D.34

Maria R.28

Tiago S.19

/* KPI card */
bg-white rounded-lg border border-neutral-200 p-3
/* delta positivo: */ text-xs text-success-700 font-medium
/* delta negativo: */ text-xs text-danger-500 font-medium

/* Gráfico SVG inline */
// Use SVG nativo para gráficos simples de linha e donut
// Para projetos maiores: recharts, chart.js ou tremor

/* Barra horizontal */
h-1.5 bg-neutral-100 rounded-full
/* fill: */ h-full bg-brand-400 rounded-full transition-all duration-500

Tarefa com Contador de Tempo

Redesign App/Sprint 4/Redesenhar onboarding

Redesenhar tela de onboarding

Em progresso Alta prioridade Prazo: 15 Jan

Criar novo fluxo de boas-vindas com foco em ativação rápida. O objetivo é reduzir o onboarding para no máximo 3 etapas obrigatórias.

Rastreamento de tempo

Tempo total registrado: 1h 23min

Subtarefas (3/7)

Pesquisa com 15 usuários

Wireframes de baixa fidelidade

Protótipo interativo no Figma

Responsável

João Dias

Prazo

15 Jan 2025

Projeto

Redesign App

Tempo total

1h 23min

Estimativa

/* Tracker — estado parado */
p-4 rounded-lg border border-neutral-200 bg-neutral-50

/* Botão Iniciar */
flex items-center gap-2 px-4 py-2 rounded-lg bg-neutral-900 text-white
text-sm font-medium hover:bg-neutral-800 transition-all hover:-translate-y-px

/* Indicador pulsando */
relative
/* dot: */ w-2.5 h-2.5 rounded-full bg-success-500
/* ping: */ absolute inset-0 w-2.5 h-2.5 rounded-full bg-success-500 animate-ping opacity-60

/* Timer display */
text-2xl font-mono font-semibold text-neutral-900 leading-none tracking-tight

/* Timer JS (vanilla) */
let seconds = 0;
let interval = null;
function startTimer() {
  interval = setInterval(() => {
    seconds++;
    updateDisplay();
  }, 1000);
}

Edição Inline

Campos editáveis sem aparência de formulário. O usuário clica diretamente no dado para editar — o campo só revela sua natureza editável no hover (fundo suave) e no foco (borda sutil de contexto). Sem labels flutuantes, sem bordas permanentes.

Invisível por padrão O campo parece texto comum até o hover revelar o fundo cinza suave.

Focus contextual Ao focar, um ring azul sutil confirma que está em modo de edição.

Salva ao perder foco Pressione Enter ou clique fora para confirmar. Esc descarta.

Redesign App Mobile

Redesenhar a experiência completa do app mobile, focando em onboarding e retenção de usuários.

Status

Responsável

João Dias

Prazo

Prioridade

Cliente Acme Corp

Sistema de Formulários

Nome do projeto

Use um nome claro e descritivo.

Pesquisa

Input com ícone à esquerda.

Link de convite

Input group com botão de ação.

Verificando domínio (loading)

Email (erro)

Endereço de email inválido.

Senha (válido)

Senha forte.

Subdomínio (disabled)

Não editável após criação.

Fuso horário

Valor do contrato

Input group com prefixo + sufixo.

Botões:

Componentes de Feedback

Alerts

Dica: Você pode ativar notificações por email nas configurações.

Publicado! Suas alterações estão no ar.

Atenção: Seu plano expira em 3 dias. Renovar agora.

Erro: Falha na integração com GitHub. Verifique suas credenciais.

Banner

Manutenção: dom 22 jan, 02h–04h. Sistema ficará indisponível. Saiba mais

Snackbar

3 tarefas movidas para Concluído

Progress

Upload de arquivos72%

Capacidade de storage89%

Progresso do projeto100%

Processando… (indeterminado)

Dropdown (ellipsis)

Redesign App Mobile

Projeto · Sprint 4

Menu de Contexto (botão direito)

Prioridade

Fluxo de Caixa

Janeiro 2025

Recebimentos

+R$ 48.200

+12% vs dez

Pagamentos

−R$ 31.450

+4% vs dez

Saldo Líquido

R$ 16.750

+R$ 1.200 vs dez

DescriçãoCategoriaDataValorStatus

Acme Corp — Mensalidade

Fatura #1048

Recorrente

05 Jan+ R$ 12.000Pago

Beta Sistemas — Projeto

Contrato #87

Projeto

08 Jan+ R$ 18.500Pago

AWS — Infraestrutura

Cobrança automática

Infra

10 Jan− R$ 4.200Pago

Folha de Pagamento

6 colaboradores

Pessoal

15 Jan− R$ 22.000Pago

Gamma Design — Licença

Fatura #1052

Recorrente

20 Jan+ R$ 3.200Pendente

Figma — Assinatura Anual

5 licenças

Software

22 Jan− R$ 1.800Agendado

Chat de Conversa

Maria Rosa

Online agora

Hoje

Oi! Vi que você atualizou o protótipo. Ficou muito bom! 🎉

09:32

Obrigado! Fiz alguns ajustes no onboarding, acho que ficou mais fluido

09:34

Aqui está o feedback do cliente:

feedback-cliente-v2.pdf

124 KB · PDF

09:41

Ótimo, vou ler agora 👍

09:42

Calendário — Time Tracking

Janeiro 2025

Redesign

Backend

Reuniões

Dom

Seg

Ter

Qua

Qui

Sex

Sáb

Onboarding — 3h

Setup API — 4h

Wireframes — 5h

Planning — 2h

Protótipo — 3h

Auth — 6h

UI Kit — 4h

Endpoints — 2h

Review — 1.5h

Telas — 5h

Deploy — 3h

Testes UI — 4h

Handoff — 3h

Daily — 0.5h

Diagrama de Gantt

Redesign App Mobile — Sprint 4

Em progresso Concluído Planejado

Tarefa

1–3 Jan

6–10 Jan

13–17 Jan

20–24 Jan

27 Jan – Fev

Pesquisa com usuários

Wireframes low-fi

Protótipo interativo

Componentes UI

Testes de usabilidade

Handoff para Dev

DorckDS

Boas-vindas de volta

Entre com sua conta para continuar.

ou com email

SenhaEsqueceu a senha?

Lembrar por 30 dias

Não tem conta? Criar conta grátis

Lista com Drag & Drop

Arraste pelo handle para reordenar as tarefas.

Backlog do Sprint 6 itens · Arrastar para reordenar

Redesenhar tela de onboarding
Redesign App · Sprint 4
AltaFrontend
J
Integração com Stripe
Backend API · Sprint 4
UrgenteBackend
M
Setup do ambiente de CI/CD
Infraestrutura · Concluído
Concluído
Criar componentes de formulário
Redesign App · Sprint 4
MédiaFrontend
J
Pesquisa de satisfação com clientes
Growth · Sprint 4
Pesquisa
T
Atualizar documentação da API
Backend API · Sprint 4
BaixaBackend
M

Referências técnicas

📦 TailwindCSS v3.x com config customizado

🔤 Inter + JetBrains Mono — Google Fonts

🎨 Font Awesome 7.0.1 Free — fa-solid / fa-regular

⚡ Animações — CSS transitions nativas

♿ Acessibilidade — WCAG AA minimum

📱 Responsive — Desktop-first, lg: base

Filosofia de Interface

Minimalismo Funcional

Hierarquia Tipográfica

Modularidade

Feedback Imediato

Alta Escaneabilidade

Densidade Controlada

Grid & Layout

Estrutura Geral

Breakpoints

Sistema de Colunas

Escala de Espaçamento

Tipografia

Pesos e Uso

Hierarquia de Cores de Texto

Paleta de Cores

Neutros

Brand (Azul)

Estados

Tokens de Interface

Sistema de Bordas

Componentes Base

Botões

Inputs

Seleção

Badges & Tags

Sistema de Cores para Tags

Avatares

Tabs

Tooltip

Componentes de Interface SaaS

Sidebar de Navegação

Topbar

Tabela de Dados

Kanban Board

Comentários

Editor de Documento

Brief do Produto — Redesign App

Objetivo

Métricas

Checklist

Estados de Interface

Toast Notifications

Skeleton Loading

Sistema de Ícones

Interações & Microinterações

Regras de Consistência

1. Nunca use valores mágicos

2. Hierarquia visual via peso, não cor

3. Densidade consistente por contexto

4. Bordas apenas quando necessário

5. Ícones sempre com texto quando possível

6. Estados de foco são obrigatórios

7. Componentes compostos por primitivos

8. Responsive mobile-last

Exemplos de Layouts

Dashboard de Projetos

Redesign App

API v2

Marketing Q4

Lista de Tarefas

Tabela com Pesquisa & Paginação

Modal de Confirmação

Excluir Projeto?

Modal com Conteúdo

Nova Tarefa

Cards — Cliente · Projeto · Tarefa · Documento

Dashboard com Gráficos

Visão Geral — Janeiro 2025

Tarefa com Contador de Tempo

Redesenhar tela de onboarding

Edição Inline

Sistema de Formulários

Componentes de Feedback

Dropdown & Menu de Contexto

Fluxo de Caixa

Fluxo de Caixa

Chat de Conversa

Calendário — Time Tracking

Janeiro 2025