Design system · DadosProjeto acadêmico
Mirante
Sistema dark-first para produtos de dados: densidade controlada, paleta para visualização e tokens semânticos.
Estudo conceitual desenvolvido em contexto acadêmico. Marca, pessoas e dados são fictícios.
- Papel
- UX/UI Design · Front-end
- Contexto
- Projeto acadêmico
- Ferramentas
- Figma, React, Tailwind CSS
Visão geral
O desafio
Dashboards de SaaS acumulam gráficos, tabelas e filtros até virarem ruído. O desafio: criar um sistema que suporte alta densidade de informação sem perder hierarquia, e que funcione bem no escuro, onde analistas passam horas.
Como foi resolvido
O sistema foi pensado dark-first, com superfícies em degraus de luminância (em vez de sombras), uma paleta categórica de 6 cores baseada na Okabe-Ito, referência para leitura por pessoas daltônicas, e tipografia IBM Plex com números tabulares. Os componentes principais foram implementados em React + Tailwind a partir dos mesmos tokens do Figma.
O que mudou
Um kit de dashboard coerente no tema escuro, com tokens semânticos prontos para receber um tema claro e handoff design→código sem tradução manual de valores.
Processo
Auditoria
Análise de 5 dashboards de mercado: padrões de densidade e problemas de leitura.
Fundamentos
Escala de superfícies, paleta de dados e números tabulares.
Componentes
KPI tile, tabela, filtros, tooltip e estados vazios.
Código
Os mesmos valores do Figma (cores, espaços, raios) configurados no Tailwind, e componentes em React.
Design system
Mirante DS
Um sistema feito para longas sessões de análise: fundo quase preto com tom azulado, um índigo para ação e cores de dados que nunca competem com a interface.
Dados são o herói
A interface recua: além da ação principal, só os dados ganham cor saturada.
Profundidade por luz
No escuro, elevação é luminância, não sombra.
Densidade com ritmo
Grid de 4px e números tabulares mantêm colunas alinhadas.
Aprendizados
No modo escuro, sombras quase não aparecem; degraus de luminância comunicam elevação com mais clareza.