The Serene
Anchor
A design language built to provide an ethereal sanctuary. Precision and focus delivered through intentional asymmetry and refined structure.
Vibrant Serenity Palette
"Moving from deep, authoritative teals to translucent mints."
Cores de Base
Cores de Acento
Typography Scale
Eu lembro por você
Prática de Meditação Matinal
Designed to create a sense of depth and empathy for cognitive support.
Structural separation must be achieved through tonal shifts and intentional negative space rather than rigid 1px borders.
Glass Card
14px radius, 1px white border (ghost fallback), 24px blur background.
Interactive
Componentes do Myndit
Todos os blocos abaixo espelham os padrões do UX-UI_Myndit.html. Layout exato, mesmas classes, mesmas proporções.
TopAppBar
Header fixo com título + avatar.
Pendências
BottomNavBar
Nav inferior com blur e cantos arredondados.
Reminder Input (Textarea)
Glass card com textarea + mic — padrão da tela Tasks.
Filter Chips
Ativo: secondary-container. Inativo: branco + borda sutil.
Task Card (Glass)
Card padrão da lista de pendências.
Sessão de Meditação Diária
radio_button_uncheckedOrganizar espaço de trabalho
radio_button_uncheckedGrid Cards (Square)
Cards quadrados para hábitos rápidos.
Beber Água
Próximo: 16:00
Insight
Escrever no jornal
Bottom Sheet (Detalhe)
Modal que sobe do rodapé com ações: "Já fiz", "Adiar", "Excluir".
Prática de Meditação Matinal
Dedique 15 minutos para respirar profundamente e alinhar suas intenções para o dia.
FAB (Floating Action Button)
Botão flutuante gradiente — posição bottom-right.
Gradient primary → primary-container, sombra teal.
Login Card (Glass)
Form dentro de glass-card com tabs Login/Cadastro.
Social Auth & Divider
Separador "Ou continue com" + botões sociais glass.
Onboarding Card
Glass card com título 34px, progress dots e CTAs.
Eu lembro por você
Libere espaço mental para o que realmente importa.
Profile Header
Avatar gradiente + badge verified + tag "Mente Serena".
Alex Santos
Stats Grid
Cards quadrados glass com ícone + número + label.
Settings List
Linhas com ícone, label e chevron/toggle.
Preferências
Progress Banner
Card gradiente com barra de progresso.
Próximo Nível
Faltam 12 tarefas para o selo "Mestre do Foco"
Focus Timer
Círculo com timer e borda animada.
Tempo de Respiração
Foque apenas na sua respiração.
Danger / Logout
Ações destrutivas pedem confirmação (regra do projeto).
Myndit Sanctuary — 2024
Interação & entrada
Hover nos botões e ícones, swipe em card (demo web), reveal no scroll e stagger de entrada. Em RN: react-native-reanimated + gestos.
Swipe (lista)
Arraste o card: esquerda = adiar (âmbar), direita = concluir (verde). Solte para voltar ao centro.
Beber água às 15h
Demo — gesto nativo no app
Barra de ícones (hover)
Ícones neutros → teal + fundo menta no hover (padrão .ds-icon-row).
Componentes para evoluir o produto
Blocos ainda não obrigatórios no MVP, mas alinhados ao Myndit — prontos para quando fizerem sentido (busca global, onboarding longo, trial, etc.).
Busca + sugestões
- meditação
- remédio manhã
Tabs segmentadas
Accordion (FAQ / ajuda)
Como funcionam as re-notificações? expand_more
Até 3 re-lembretes a cada 10 minutos, depois o item pode ir para sem retorno — alinhado às regras do app.
Dados ficam no dispositivo? expand_more
Offline-first: SQLite local + fila de sync com Supabase quando houver rede.
Stepper (onboarding longo)
Passo 3 de 4 — use para fluxos que não couberem no onboarding mínimo atual.
Avatar stack
Compartilhamento futuro ou modo família.
Snackbar / toast
Skeleton (loading)
Lista a carregar sem bloquear a tela inteira.
Tooltip (hover)
Web: CSS puro. Nativo: Pressable + posicionamento.