Design e sistema — Frowexa
Documento em duas frentes — Landing Page e Aplicação — com foundation (cores, tipografia, hierarquia, espaçamento) e a forma como cada superfície aplica o sistema às suas premissas.
1. Papel de UI e UX
UI cuida de legibilidade, consistência, hierarquia, estados e componentes. UX cuida de tarefa, expectativa, erros e confiança. A mesma base visual serve duas leituras: a landing apresenta e convence; o app permite modelar e auditar — por isso as premissas e o desenho não são intercambiáveis, só alinhados.
2. Foundation (guia rápido)
Exemplo de tokens e decisões de base comuns — a landing e a app compartilham a paleta e a escala de texto base; a landing acrescenta camada de display (títulos de marketing).
2.1. Paleta e papéis de cor
Neutros (fundo, superfície, texto): universo escuro com texto claro, cartões ligeiramente elevados e bordas discretas.
| Papel | Uso | Exemplo (token → valor) |
|---|---|---|
| Neutro · fundo do canvas | Área global atrás de fluxo e tabela; base da landing. | canvas-bg → #111111 |
| Neutro · cartão / painel | Cartões do fluxo, toolbars, blocos de conteúdo. | card-bg → #1c1c1c |
| Neutro · borda / divisão | Contorno de cartões, separadores, inputs. | card-border → #2a2a2a |
| Neutro · texto (níveis) | Primário (corpo), secundário (apoio), desativado/legenda. | text-primary → #fafafa · text-secondary → #a1a1aa · text-muted → #71717a |
| Cor primária (acento) | Destaque de ação, origem no fluxo, foco e ligação ao “começo lógico” do modelo. | accent-origem → #3b82f6 |
| Cor secundária (destaque alternado) | Leitura de etapa/resultado sem competir com o primário; camada de leitura “fria” no fluxo. | accent-resultado → #94a3b8 |
| Semântica (operações) | Diferença visual entre tipos de transformação lógica no grafo (ex.: sinal de operação). | op-plus / minus / div / … (verdes, vermelhos, laranja, roxo, etc.) |
| Foco | Anel de foco visível em controles, coerente com o acento. | focus-ring → rgba(59, 130, 246, 0.45) |
2.2. Tipografia
- Aplicação (UI geral): DM Sans — corpo, rótulos, painéis, formulários. Base 1 rem = 16px.
- Aplicação (fluxo denso): Roboto Condensed — títulos/rotulagem compacta no canvas e tabela, onde o alinhamento e a densidade importam.
- Landing (display): Outfit — títulos fortes e hierarquia de marketing; a landing mantém a mesma base DM Sans no corpo.
- Escala na landing (fluida): títulos de seção e display usam tamanhos em clamp() (ex. --lp-type-h2, --lp-type-display) para crescer com o tela sem perder tamanho mínimo legível.
2.3. Hierarquia visual (resumo)
| Nível | Landing | Aplicação |
|---|---|---|
| 1 — Título de impacto | Display / h1 de seção: promessa e âncora emocional. | Nome do fluxo, presença do canvas: foco da tarefa. |
| 2 — Contexto | Leads e parágrafos introdutórios, faixa de leitura 45–60ch em blocos longos. | Subtítulos de nós, colunas de tabela, rótulos de módulo. |
| 3 — Ação e detalhe | CTAs (primário + secundário), legendas, microcopy. | Botões de barra, inputs, ações de nó, leitura de impacto numérico. |
2.4. Espaçamento, raios e ritmo
Landing — exemplos (tokens de respiro): margem horizontal da grade ~28px, seções com padding vertical largo (ex. 72px / 92px) entre blocos, gaps de grade de cartões ~48px (denso ~28px), espaço após título/lead (ex. 20px / 44px).
Aplicação — exemplos: raios de ~12px em controles e painéis (ex. zoom), cartões alinhados ao card-bg; padding de cartão confortável à leitura, sem “máxima densidade” em todo o tela — só na tabela/fluxo onde é intencional.
Princípio: a landing respira (story, prova, CTA); o app compacta onde o modelo o exige (célula, nó) e abre onde a pessoa toma decisão (ferramentas, painel de regras).
3. Landing Page
3.1. Premissas
- Contar a promessa e mostrar o produto com prova (mídia, passos) antes do detalhe técnico.
- Conduzir a uma ação clara: testar, explorar, ou pedir acesso, sem forçar o usuário a “aprender a app” na página.
- Reutilizar a mesma linguagem cromática e de superfícies do produto, com escala tipográfica maior no display (Outfit) e narrativa com mais respiro entre blocos do que o denso padrão de modelação.
- Respeitar leitura longa, escaneabilidade, e acessibilidade pública (contrastes, foco, atalho “saltar conteúdo”, seções tituladas).
3.2. Aplicação do design (como o sistema se cumpre aqui)
A landing organiza a página em seções sequenciais (promessa, pipeline com prova, produto, módulos, contato) com títulos fortes, leads legíveis e padrão repetido de CTA. O fundo usa grade pontilhada sutil (textura de leitura, não ruído) sobre o canvas-bg. Mídias (imagem, vídeo) seguem o mesmo quadro / moldura (bordas, raio, sombra) para a prova visual parecer unidade de produto, não captura avulsa. A pilha de marketing reutiliza a escala de tipos de landing, com microcopy, legendas e seções acessíveis. O efeito procurado: o visitante reconhece o universo do app (escuro, cartões, azul de acento) e entende a narrativa, sem ainda interagir com o canvas completo.
4. Aplicação (produto)
4.1. Premissas
- Centrar a pessoa no modelo — a área de trabalho é o fluxo, não a moldura de marketing.
- Deixar o raciocínio encadeado e auditável: origens, etapas, ligações e impacto, sem o número “não explicado”.
- Separar a base de fluxo e a camada financeira (regras, ordem, impacto) sem confundir as duas linguagens no mesmo controle opaco.
- Resistir a ruído: densidade onde o modelo a precisa (nós, tabela); ações fortes e leitura de estado sem animação desnecessária.
- Acessibilidade de uso: foco, teclado, e estados de seleção/erro compreensíveis no produto, não só na landing.
4.2. Aplicação do design (como o sistema se cumpre aqui)
O canvas repousa sobre fundo e grade neutros, com cartões (origem, etapa, resultado) e ligações com estados e operações claramente distinguíveis. Cores e peso visual seguem a semântica (origem, resultado, tipo de ligação). A barra de título e controles de vista dão estado e controle de zoom/área de trabalho; a barra de ações do canvas concentra a próxima ação previsível (adicionar, ferramenta). A tabela do fluxo projeta a mesma cadeia com tipografia condensada alinhada, para leitura tabular, auditoria e explicação a terceiros. O módulo financeiro aprofunda em área lateral ou contextual com a ordem e o efeito das regras visíveis e sequenciais, fechando a heurística de “sem caixa negra” entre premissa e resultado. No estado vazio, a app mostra passos de onboarding com verbos e ordem, orientando a primeira tarefa sem desviar a atenção do fluxo. O anel de foco e a ordem lógica de interação reforçam o uso com teclado e leitores, no mesmo contraste base da foundation.
5. Heurísticas de Nielsen (landing vs. app)
Resumo: a mesma heurística com ênfase diferente — na landing, clareza de promessa e prova; no app, controle, estado e cadeia explícita.
| # | Heurística (resumida) | Na landing | No app |
|---|---|---|---|
| 1 | Visibilidade de estado | Seção clara, progressão da história, CTAs “onde esperamos”. | Zoom, título do fluxo, tabela a refletir a cadeia; cálculo visível no percurso. |
| 2 | Correspondência ao mundo real | Vocabulário de negócio: premissas, etapas, impacto, trial. | Mesma linguagem nos nós; tabela conhecida de revisão de números. |
| 3 | Controle e liberdade | Rotas e CTAs: explorar, testar, voltar, sem “armadilha”. | Desfazer, ajustar premissa, recompor a cadeia com previsibilidade. |
| 4 | Consistência e padrões | Mesma paleta e padrão de blocos, hero → seção → CTA coerente. | Mesmas famílias, estados, cartão e bordas em todo o fluxo. |
| 5 | Prevenção de erros | Prova e microcopy reforçam o que a pessoa obtém, antes do erro de expectativa. | Relações e regras expostas; evitar composições inválidas por desenho. |
| 6 | Reconhecimento (não memória) | Argumentos e ilustração fixos na página, escaneáveis. | Cartões, rótulos, ligação visível, sem “fórmula invisível”. |
| 7 | Flexibilidade/eficiência | Leitura rápida (scan) + profundidade opcional (documentos, seções longas). | Modelar de forma contínua; tabela e canvas como atalho cognitivo. |
| 8 | Estética minimalista | Prova mínima necessária para vender a ideia, sem recheio. | Informação só onde a tarefa exige, sem enfeite que roube foco ao grafo. |
| 9 | Reconhecer/ corrigir erros | Clarificar promessa, antecipar dúvida, CTAs alinhados ao valor. | Estados, bloqueios, mensagem acionável, não jargão interno. |
| 10 | Ajuda e documentação | Conteúdo de landing + seções; orientação in-page. | Onboarding mínimo no contexto de uso, sem manual obrigatório no primeiro uso. |
6. Contraste e legibilidade (compartilhado)
Tanto a landing quanto o app se baseiam no contraste de text-primary e níveis de secundário/muted sobre fundos e cartões escuros. Ajustes em estados (hover, foco) revalidam a leitura, principalmente em rótulos pequenos e nos números de tabela. A landing, por narrar mais, beneficia de mais respiro; a app, por apresentar mais densidade, beneficia de alinhamento tipográfico e nítido traço de grade e bordas.
7. Acessibilidade (alinhada à foundation)
- Perceptível — textos, contraste, foco anelado; a landing inclui títulos de seção e “saltar conteúdo” onde aplicável.
- Operável — ações acessíveis via teclado, ordem lógica; no app, ordem de leitura que respeita fluxo (modelo) antes de ações fortes após a tabela, quando a tarefa o permite.
- Compreensível — rótulos de negócio, feedback em linguagem de tarefa; coerente entre marketing e interface.
- Robusto — documento HTML semântico na landing; no app, componentes e estados que evoluam de forma previsível para tecnologias assistivas, em melhoria contínua (WCAG 2.1 como referência, não ponto fixo congelado). Movimento: preferir animações meramente reforçadoras, com vias de reduzir movimento para quem necessita.
8. Sistema, consistência e evolução
Tokens de cor, tipo e respiro permitem ajuste global. Quando a base se altera, ambas as superfícies tendem a herdar a mesma decisão, variando escala (landing) e densidade (app), não a identidade. Protótipos e documentação (como este arquivo) servem para a decisão de design ser rastreável, comparável e replicada.
9. Síntese
Landing aplica a foundation para explicar e provar com leitura generosa. Aplicação aplica a foundation para modelar, comparar e auditar com concentração. O que une as duas é a mesma promessa: o raciocínio fica visível, compartilhável e alinhado ao desenho do sistema.
Referência de teoria: heurísticas de Nielsen. Critérios de acessibilidade: WCAG 2.1 como orientação. Valores concretos de tokens acompanham a evolução do produto, mantendo os papéis (neutro, acento, semântica) acima de qualquer ajuste puntual de hex.
90% da documentação foi gerada por IA dentro dos contextos e intenções do autor.