Um app de produtividade adaptativa que reorganiza a rotina a partir do estado emocional identificado num check‑in rápido — em vez de partir de uma lista fixa de tarefas.
"Você não precisa estar 100% para começar. O Mindflow adapta sua rotina ao que você consegue agora."
5 integrantes·São Paulo, SP·Semestre 2026/2·Atualizado em 25 set 2026
4 de 10 entregas concluídas · 2 em consolidação
Tema & problema
Ferramentas de produtividade tradicionais — Notion, Todoist, ClickUp — assumem capacidade cognitiva constante e organizam o que precisa ser feito. O Mindflow parte de outro lugar: organiza o que é possível fazer agora, considerando o nível real de capacidade de execução do usuário naquele momento.
Essa capacidade varia por causas estruturais (TDAH, TEA), situacionais (burnout, luto, sobrecarga pontual) ou combinadas — e nenhuma ferramenta de produtividade hoje trata essa variação como variável de primeira classe do sistema, e sim como ruído a ser ignorado.
O que o Mindflow não é
Não é ferramenta de saúde mental (sem diagnóstico ou terapia), não substitui Psicologia/Psiquiatria e não substitui gestores de projeto — pode integrar‑se a eles (Notion, Jira, ClickUp, Trello, Asana, Monday).
Justificativa
Duas evidências sustentam o projeto. A primeira é empírica: na pesquisa própria com 41 respondentes, 92,7% relatam algum grau de dificuldade de foco, atenção ou organização na rotina — o problema não é de nicho, é amplamente compartilhado dentro do público-alvo (ver Pesquisa de usuário).
A segunda é de mercado: numa análise comparativa com 8 produtos e referências (Notion, Todoist, ClickUp, Forest, Habitunes, Duolingo, Headspace, How We Feel), nenhum combina simultaneamente organizar tarefas, ler o estado emocional do usuário e adaptar a execução a esse estado. É um espaço de mercado desocupado, não uma hipótese não testada.
Objetivos
Objetivo geral — projetar a experiência de um aplicativo de produtividade adaptativa que reorganiza a rotina do usuário com base em seu estado emocional, demonstrando que informações emocionais podem personalizar a experiência de produtividade de forma flexível, compreensível e sustentável.
Meta SMART — desenvolver, até o fim do semestre 2026/2, o projeto completo de UX/UI do Mindflow (pesquisa, arquitetura da informação, fluxos, wireframes, protótipo navegável de alta fidelidade e identidade visual), validado com testes de usabilidade com no mínimo 5 participantes do público-alvo.
Objetivos específicos — pesquisar o público-alvo e validar hipóteses; mapear personas e jornadas; fundamentar teoricamente o modelo de check-in emocional; definir arquitetura de informação e funcionalidades centrais; formalizar identidade visual; prototipar a experiência; testar com usuários reais.
Público-alvo
Jovens adultos de 18–30 anos, universitários ou em início/consolidação de carreira, em áreas de conhecimento, criatividade e tecnologia. O critério central de inclusão não é um diagnóstico — é a variação significativa da capacidade de execução ao longo do tempo.
Estrutural — condição crônica (TDAH, TEA)Situacional — fator pontual (burnout, luto, sobrecarga)Combinada — as duas ao mesmo tempo
Pessoas diferentes chegam ao mesmo estado de baixa capacidade por motivos distintos — e compartilham a mesma necessidade de apoio para executar. As 9 personas detalhadas que traduzem esse público estão em Desenvolvimento → UX.
Contexto & equipe
Trabalho de Conclusão de Curso — Design Digital, Universidade Anhembi Morumbi (Ecossistema Ânima), semestre 2026/2, São Paulo/SP.
Abordagem de métodos mistos: questionário quantitativo (41 respondentes, 13 perguntas fechadas) combinado a uma camada qualitativa extraída de respostas abertas do mesmo instrumento, mais análise documental comparativa de concorrentes. A partir disso, a equipe derivou personas, jornadas de usuário e um modelo de interação fundamentado em psicologia cognitiva — detalhado ponta a ponta em Desenvolvimento.
Limitação metodológica assumida: não houve entrevistas qualitativas estruturadas — a camada qualitativa deriva de respostas abertas espontâneas do questionário, não de um roteiro dedicado.
Cronograma
Painel vivo, atualizado conforme o semestre avança. As dez entregas seguem o cronograma do briefing, na ordem em que acontecem.
01
Briefing criativo
Conceito, posicionamento, marca e funcionalidades centrais definidos.
Concluído
02
Pesquisa de público
41 respondentes + benchmarking com 8 referências de mercado.
Concluído
03
Personas detalhadas
9 personas cobrindo as camadas estrutural, situacional e combinada.
Concluído
04
Jornadas & fluxo de usuário
4 de 9 personas com jornada completa + fluxograma ponta a ponta.
Concluído
05
Fundamentação teórica
Modelo de check-in fechado em Russell (Circumplex Model) — Plutchik descartado e documentado como decisão metodológica.
Concluído
06
Identidade visual
Conceito, símbolo (a flor), logo, paleta, tipografia e regras de uso definidos no brandbook; aplicação às telas do app pendente.
Em consolidação
07
Wireframes
Baixa e média fidelidade — check-in prototipado direto em alta fidelidade; demais telas pendentes.
Em consolidação
08
Protótipo navegável
Fluxo de check-in publicado e navegável; restante do fluxo pendente.
Em consolidação
09
Testes de usabilidade
Mínimo de 5 participantes + relatório de achados.
Pendente
10
Apresentação — banca final
Defesa oral (A3).
Pendente
Como funciona a avaliação (Normativo Ânima — TCC1)
Três etapas: A1 — Banca de Qualificação (30 pts), A2 — nota do orientador (30 pts) e A3 — Banca Final (40 pts, defesa oral). Aprovação exige no mínimo 70/100 pontos e 75% de frequência nas orientações.
02
Fundamentação
Sobre
A base teórica que sustenta o projeto — de Design e de psicologia cognitiva/ciência das emoções — e como ela se traduz em decisões concretas de forma, cor e interação.
Fundamentação de Design
O design do Mindflow se apoia nos Dez Princípios do Bom Design de Dieter Rams, cada um interpretado no contexto específico do produto:
Inovador
Capacidade de execução disponível como variável central de um sistema de produtividade.
Útil
A funcionalidade certa, na hora certa, para o estado real do usuário — não mais funcionalidades.
Estético
A qualidade estética é parte da utilidade, não ornamento.
Compreensível
O estado do usuário se traduz em cor/atmosfera antes de qualquer texto.
Discreto
Contido onde precisa ser — a expressividade serve a usabilidade, não compete com ela.
Honesto
Sem métricas infladas, streaks punitivos ou promessas que o produto não cumpre.
Duradouro
Clareza e funcionalidade emocional atemporais, não tendência visual passageira.
Minucioso
Cada micro-interação e transição tem intenção clara.
"Menos, porém melhor" — um problema complexo em interface simples e acolhedora.
Complementarmente, a psicologia das formas mostra que contornos curvos reduzem ativação de estresse e sinalizam segurança (Arnheim; Bar & Neta, 2006), efeito validado interculturalmente em 25 línguas pelo Bouba/Kiki (Ćwiek et al., 2021). A psicologia das cores segue o mesmo eixo do modelo de check-in — valência × ativação — e não mais a Roda de Plutchik usada em versões antigas da fundamentação (ver nota em Desenvolvimento → Brand).
Fundamentação científica
O check-in emocional do Mindflow usa o Circumplex Model of Affect de James Russell (1980): duas dimensões contínuas — valência (agradável↔desagradável) e ativação/arousal (alta↔baixa) — em vez da Roda das Emoções de Plutchik. A decisão está documentada em detalhe: categorias discretas não representam estados contínuos, Plutchik não mede capacidade de ação, o foco do produto é estado momentâneo (não classificação), e a interface exploratória do Mindflow exige um modelo igualmente contínuo. A aplicação prática é o Mood Meter (Yale Center for Emotional Intelligence, framework RULER): quatro quadrantes de cor cruzando energia e agradabilidade.
Quadrante
Ativação
Valência
Rótulo no Mindflow
🔴 Vermelho
Alta
Negativa
Alerta
🟡 Amarelo
Alta
Positiva
Energizado
🔵 Azul
Baixa
Negativa
Esgotado
🟢 Verde
Baixa
Positiva
Estável
Sete outros pilares completam a base científica do produto:
Inteligência emocional
Mayer & Salovey — habilidade cognitiva treinável, não traço fixo. O app treina percepção e nomeação do próprio estado.
Regulação emocional
Gross — 5 famílias de estratégia; reorganizar tarefas é modificação da situação, simplificar a tela é mudança cognitiva.
Ansiedade & memória de trabalho
Vytal et al. — ansiedade compete pelos mesmos recursos da memória de trabalho, mais visível em tarefas simples.
Burnout
Maslach & Leiter — descompasso crônico pessoa-ambiente, não fraqueza individual. O app não agrava, não cura.
Fadiga de decisão
Baumeister — cada decisão trivial consome recurso mental finito. Justifica o Sistema de Ação Mínima.
Carga cognitiva & neurodivergência
Sweller — memória de trabalho limitada; os mesmos mecanismos que ajudam TDAH ajudam qualquer baixa capacidade.
Formação de hábitos
Singh et al., 2024 — hábito real leva 59–66 dias, não 21. O Sistema Anti-Abandono precisa sustentar meses.
Papel do Design frente à problemática
O papel do Design aqui não é ilustrar a teoria — é traduzi-la em decisões de tela sem exigir que o usuário leia nada disso. A ativação alta-negativa de Russell vira, na prática, cor vermelha quente e divulgação progressiva de informação (menos estímulo simultâneo); a carga cognitiva de Sweller vira "mostrar só o próximo passo"; a fadiga de decisão de Baumeister vira zero configuração no onboarding. Cada citação da Fundamentação Científica tem uma contraparte visível em Desenvolvimento → Dev, na matriz que liga estado emocional a resposta do sistema — essa ponte entre teoria e tela, não a teoria isolada, é a contribuição de Design do projeto.
Especificidades da problemática
O público do Mindflow não se organiza por diagnóstico, mas por camada de situação — e um mesmo usuário transita entre elas ao longo do tempo:
Estrutural
Variação recorrente e persistente (TDAH, TEA). Crônica — o sistema precisa reconhecer sem julgamento, sem exigir "encaixe" em padrões convencionais.
Situacional
Variação pontual por contexto (burnout, luto, estresse intenso). Não estrutural, mas igualmente paralisante enquanto dura.
Combinada
Condição crônica + fator contextual simultâneos. O sistema responde ao estado de capacidade disponível, não ao diagnóstico subjacente.
É essa especificidade — responder ao estado, nunca à causa — que nenhuma ferramenta de produtividade existente trata como variável de primeira classe, e que justifica o projeto como problema de Design, não só de engenharia de produto.
03
Proposta
Sobre
O briefing criativo condensado em canvas: problema, público, marca, tom e escopo — o "o quê" e o "para quem" antes do "como" (detalhado em Desenvolvimento).
Briefing & canvas de projeto
Problema
Ferramentas de produtividade ignoram a variação real de capacidade de execução.
Público
18–30 anos, capacidade de execução variável (estrutural, situacional ou combinada).
Proposta de valor
Organiza o que é possível fazer agora, não o que precisa ser feito.
Diferencial
Único produto que organiza tarefas + lê estado emocional + adapta execução, ao mesmo tempo.
"Você não precisa estar 100% para começar. O Mindflow adapta sua rotina ao que você consegue agora."
Declaração de marca
Missão — tornar possível a execução de tarefas mesmo quando as condições não são ideais, adaptando a experiência à capacidade disponível em cada momento, de forma visualmente agradável e emocionalmente reconfortante.
Visão — ser referência em sistemas de apoio à execução centrados na capacidade real do usuário, mudando o paradigma de "fazer mais" para "fazer o possível, com consciência".
Valores — adaptação sobre rigidez · acolhimento sobre cobrança · leveza visual sobre complexidade funcional · progresso sustentável sobre produtividade tóxica · simplicidade sobre acúmulo de funcionalidades · privacidade e transparência.
Diferenciais competitivos — enquanto Notion/Todoist organizam o que fazer, o Mindflow organiza o que é possível fazer agora. Identidade visual expressiva e responsiva: o usuário não lê o estado do sistema, ele o sente.
Tom & voz
Tom — acolhedor e humano, nunca robótico ou clínico. Como um colega que entende que nem todo dia é igual (referência direta: Headspace).
Voz — empática, direta, encorajadora. Não é chefe cobrando entregas nem app infantilizado — trata o usuário como adulto inteligente.
Emoção pretendida — alívio ("alguém finalmente entende"), segurança ("não vou ser punido"), motivação leve ("consigo dar só esse próximo passo") — reforçada visualmente antes mesmo da leitura de texto.
Escopo
O que o Mindflow entrega
Compreensão do contexto emocional via check-in rápido
Adaptação da rotina a estado + objetivos + tempo disponível
Redução de carga cognitiva na apresentação de tarefas
Acompanhamento da evolução (Trilha)
O que o Mindflow não entrega
Diagnóstico clínico, terapia ou substituição de Psicologia/Psiquiatria
Eliminação das causas da baixa capacidade
Substituição de gestores de projeto/equipe
Cultura de produtividade excessiva ou gamificação punitiva
04
Desenvolvimento
Sobre
Organizado por disciplina — Brand, UX, UI, Dev, Resultado — espelhando como a própria equipe se divide. Juntas, as cinco cobrem os 7 sub-itens exigidos pelo normativo: estudos, geração de alternativas, seleção, detalhamento técnico, modelos e protótipos, validações e documentação.
Brand
O racional de marca e a sua tradução em sistema visual — por que o Mindflow tem a cara que tem.
A identidade nasceu de uma crítica: a versão anterior funcionava, mas parecia genérica e não fazia a pessoa sentir acolhimento nem ausência de pressão. Este bloco reúne o raciocínio (conceito), o sistema que ele gerou (símbolo, logo, cor, tipografia, imagem e voz) e as regras que o protegem. A fonte é o brandbook do projeto no Figma.
A devolutiva do professor apontou três limites: faltava acolhimento, a ideia de uma experiência sem pressão não aparecia com força no visual e o resultado se parecia com a linguagem genérica de startup e fintech, que se repete no Behance, no Pinterest e no Dribbble. A equipe entendeu que não bastava o símbolo funcionar: a identidade precisava fazer a pessoa sentir alguma coisa antes de entender o produto. Por isso a pergunta de projeto mudou.
Antes
Como a gente representa o fluxo do Mindflow?
Agora
Como a gente representa a experiência que queremos proporcionar para quem usa o Mindflow?
Em vez de retocar o símbolo, o projeto voltou uma etapa e investigou as sensações que a marca precisa transmitir. Chegou a cinco, que passaram a funcionar como um filtro para todas as decisões visuais seguintes:
AcolhimentoSem pressãoLevezaFluxoAutocompaixão
O filtro faz sentido porque o Mindflow não diz ao usuário “faça mais” nem “produza mais rápido”: parte da capacidade que a pessoa tem naquele momento e ajuda a encontrar uma ação possível. Daí três princípios.
Adaptação
A pessoa não é igual todos os dias.
Capacidade
O ponto de partida é o que ela consegue fazer agora.
Acolhimento
Nada disso pode virar cobrança.
A flor cresce no tempo dela. A pessoa também.
Símbolo — a flor de três pétalas
A pesquisa visual usou referências editoriais — principalmente Savee e Cosmos, para não ficar preso a referências de startup — e dois padrões apareceram com força: gradientes de céu e de luz, e a botânica, com flores, pétalas e formas que crescem e se abrem. A flor nasceu como síntese desses achados e substituiu as três ondas anteriores, que contavam a mesma história de forma mais mecânica e, por isso, mais fria.
01 · EmoçãoA menor e mais fechada: o check-in, o momento em que a pessoa olha para si mesma.02 · TarefaJá tomando forma: a tarefa começando a se organizar.03 · AçãoA maior e mais aberta: o próximo passo possível virando ação real.
A lógica das três etapas foi mantida — emoção, tarefa, ação —, mas agora é contada por crescimento e não por movimento mecânico, e o giro leve das pétalas em torno de um centro preserva o Flow como ciclo orgânico. Uma flor não precisa ser forçada a abrir: abre no tempo dela. É a tradução visual do “sem pressão”, e o florescimento é a metáfora da autocompaixão, presente na própria forma e não numa palavra escrita embaixo do logo.
O símbolo tem duas camadas de leitura. Primeiro é só uma flor, que já comunica crescimento; depois aparece a arquitetura do produto, que aprofunda o desenho mas não é necessária para ele funcionar. O desenho é geométrico e preciso de propósito, para o acolhimento não escorregar para o infantil nem para o universo de cosmético e bem-estar.
Logo — versões, proteção e tamanho mínimo
O logo é a flor mais o wordmark “Mindflow”, composto em PP Mori Medium, sempre com M maiúsculo e o restante em minúsculas — nunca outra tipografia, itálico ou caixa alta total. As versões de cor abaixo estão aprovadas; a principal é o logo preto sobre o verde-limão.
Versões de cor
Lime — logo preto (principal)Branco — logo pretoPreto — logo brancoPreto — logo limeGradiente Flow — logo branco
O Flow Lilac nunca preenche o símbolo: é cor de produto, não do logotipo.
Disposições
HorizontalVersão principal.VerticalPara espaços mais altos que largos.SímboloÍcone, favicon e avatar.WordmarkSó onde o símbolo já aparece.
Área de proteção
Ao redor do símbolo fica uma área livre de texto, fotografia ou qualquer outro elemento, equivalente à metade da altura dele. Chamamos essa medida de x, com x = ½ h, sendo h a altura do símbolo. Vale para as três disposições com símbolo.
xxxx
Horizontal — x medido a partir do símbolo, a peça mais alta.
xxxx
Vertical — a mesma medida acima do símbolo, abaixo do wordmark e nas laterais.
xxxx
Símbolo isolado — x = ½ h em volta das pétalas.
Tamanho mínimo
Abaixo destas medidas o wordmark perde legibilidade e as pétalas se fundem. Os exemplos estão em tamanho real (1 px = 1 px de tela).
Versão
Fundo claro e escuro
Digital
Impressão
Onde usar
Horizontal
96 px de largura símbolo 21 px x = 10,5 px
25 mm de largura
Versão principal: cabeçalhos, documentos e rodapés.
Vertical
64 px de largura símbolo 30 px x = 15 px
17 mm de largura
Quando o espaço é mais alto que largo: capas e splash.
Símbolo
16 px de altura x = 8 px
5 mm de altura
Favicon, ícone de app e avatar.
Wordmark
72 px de largura ascendentes 13 px
19 mm de largura
Só quando o símbolo já aparece na mesma peça.
Erros a evitar
01
Distorcer, inclinar ou espelhar o símbolo.
02
Recolorir a flor fora da paleta aprovadaSem gradientes aleatórios, sem cores de terceiros.
03
Separar as pétalas ou redesenhar o traço à mão.
04
Aplicar sombras, contornos ou efeitos 3D sobre o símbolo.
05
Substituir a PP Mori por outra tipografia nos materiais oficiais.
06
Posicionar o símbolo sobre fundos de baixo contraste ou fotografias muito poluídas.
Cor
Preto e branco constroem a estrutura. O Gradiente Flow é a assinatura de estado, fluxo e atmosfera. O verde-limão marca o que importa agora. Nenhuma cor é decoração.
Verde-limão#CCFF03
Marca-texto, destaque e ação. Sempre fundo com texto preto por cima.
Flow Blue#237AF9
Reconhecimento: extremidade fria do gradiente e pontos de recorrência visual.
Flow Lilac#9A8FF9
Parceira do gradiente: nunca aparece sozinha.
Gradiente Flow#9A8FF9 → #237AF9
Estado, fluxo, atmosfera. Só em fundos e momentos de destaque.
Preto#000000
Estrutura, profundidade, contraste.
Branco#FFFFFF
Espaço, clareza, respiro.
Proporção de uso: cerca de 70–80% de preto e branco, 15–25% de Gradiente Flow e poucos pontos de verde-limão, só onde há destaque ou ação. O gradiente nunca fica atrás de texto de corpo.
Por que o verde-limão
O verde-limão é a cor do que está começando a crescer. A pesquisa visual apontou para dois lados, o céu e a luz de um lado, a botânica do outro. O gradiente ficou com o primeiro. O limão ficou com o segundo: o tom do broto, do que acabou de nascer. É uma cor de começo e não de alarme: chama a atenção sem pedir pressa.
Por isso ele funciona como marca-texto e não como fundo de tela: marca onde a pessoa pode agir agora, o próximo passo possível, sem dar ordem, na mesma lógica do peso Medium. Sobre o limão o texto é sempre preto; sobre o escuro, o próprio limão pode ser a cor da linha ou do texto; sobre o branco ele não serve como texto, então ali aparece só como fundo. E ele nunca representa uma emoção: os quatro estados do Mood Meter têm as cores deles, e o limão fica do lado da marca.
Escala Lime — 50 a 950
Baseada no matiz do verde da marca. O 300 é a cor oficial (#CCFF03); sobre branco, o 700 é o primeiro passo que passa AA; sobre preto, passam o 600 e todos os mais claros.
50#F9FFEB
100#F0FFD0
200#E1FF9D
300marca#CCFF03
400#B7EB00
500#9CCE00
600#7CA900
700#5A7F00
800#456700
900#335100
950#172900
Escala Mono — 50 a 950
Os neutros ficam numa escala só, ancorada nos tokens do dashboard. Preto e branco ficam fora dela. O único valor fora da escala é o cinza de números e metadados do tema claro (#727579), o mínimo que passa AA sobre branco.
50#F5F5F6
100#E6E7E8
200#CED0D2
300#B7B9BC
400#A0A3A6
500#7C8084
600#63666A
700#424548
800#242628
900#141618
950#080A0B
Tema claro e escuro
Token
Claro
Escuro
Uso
ground
#FFFFFF
#000000
Fundo da página
surface
#FFFFFF
#141618
Cards e campos
surface-2
#F5F5F6
#242628
Hover e áreas secundárias
ink
#000000
#FFFFFF
Títulos e texto principal
ink-soft
#63666A
#A0A3A6
Texto de apoio
ink-faint
#727579
#7C8084
Números e metadados
line
#E6E7E8
#242628
Linhas finas
accent
#000000
#CCFF03
Destaque como cor
mark
#CCFF03
#CCFF03
Marca-texto (só fundo)
on-mark
#000000
#000000
Texto sobre o marca-texto
Este relatório usa exatamente esses tokens: o botão de tema, no canto superior, alterna entre os dois blocos.
Contraste — pares de uso
WCAG 2.1: AAA ≥ 7 · AA ≥ 4,5 · AA texto grande e componentes ≥ 3. Calculado a partir dos valores reais das cores.
Par
Amostra
Contraste
Resultado
Preto sobre Lime
Aa Mindflow
17,87 : 1
AAA
Lime sobre Preto
Aa Mindflow
17,87 : 1
AAA
Branco sobre Preto
Aa Mindflow
21,00 : 1
AAA
Preto sobre Branco
Aa Mindflow
21,00 : 1
AAA
Lime sobre Branco
Aa Mindflow
1,17 : 1
Falha
Lime 700 sobre Branco
Aa Mindflow
4,70 : 1
AA
Branco sobre Flow Blue
Aa Mindflow
4,02 : 1
AA texto grande
Branco sobre Flow Lilac
Aa Mindflow
2,74 : 1
Falha
Preto sobre Flow Lilac
Aa Mindflow
7,67 : 1
AAA
Mono 600 sobre Branco
Aa Mindflow
5,77 : 1
AA
ink-faint (claro) sobre Branco
Aa Mindflow
4,63 : 1
AA
Mono 400 sobre Preto
Aa Mindflow
8,28 : 1
AAA
Tipografia — PP Mori
Aa
PP Mori, da fundição Pangram Pangram, é uma sans serif de construção inspirada no design japonês contemporâneo: clareza e funcionalidade, com detalhes formais que dão personalidade às letras e muitos pesos para montar hierarquia. Foi escolhida para não cair em Inter, Roboto ou Helvetica — fontes excelentes, mas genéricas para este projeto. É usada em todo o sistema, do brandbook ao produto.
Pesos
Mindflow
Regular · 400
Texto corrido e legendas.
Mindflow
Medium · 500 principal
Títulos, interface e o wordmark.
Mindflow
Semibold · 600
Ênfase curta e rótulo ativo.
Mindflow
Bold · 700
Reservado; fora do uso atual do dashboard.
Peso principal: Medium, não Semibold
O peso principal passou de Semibold para Medium. O Semibold traz mais presença e afirmação; o Medium mantém estrutura e legibilidade com menos rigidez. A tipografia não precisa parecer que está dando uma ordem, precisa orientar.
Semibold · antes
Você precisa fazer isso.
Medium · agora
Esse é o próximo passo possível.
Escala tipográfica (proposta)
Corpo em 16 px com entrelinha de 155%, para o texto respirar. Todos os títulos em Medium.
DisplayMedium · 64 / 105% · −2%
Um passo possível
Chamadas de apresentação, capas e hero.
H1Medium · 40 / 115% · −1,5%
Central do projeto
Título de página.
H2Medium · 28 / 120% · −1,5%
Fundamentação teórica
Títulos de seção.
H3Medium · 20 / 125% · −1%
Registro de emoção
Subtítulos e rótulos de linha.
LeadRegular · 18 / 155%
Ponto de entrada do TCC: relatório, arquivos, apresentações e protótipo.
Texto de abertura.
BodyRegular · 16 / 155%
Nenhuma tarefa é grande demais quando o próximo passo é pequeno.
Texto corrido.
SmallRegular · 14 / 150%
Atualizado ao longo do semestre 2026/2.
Apoio e notas.
CaptionRegular · 12 / 140%
São Paulo, SP · Semestre 2026/2
Metadados e rodapé.
LabelMedium · 12 / 140% · +2%
06.1 · Escala de pesos
Numeração e rótulos.
Fazer
PP Mori em todos os textos da marca, respeitando a hierarquia de pesos. Medium como peso principal; Regular no texto corrido. Entrelinha de 155% no corpo.
Evitar
Trocar a PP Mori por Inter, Roboto ou Helvetica nos materiais oficiais. Voltar ao Semibold em títulos e chamadas. Texto de corpo com menos de 4,5 : 1 de contraste.
Imagem, composição e voz
Direção de imagem
A curadoria visual parte de plataformas como Savee e Cosmos, bancos de referência usados para mapear tendências de moodboard antes de qualquer decisão de fotografia ou ilustração. A busca não foi por imagens “bonitas”, mas por imagens que comunicassem os mesmos valores do produto: gradientes de céu (luz de amanhecer ou entardecer, transições suaves), formas orgânicas e botânicas (nunca geometria rígida ou grids técnicos) e espaço negativo (composições respiráveis, evitando still lifes de produtividade, como mesas cheias de post-its, laptops e cronômetros). Cada imagem passa pelas cinco sensações:
Sensação
Como aparece na imagem
Acolhimento
A imagem precisa parecer um convite, nunca uma cobrança.
Sem pressão
Nada de contadores, relógios ou barras de progresso agressivas em destaque.
Leveza
Composições com espaço negativo — o oposto de feeds saturados de produtividade.
Fluxo
Preferência por movimento suave — água, luz, tecido ao vento — nunca imagens estáticas e rígidas.
Autocompaixão
Presença humana mostrada em repouso ou pausa, nunca em performance ou correria.
Composição
Grid de 12 colunas
O mesmo que posiciona o símbolo: alinhamento consistente entre brandbook, site e produto, sem composições arbitrárias.
O gradiente como campo atmosférico
Fundo de transição, faixa hero ou momento de destaque, sempre com espaço para respirar: luz ambiente, não papel de parede. Nunca atrás de texto de corpo; se houver texto sobre ele, um overlay escuro (preto a 20–40%) ou claro por trás.
Marca como framework
Do conceito de Brand-Driven Interfaces (Victor Belinatti, Work&Co): a marca não é colada na interface, ela ajuda a construí-la — marca, sistema, interface, funcionalidade. Por isso o gradiente também vive dentro do Mood Meter.
Voz e comunicação
Direto ou acolhedor
O próprio app deixa a pessoa escolher o tom das recomendações. A marca fala nos dois registros, nunca nos dois ao mesmo tempo.
Nunca diagnóstico
Observamos padrões, não damos veredito. Insights são descritivos, não avaliações de bom ou mau comportamento.
Sem pressa, sem julgamento
Nenhum texto cobra, apressa ou compara. Cada frase dá espaço para o estado real da pessoa, não para o ideal.
01
Nenhuma tarefa é grande demais quando o próximo passo é pequeno.
02
Não existe um jeito certo de ter um dia. Existe um próximo passo possível para cada um.
03
O Mindflow não mede o quanto você produziu. Mede o quanto você pode.
Aplicação e ativos
Cada aplicação da identidade — no produto, em posts, em apresentações — mantém a mesma sensação de acolhimento e leveza. Por isso o símbolo, a cor e a tipografia seguem regras simples, pensadas para proteger a personalidade da marca.
01
Usar a flor sempre nas proporções e no ângulo originaisSem distorcer ou espelhar.
02
Manter uma área de respiro ao redor do símboloNada colado nas pétalas.
03
Aplicar apenas as cores aprovadasPreto, branco, o Gradiente Flow ou o verde-limão.
04
Usar a PP Mori em todos os textos da marcaRespeitando a hierarquia de pesos.
05
Deixar o símbolo respirar sobre fundos de alto contrasteClaros ou escuros.
Acessibilidade
Contraste mínimo
Texto de corpo com pelo menos 4,5 : 1 (WCAG AA). Texto grande (18 px+ em negrito, 24 px+ em regular) e componentes de interface podem usar 3 : 1.
Testar sempre em par
Nenhuma cor da paleta é acessível sozinha: o contraste depende da combinação com o fundo.
Zoom e reflow
Layouts continuam legíveis com texto ampliado até 200%, sem sobreposição nem corte de conteúdo.
Kit de ativos
Montado no Figma a partir dos componentes de logo, com exportação pronta:
App icon — lime, preto e gradienteAvatar — lime e pretoFavicon — 64 e 32 pxBanner — 1500 × 500 pxSímbolo — SVG e PNGPaleta — HEX
Um exemplo de aplicação
Este próprio relatório e o dashboard do projeto aplicam o sistema: PP Mori, preto e branco como estrutura, o verde-limão como marca-texto, o gradiente só na faixa da Home e o layout minimalista em linhas “rótulo | conteúdo” do brandbook.
Nota de coerência: marca ≠ paleta do check-in
A paleta de marca é uma decisão separada da paleta funcional dos quatro quadrantes do Mood Meter (vermelho, amarelo, azul e verde — ver Fundamentação científica). São dois sistemas cromáticos com propósitos diferentes: um representa a marca, o outro representa estado emocional em tempo real. A identidade é o universo principal e reconhecível; o Mood Meter o expande com as quatro cores dos estados. Por isso o verde-limão nunca representa uma emoção e nenhuma cor de estado vira cor de marca ou de botão.
Em aberto
Aplicar a identidade às telas do protótipo do app, que ainda usa a paleta anterior (ver UI); formalizar o sistema de componentes; estender a escala 50–950 ao Flow Blue e ao Flow Lilac (por ora só o Lime e o Mono têm escala).
UX
A pesquisa, o entendimento do usuário e o racional de cada decisão de fluxo.
Pesquisa de usuário
92,7%
dificuldade de foco ou organização na rotina
51,2%
dificuldade de iniciar tarefas já conhecidas
95,1%
reação favorável ao check‑in adaptativo
78,1%
valorizam quebrar tarefas e ver só o próximo passo
53,7%
abandonam apps por esquecimento, não por interface ruim
8
concorrentes no benchmarking — nenhum cruza os 3 eixos do Mindflow
Achados qualitativos: pedidos por personalização, IA conversacional como "destravadora", expectativas de tom conflitantes (objetividade vs. estímulo emocional) e pedido de integração com Trello/Notion. Limitação reconhecida: amostra de conveniência, n=41.
Cada jornada mapeia 12 fases — de contexto a retenção — com curva emocional, pain points e oportunidades. 4 das 9 personas têm jornada completa até agora.
Pressão Financeira
Pedro Henrique — chega tenso sobre metas e dinheiro, encontra alívio ao ver a rotina se adaptar, termina em confiança.
Completar jornada para as 5 personas restantes, ou justificar formalmente que as 4 mapeadas já cobrem as três camadas de situação (estrutural/situacional/combinada) como amostra representativa. A decidir antes do relatório final.
Racional do modelo de interação — check-in emocional
Quatro razões sustentam Russell sobre Plutchik para este produto especificamente: categorias discretas não representam estados contínuos; Plutchik não mede capacidade de ação (só o eixo de ativação de Russell permite estimar energia disponível); o foco é estado momentâneo, não classificação; e a interface exploratória do Mindflow exige um modelo igualmente contínuo — a estrutura radial de Plutchik conduz a seleção entre categorias fechadas, o Circumplex permite qualquer posição no plano.
Por isso o check-in é gestual, não um formulário: posição, pressão e trajetória do gesto na superfície emocional são o próprio dado de entrada (Direct Manipulation, Shneiderman, 1983), a interface sugere seu uso sem instrução textual (Affordance, Norman, 2013), e nomear uma emoção por gesto é via mais direta que escolher uma palavra numa lista, especialmente sob sobrecarga emocional (embodied cognition, Wilson, 2002).
Splash→Onboarding / Home→Check‑in (Mood Meter)→Refinar emoção→Integração de tarefas→Motor de adaptação (IA)→Primeiro passo→Execução→Histórico→Home atualizada
Arquitetura de informação & funcionalidades centrais
Modo Capacidade Disponível
Check‑in por seleção visual rápida ou linguagem natural.
Sistema de Ação Mínima
Mostra apenas o próximo passo possível, nunca a lista inteira.
Sistema Anti‑Abandono
Reentrada sem julgamento: "Você parou aqui. Tudo bem."
Trilha
Camada de reflexão — visão geral, resumo por período, estado predominante, linha do tempo.
IA como camada leve
Converte linguagem natural em tarefa e quebra tarefas grandes.
Integrações
Notion, Jira, ClickUp, Todoist e apps de saúde — camada complementar, não substituta.
Pendente: geração de alternativas e seleção para fluxo/wireframes de baixa fidelidade das telas ainda não prototipadas.
UI
Onde Brand e UX viram interface de verdade.
Protótipo navegável — parcial, publicado
O fluxo de check-in emocional já está implementado em código e navegável — não é wireframe estático, é interface funcional. As demais telas do fluxo (Trilha, integrações, onboarding completo) ainda não foram prototipadas.
Pendente
Wireframes de média/alta fidelidade para as telas restantes; aplicação formal da identidade visual às telas (cor por quadrante emocional, tipografia, iconografia); sistema de componentes/design system.
Dev
A lógica de funcionamento e a implementação técnica — como o sistema decide, e como isso vira código.
Modo de Carga Mínima — agenda limpa, 1–2 tarefas essenciais, pausas longas
🟢 Estável
Calma, contentamento — fluxo estável, sensação de controle
Rotina previsível em blocos (ex.: Pomodoro 25/5)
Arquitetura técnica & integrações
Protótipo atual: HTML/CSS/JS estático, publicado como demonstração navegável do fluxo de check-in. Integrações planejadas — Notion, Jira, Linear, ClickUp, Todoist via API/OAuth (preservando a ferramenta original como fonte da verdade) e apps de saúde (Samsung Health, Apple Health, Google Fit) — estão especificadas no briefing, mas não implementadas no protótipo atual.
Arquitetura de produto real (mobile nativo/PWA/backend) — a definir com o orientador
Resultado
O que foi testado, o que se aprendeu, e o registro rastreável de tudo.
Validações — pendente
Testes de usabilidade com mínimo de 5 participantes representativos do público-alvo. Roteiro sugerido: validar os riscos já identificados na pesquisa — ansiedade por notificação, tom de voz, curva de retenção.
Documentação do processo: transversal a todas as seções acima — pesquisa, personas, jornadas, alternativas, seleção, protótipo — cada uma rastreável à sua fonte original.
05
Considerações finais
Sobre
Ainda é cedo no semestre para fechar esta seção — os testes de usabilidade (Resultado) precisam acontecer primeiro. O que já dá para nomear são as limitações assumidas até aqui.
Reflexões
A escrever após os testes de usabilidade
Esta seção vai amarrar de volta à justificativa: o que os testes confirmaram ou refutaram da hipótese original, o que ficou validado como diferencial real de mercado.
Limitações & próximos passos
01
Amostra de pesquisa por conveniêncian=41, não probabilística — resultados são tendência dentro do perfil, não representam a população geral.
02
Ausência de entrevistas estruturadasCamada qualitativa vem de respostas abertas espontâneas, não de roteiro dedicado.
03
Jornadas mapeadas para 4 de 9 personasDecisão em aberto — completar ou justificar formalmente a amostra como representativa.
04
Identidade visual finalConceito, símbolo, logo, paleta, tipografia e regras de uso prontos no brandbook; falta aplicar a identidade às telas do app e formalizar o sistema de componentes.
05
Protótipo navegável completoCheck-in publicado; Trilha, integrações e onboarding completo ainda pendentes.
06
Testes de usabilidadeMínimo de 5 participantes — próximo grande bloco do semestre.
06
Referências
Sobre
Consolidado de todas as fontes citadas no briefing, na fundamentação teórica aprofundada, na pesquisa e na fundamentação de formas e cores — ordem alfabética, sem duplicatas.
AMABILE, T. M.; KRAMER, S. J. The Progress Principle: Using Small Wins to Ignite Joy, Engagement, and Creativity at Work. Boston: Harvard Business Review Press, 2011.
ARNHEIM, R. Arte e percepção visual: uma psicologia da visão criadora. São Paulo: USP, 1980.
BAKKER, D.; KAZANTZIS, N.; RICKARD, D. Mental health smartphone apps: review and evidence-based recommendations for future developments. JMIR Mental Health, v. 3, n. 1, p. e7, 2016.
BANDURA, A. Self-Efficacy: Toward a Unifying Theory of Behavioral Change. Psychological Review, v. 84, n. 2, p. 191–215, 1977.
BAR, M.; NETA, M. Visual elements of subjective preference. Psychological Science, v. 17, n. 8, p. 645–648, 2006.
BARRETT, L. F. How Emotions Are Made: The Secret Life of the Brain. Boston: Houghton Mifflin Harcourt, 2017.
BHANDARKAR, A. M. et al. Productivity apps for attention deficit hyperactivity disorder: an overview. Cureus, v. 16, n. 3, 2024.
CAMPBELL, A.; ÇERÇI, S.; CECCHINATO, M. E. AI-powered tools for ADHD: opportunities and challenges. CHI Conference on Human Factors in Computing Systems, 2024.
CHAN, L. et al. Daily mood and activity patterns: a longitudinal study. Journal of Affective Disorders, 2024.
CSIKSZENTMIHALYI, M. Flow: The Psychology of Optimal Experience. New York: Harper & Row, 1990.
ĆWIEK, A. et al. The bouba/kiki effect is robust across cultures and writing systems. Philosophical Transactions of the Royal Society B, v. 377, n. 1841, 2021.
DAI, H.; MILKMAN, K. L.; RIIS, J. The Fresh Start Effect: Temporal Landmarks Motivate Aspirational Behavior. Management Science, v. 60, n. 10, p. 2563–2582, 2014.
DECI, E. L.; RYAN, R. M. Self-Determination Theory: Basic Psychological Needs in Motivation, Development, and Wellness. New York: Guilford Press, 2017.
DOIST. Introducing Todoist Ramble: AI that turns natural speech into structured tasks. PR Newswire, 21 jan. 2026.
FOGG, B. J. Tiny Habits: The Small Changes That Change Everything. Boston: Houghton Mifflin Harcourt, 2019.
FOREST APP. Forest: the #1 focus app for time well spent. Seekrtech, 2026. Disponível em: forestapp.cc. Acesso em: 24 jun. 2026.
GROSS, J. J. Emotion regulation: current status and future prospects. Psychological Inquiry, v. 26, n. 1, p. 1–26, 2015.
HARVARD MEDICAL SCHOOL. Overwork and burnout: the hidden cost of productivity culture. Harvard Health Publishing, 2017.
HOOD, S. D. et al. Acute stress and its effects on cognitive performance. Neuroscience & Biobehavioral Reviews, v. 56, p. 55–70, 2015.
HOW WE FEEL PROJECT. How we feel. New Haven: Yale Center for Emotional Intelligence, 2026. Disponível em: howwefeel.org. Acesso em: 24 jun. 2026.
KAHNEMAN, D. Thinking, Fast and Slow. New York: Farrar, Straus and Giroux, 2011.
KRUG, S. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. 3. ed. Berkeley: New Riders, 2014.
LUDAXIS. The psychology of gamification: a deep dive into Duolingo. 2026. Disponível em: ludaxis.io. Acesso em: 24 jun. 2026.
MA, Y. Decision fatigue: cognitive depletion through everyday choices. The Decision Lab, 2024. Disponível em: thedecisionlab.com. Acesso em: jun. 2026.
MASLACH, C.; LEITER, M. P. The Burnout Challenge: Managing People's Relationships with Their Jobs. Cambridge: Harvard University Press, 2022.
MAYER, J. D.; SALOVEY, P. What is emotional intelligence? In: Emotional Development and Emotional Intelligence: Educational Implications. New York: Basic Books, 1997.
MCADAMS, D. P. The Psychology of Life Stories. Review of General Psychology, v. 5, n. 2, p. 100–122, 2001.
MINDFLOW (EQUIPE). Questionário de pesquisa de usuário Mindflow: dados brutos. São Paulo: Universidade Anhembi Morumbi, 2026. Documento de trabalho interno.
MOODGRADE. Best mood tracking apps in 2026: an honest comparison. 2026. Disponível em: moodgrade.com. Acesso em: 24 jun. 2026.
NORMAN, D. A. The Design of Everyday Things. 2. ed. New York: Basic Books, 2013.
NORMAN, D. A. Emotional Design: Why We Love (or Hate) Everyday Things. New York: Basic Books, 2004.
NOTION LABS. Notion: the AI workspace that works for you. 2026. Disponível em: notion.com. Acesso em: 24 jun. 2026.
PLUTCHIK, R. A General Psychoevolutionary Theory of Emotion. In: PLUTCHIK, R.; KELLERMAN, H. (org.). Emotion: Theory, Research and Experience. New York: Academic Press, 1980. (citado para contraste metodológico — ver Fundamentação Científica)
RAMACHANDRAN, V. S.; HUBBARD, E. M. Synaesthesia: A window into perception and thought. Journal of Consciousness Studies, v. 8, n. 12, p. 3–34, 2001.
RUSSELL, J. A. A Circumplex Model of Affect. Journal of Personality and Social Psychology, v. 39, n. 6, p. 1161–1178, 1980.
SCHUELLER, S. M. et al. Efficacy of self-guided digital mental health interventions: a meta-analysis. Psychological Medicine, v. 51, n. 12, p. 2015–2025, 2021.
SHNEIDERMAN, B. Direct Manipulation: A Step Beyond Programming Languages. IEEE Computer, v. 16, n. 8, p. 57–69, 1983.
SINGH, B. et al. How much time does it take to form a habit? A scoping review. Healthcare, v. 12, n. 2, 2024.
SWELLER, J. Cognitive load during problem solving: effects on learning. Cognitive Science, v. 12, n. 2, p. 257–285, 1988.
THE SUNRISE DIGEST. Headspace review 2026: the starter meditation app that stopped evolving. 2026. Disponível em: thesunrisedigest.com. Acesso em: 24 jun. 2026.
UX COLLECTIVE BRASIL. Habitunes: transformando a construção de hábitos em uma experiência musical e divertida com UX. 2025. Disponível em: brasil.uxdesign.cc.
VYTAL, K. E. et al. The functional anatomy of anxiety. Psychological Bulletin, v. 139, n. 3, p. 710–729, 2013.
WILSON, M. Six Views of Embodied Cognition. Psychonomic Bulletin & Review, v. 9, n. 4, p. 625–636, 2002.
ZEIGARNIK, B. Das Behalten erledigter und unerledigter Handlungen. Psychologische Forschung, v. 9, p. 1–85, 1927.