Cortex DS — o sistema de design que estrutura a experiência da Plenno.
Criei o Cortex DS do zero para a Plenno, uma plataforma healthtech B2B. Além de projetar e construir ativamente os componentes, liderei o time de design na evolução contínua do sistema — garantindo consistência, escalabilidade e uma experiência coesa em web e mobile.
Cliente
Plenno · Healthtech
Papel
Design System Lead · Designer
Entrega
Sistema de design completo
Status
Em evolução contínua
Um nome com intenção
Cortex foi escolhido com propósito. A Plenno é uma plataforma healthtech — e o córtex cerebral é a camada do sistema nervoso responsável por processar, organizar e dar sentido às informações. Um design system tem exatamente essa função: processar a complexidade do produto e devolver clareza e coerência para quem usa e para quem constrói.
O nome também estabelece identidade própria para o sistema — algo que o time pudesse referenciar, documentar e evoluir com orgulho. Não é apenas uma biblioteca de componentes; é a linguagem visual e interativa da Plenno.
Do zero à escala
A Plenno cresceu rápido. Com múltiplas squads trabalhando em paralelo — web e mobile, fluxos de empresa médica, paciente, profissional de saúde e financeiro — a inconsistência visual começou a aparecer. Componentes criados de forma isolada, padrões duplicados, decisões de cor tomadas localmente.
O desafio não era só criar componentes bonitos. Era criar um sistema que o time de design pudesse manter, que os devs conseguissem implementar com confiança, e que evoluísse junto com o produto sem quebrar o que já existia.
O que fui responsável por
- ●Criação e nomeação do design system (Cortex DS)
- ●Design e documentação de todos os componentes base
- ●Definição de tokens de cor, tipografia e espaçamento
- ●Liderança do time de design na expansão do sistema
- ●Alinhamento com engenharia para consistência no handoff
- ●Versionamento e governança do sistema
Tokens que sustentam tudo
Paleta de cores
A paleta foi construída em escala semântica — cada cor carrega intenção e contexto, não apenas estética. O verde-teal (#025e5e) é a cor primária da Plenno, representando saúde, confiança e equilíbrio.
Tipografia
A escala tipográfica foi definida com nomes semânticos — Heading, Body, Body-sm, Caption — para que o time usasse tokens, não valores numéricos arbitrários.
Construídos para contexto
A biblioteca cobre desde os elementos base — botões, inputs, seleção, navegação, feedback — até componentes de domínio do produto Plenno. Cada um é documentado com todas as variantes e estados em Light e Dark mode, seguindo o padrão Playground + descrição de uso + specs, para que design e engenharia usem a mesma referência.
Componente
Button — Web
Os botões Web são os principais call-to-actions da plataforma. Altura fixa de 36px, radius 8px, tipografia Body-sm (14px / 400). O sistema tem variantes Primary, Secondary, Negative e cores semânticas (Success, Error, Attention) para reforçar o propósito de cada ação.
Light Mode
Dark Mode
Componente
Button — Mobile
A versão Mobile do botão tem altura ampliada para 48px — garantindo área de toque acessível conforme as recomendações de HIG (Apple) e Material Design (Google). Mesmas variantes da web, adaptadas para a escala mobile.
Componente
Bottom Bar
A Bottom Bar é a navegação principal no mobile da Plenno. Projetada para suportar light e dark mode, com ícones e labels que identificam claramente os módulos da plataforma — Home, Saúde, Financeiro, Perfil.
Componente
Cards — Empresa Médica
Os cards de Empresa Médica são componentes específicos para o contexto B2B da Plenno. Exibem informações da organização (nome, especialidade, status) com hierarquia visual clara e suporte a ações diretas — aprovar, rejeitar, visualizar perfil.
Clínica São Lucas
Clínica · São Paulo
Hospital Beneficência
Clínica · São Paulo
Centro Médico Plena
Clínica · São Paulo
Componente
Input — Web & Mobile
O campo de entrada cobre seis estados — Default, Focus, Disabled, Error, Error-Focus e Select — sempre com Label acima, ícones opcionais à esquerda/direita e texto de descrição abaixo. Tipografia Body-sm (14px); Label em 500.
Light Mode
Label
Default · This is an input description.
Label
Focus
Label
Disabled
Label
Error
Label
Error-Focus
Dark Mode
Label
Default
Label
Focus
Label
Disabled
Label
Error
Label
Error-Focus
Componente
Dropdown Menu — Web & Mobile
Menu acionado por um campo de seleção (Label + placeholder + chevron). O painel aberto lista itens com ícone à esquerda/direita e termina com um par de ações. O item ativo recebe destaque; padding de 8px e tipografia Body-sm.
Light Mode
Label
Dark Mode
Label
Componente
Tablist — Web & Mobile
Navegação segmentada para alternar entre vistas. A aba ativa ganha fundo cinza claro e contorno teal; cada aba pode carregar um badge de contagem. Há a variante texto+ícone e a versão Mobile de duas abas.
Web · barra de abas
Web · texto + ícone
Mobile · duas abas
Componente
Toggle
Interruptor on/off. Estado ligado usa o primary teal; o knob desliza com transição suave. Área de toque ampliada no mobile.
Componente
Tooltip
Mensagem curta e temporária. Bolha escura no light mode (e clara no dark), com seta apontando em quatro direções — topo, direita, esquerda e base.
Componente
Toast
Mensagem sucinta exibida temporariamente. Quatro variantes — Success, Error, Info e Attention — com borda semântica à esquerda, título, descrição e uma ação primária opcional.
Light
Success
Your action was successful! Everything worked as expected.
Error
Something went wrong. Try again or contact support.
Info
Important information. Please review.
Attention
Attention! Immediate action may be required.
Dark
Success
Your action was successful! Everything worked as expected.
Error
Something went wrong. Try again or contact support.
Info
Important information. Please review.
Attention
Attention! Immediate action may be required.
Componente
Progress Bar
Indica avanço de uma tarefa. Cabeçalho com rótulo à esquerda, tempo restante ao centro e percentual à direita; trilho fino com preenchimento teal. Inclui estado desabilitado (cinza).
Light
Disabled
Dark
Disabled
Componente
Tags
Etiquetas para classificar conteúdo. A paleta Main traz a coleção completa de cores; há a variante Disabled (esmaecida) e o grupo de status — Ativo, Inativo, Negativo e Aguardando.
Light · Main & Status
Disabled
Status
Dark · Main & Status
Status
Componente
Avatar
Foto de perfil ou iniciais como fallback. Três tamanhos (lg/md/sm); iniciais em teal (primary) ou cinza neutro.
Componente
Pagination
Navegação entre páginas. Página atual destacada em teal; reticências condensam intervalos longos.
Componente
Checkbox
Seleção múltipla. Estados Default, Marcado, Indeterminado e Disabled; marcado usa o primary teal com check branco. Box 18px, radius 5px.
Componente
Radio
Seleção única dentro de um grupo. Mesmos estados do checkbox; selecionado mostra o anel teal com ponto central. Círculo 18px.
Componente
Dialog — Web
Janela modal para decisões pontuais. Ícone de contexto, título, descrição e par de ações (cancelar/confirmar). A variante destrutiva troca a ação primária para o vermelho semântico.
Título do diálogo
Descrição que contextualiza a decisão que o usuário precisa tomar antes de prosseguir.
Excluir registro?
Esta ação não pode ser desfeita. O registro será removido permanentemente.
Componente
Bottom Sheet — Mobile
Painel deslizante a partir da base. Handle de arraste, título, conteúdo e ações fixas no rodapé. Cantos superiores arredondados (radius 20px).
Componente
Datepicker
Calendário para seleção de data. Cabeçalho com mês/ano e navegação; dia selecionado em teal, hoje contornado, intervalo destacado em tom suave.
Componentes de domínio
Além da base, o Cortex DS abriga componentes específicos do produto Plenno — construídos sobre os mesmos tokens, mas resolvendo fluxos reais de saúde, agenda e financeiro.
Componente · Domínio
Agenda & Evento
Cartões de agenda do profissional de saúde. Cada evento traz faixa de cor por tipo, horário, paciente e status. O card de Evento Pessoal usa um tom neutro para diferenciar de consultas.
09:00 – 09:30
Consulta · Ana Oliveira
Confirmado10:00 – 10:45
Retorno · Carlos Silva
Aguardando12:00 – 13:00
Evento pessoal · Almoço
BloqueadoComponente · Domínio
Mural de Vagas
Quadro kanban de plantões/vagas com colunas semânticas. Cada card mostra especialidade, unidade e valor; a coluna comunica o estágio — Abertas, Em análise e Preenchidas.
Plantão · Cardiologia
Hospital Central · 12h
R$ 1.800
Plantão · Pediatria
Clínica Sul · 6h
R$ 950
Plantão · Ortopedia
Hospital Norte · 24h
R$ 3.200
Plantão · Clínica Geral
Unidade Leste · 12h
PreenchidaComponente · Domínio
Fluxo Financeiro
Lista de lançamentos do módulo financeiro. Entradas em verde e saídas em vermelho semântico, com ícone, descrição, data e valor. O cabeçalho resume o saldo do período.
Um sistema vivo
Cada componente do Cortex DS tem uma página de documentação própria no Figma, seguindo o padrão: título + categoria + descrição de uso + playground com preview em light e dark mode.
Components
Avatar
About the component — descrição detalhada, casos de uso e especificações técnicas.
Playground
Mais do que criar — liderar
Um design system não é um projeto de uma pessoa. Criei as fundações, estabeleci os padrões e liderei o time de design para que cada novo componente nascesse dentro do mesmo sistema — com a mesma lógica, a mesma qualidade, a mesma documentação.
Meu papel como líder foi criar um ambiente onde o time tivesse autonomia para expandir o Cortex DS sem perder coerência. Isso incluiu reviews de componentes, alinhamento com engenharia, e um processo de decisão claro para quando adicionar vs. adaptar um componente existente.
Governança do DS
Processo claro para adicionar, modificar e deprecar componentes sem quebrar o que já estava em produção.
Onboarding de designers
Documentação suficiente para que novos designers entrassem no time e conseguissem trabalhar dentro do sistema no primeiro dia.
Alinhamento com devs
Tokens nomeados de forma que o handoff entre Figma e código fosse direto, sem tradução manual de valores.
Expansão contínua
O Cortex DS não foi entregue e abandonado — foi construído para crescer junto com o produto.
O que o Cortex me ensinou
01
Naming importa muito
Um componente bem nomeado reduz discussões, acelera decisões e cria vocabulário compartilhado no time.
02
Consistência é um produto
Não é só estética — é a soma de decisões repetíveis que economizam tempo e reduzem erros no produto real.
03
Liderar é documentar
A liderança técnica de um DS se manifesta na qualidade da documentação, não apenas nos componentes criados.