--- stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] inputDocuments: - prd.md - product-brief.md - research.md - brainstorm.md - prd-validation-report.md date: 2026-03-08 --- # UX Design Specification - Jus IA Start Kit **Author:** Gabriel Vaz **Date:** 2026-03-08 --- ## Executive Summary ### Project Vision O Jus IA Start Kit é um assistente web que funciona como "tradutor de intenção jurídica": o advogado responde perguntas sobre seu caso em linguagem jurídica e é redirecionado ao Jus IA com um pedido otimizado pronto para gerar resultado de alta qualidade na primeira tentativa. A experiência abstrai completamente o conceito de prompt engineering — o advogado nunca vê um prompt, nunca edita código, nunca precisa saber como falar com IA. A mecânica central é um fluxo híbrido: perguntas estruturadas (determinísticas) coletam dados do caso, seguidas de refinamento contextual por IA (não-determinístico) que captura nuances. O resultado é montado nos bastidores e entregue ao Jus IA via URL parametrizada ou fallback copy-paste. ### Target Users **Dra. Carla — A Resistente Pragmática** (primária): Advogada autônoma, 42 anos, trabalhista. Nunca usou IA, gasta 2-3h por petição. Precisa de resultado comprovável na primeira tentativa, sem investir tempo aprendendo. Abre o Start Kit no celular entre audiências, via link de WhatsApp. **Dr. Rafael — O Sobrecarregado Digital** (primário): Advogado autônomo, 29 anos, usa ChatGPT diariamente mas itera 3-5 vezes por petição. Sabe que IA pode ajudar mas não sabe formular o pedido certo. Precisa de um atalho que elimine o ciclo de tentativa-e-erro. **Dr. Marcos — O Dono de Escritório** (secundário): Sócio, 50 anos, equipe usa ChatGPT sem governança (Shadow AI). Precisa padronizar o uso de IA na equipe sem supervisionar cada pedido. Deep links por área funcionam como ferramenta de governança. ### Key Design Challenges 1. **Dois perfis opostos de confiança**: a mesma interface precisa transmitir segurança e credibilidade para quem nunca usou IA (Carla) e eficiência/velocidade para quem já usa diariamente (Rafael). 2. **Abstração total do prompt engineering**: linguagem 100% jurídica, zero vocabulário técnico de IA. O produto deve parecer "ferramenta jurídica", não "ferramenta de IA". 3. **Mobile-first entre audiências**: fluxo completável em <5 min com uma mão, em tela pequena, com conexão potencialmente instável. 4. **Continuidade em MPA**: cada etapa é um page load — o progresso precisa ser visualmente claro e a experiência fluida, sem sensação de formulário burocrático. ### Design Opportunities 1. **"Momento aha" no preview**: a tela que mostra o pedido montado com fundamentação jurídica específica é o ponto de materialização do valor — oportunidade de criar confiança, surprise-and-delight, e conversão. 2. **Educação implícita via perguntas**: o fluxo ensina o advogado o que é relevante para um bom pedido sem que ele perceba que está aprendendo — o UX pode amplificar esse efeito. 3. **WhatsApp como experiência de entrada**: OG tags, deep links por área, experiência de "abrir link e já estar no fluxo certo" — a primeira impressão é no mobile via WhatsApp. --- ## Core Experience Definition ### Core User Action O advogado responde perguntas sobre seu caso e recebe um pedido otimizado pronto para o Jus IA. Do ponto de vista emocional, existem apenas **dois momentos**: "estou respondendo perguntas sobre meu caso" e "recebi meu pedido pronto". Tudo entre eles deve ser invisível. ### Experience Principles 1. **Transição IA invisível**: Perguntas geradas por IA devem ser indistinguíveis das perguntas estruturadas. Quando possível, perguntas da IA devem oferecer opções pré-definidas (seleção), não campos de texto abertos. Quando texto livre for necessário, usar placeholders específicos e contextuais (ex: "Ex: não pagava horas extras e exigia trabalho aos sábados") — nunca campos genéricos vazios. O advogado não deve perceber que mudou de fase determinística para não-determinística. 2. **Velocidade é respeito — quantificada**: O fluxo inteiro (primeiro toque → botão "Gerar no Jus IA") deve ter **no máximo 4-5 telas de perguntas**. Se o advogado conta mais de 5 etapas no indicador de progresso, já parece longo. Perguntas devem ser agrupadas agressivamente por "momento mental" — na mesma tela, perguntas que pertencem ao mesmo contexto decisório (ex: "Regime de Trabalho" + jornada contratual se CLT). Perguntas de momentos mentais diferentes (ex: "Há registro de ponto?" vs "Existem testemunhas?") vão em telas separadas. 3. **Um momento mental por tela**: Cada tela tem uma decisão principal, com sub-perguntas relacionadas agrupadas abaixo. Isso reduz page loads em MPA (de 8-11 para 4-5) mantendo clareza cognitiva. Progressive enhancement com JavaScript para transições sem reload quando disponível. 4. **Preview = fundamentação jurídica como contrato de confiança**: O valor do preview não é mostrar o prompt — é mostrar **artigos, súmulas e jurisprudência** que o advogado reconhece. Quando Dra. Carla vê "art. 59 da CLT, Súmula 85 do TST", pensa: "isso eu conheço, isso é real". A fundamentação jurídica visível é o momento de conversão — a linguagem dela validando a máquina. 5. **Linguagem 100% jurídica**: Zero vocabulário técnico de IA. O produto parece "ferramenta jurídica", não "ferramenta de IA". ### Critical Success Moments 1. **Primeira pergunta (<3 segundos)**: O advogado abre o link (WhatsApp, deep link) e em menos de 3 segundos está respondendo a primeira pergunta relevante sobre seu caso. Sem onboarding, sem cadastro, sem explicação. 2. **Preview com fundamentação jurídica**: A tela que mostra o pedido montado com artigos específicos da CLT e súmulas do TST. Este é o momento de materialização do valor — "a máquina sabe o que é relevante pro meu caso". 3. **Redirecionamento ao Jus IA**: O clique final que leva ao Jus IA com tudo pronto. O resultado gerado na primeira tentativa valida toda a experiência anterior. 4. **Momento de recuperação**: Quando o advogado erra uma resposta ou quer voltar. O botão de voltar deve ser visível e óbvio. O browser back deve funcionar perfeitamente em MPA. Voltar **nunca** pode perder respostas já dadas nas telas seguintes. Confiança quebra quando o advogado sente que perdeu trabalho. ### Effortless Interactions - **Toque único por decisão**: Cada pergunta deve ser respondível com um toque (seleção, toggle, chip). Texto livre é exceção, não regra. - **Agrupamento por momento mental**: 2-3 perguntas relacionadas por tela, máximo 4-5 telas no fluxo completo. - **Placeholders contextuais**: Quando texto livre for necessário, exemplos específicos guiam a resposta (ex: "Ex: demissão sem justa causa em 15/01/2026"). - **Progresso visual claro**: Indicador de progresso mostra 4-5 etapas — nunca mais que isso. --- ## Desired Emotional Response ### Primary Emotional Goals **Para Dra. Carla (nunca usou IA):** Segurança → Surpresa → Confiança. Ela precisa sentir que está no controle (perguntas familiares sobre seu caso), ser surpreendida pelo resultado (preview com fundamentação jurídica que ela reconhece), e sair confiante de que a ferramenta funciona. **Para Dr. Rafael (usa IA mas itera):** Alívio → Revelação → Empoderamento. Ele precisa sentir alívio ao ver que as perguntas certas estão sendo feitas (não precisa pensar no prompt), revelação ao entender que o problema era o pedido e não a ferramenta, e empoderamento ao ter um caminho repetível. **Para Dr. Marcos (dono de escritório):** Controle → Praticidade → Tranquilidade. Precisa sentir que tem controle sobre como a equipe usa IA (deep links por área), que a solução é prática (sem admin panel, sem configuração), e tranquilidade de que a qualidade está garantida (base verificada do Jus IA). ### Emotional Journey Mapping | Momento | Emoção Desejada | Emoção a Evitar | Mecanismo UX | |---------|----------------|-----------------|--------------| | **Abrir o link** | Curiosidade confiante | Desconfiança, "mais uma ferramenta" | Linguagem jurídica desde o primeiro pixel, sem menção a IA/prompt | | **Primeira pergunta** | "Isso é sobre o meu caso" | "Estão pedindo meus dados" | Pergunta relevante e específica, não genérica | | **Durante o fluxo** | Fluidez, progresso | Tédio, burocracia, "formulário do governo" | Toque único, progresso visual, 4-5 telas máximo | | **Pergunta da IA** | "Boa pergunta, não tinha pensado nisso" | "Por que está perguntando isso?" | Pergunta contextual que demonstra inteligência sem parecer aleatória | | **Loading da IA** | Expectativa positiva | Ansiedade, impaciência | Indicador com microcopy: "Analisando seu caso..." (não "Processando...") | | **Preview** | Surpresa + validação | Desconfiança do resultado | Fundamentação jurídica visível (artigos, súmulas) — a linguagem do advogado | | **Redirect** | Satisfação, "funcionou!" | Medo de perder o que foi feito | Confirmação visual antes do redirect, opção de copiar | | **Resultado no Jus IA** | "Por que não fiz isso antes?" | "Preciso refazer tudo" | Prompt bem construído = resultado na primeira tentativa | ### Micro-Emotions **Críticas para o sucesso:** - **Confiança > Ceticismo**: Cada elemento visual deve reforçar credibilidade institucional (Jusbrasil como âncora de confiança) - **Competência > Confusão**: O advogado nunca deve se perguntar "o que devo fazer agora?" — a próxima ação é sempre óbvia - **Progresso > Estagnação**: Cada toque leva visivelmente adiante — barra de progresso + feedback imediato **A evitar ativamente:** - **Ansiedade**: "Estou colocando dados do meu cliente aqui?" → Microcopy: "Seus dados não são armazenados" - **Frustração**: "Perdi o que já respondi" → Estado preservado no browser back - **Condescendência**: "Isso é para quem não sabe usar IA" → Linguagem de profissional para profissional ### Emotion-Design Connections | Emoção Desejada | Decisão de UX | |-----------------|---------------| | Segurança | Sem login, sem dados retidos, disclaimer visível mas não invasivo | | Competência | Microcopy em linguagem jurídica, perguntas que demonstram expertise do sistema | | Velocidade | Toque único, agrupamento por momento mental, indicador de progresso compact | | Surpresa positiva | Preview com artigos/súmulas específicos — "a máquina sabe direito" | | Controle | Botão voltar visível, browser back funcional, opção de copiar antes do redirect | ### Emotional Design Principles 1. **Credibilidade antes de tudo**: A primeira impressão determina se Carla continua ou fecha. Cada pixel deve comunicar "ferramenta jurídica profissional", não "startup de IA". 2. **Inteligência demonstrada, não declarada**: Não dizer "nossa IA é inteligente" — mostrar fazendo perguntas que o advogado reconhece como relevantes. 3. **Progresso como recompensa**: Cada resposta leva visivelmente ao resultado — o advogado sente que está construindo algo, não preenchendo formulário. 4. **Transparência sem sobrecarga**: "Seus dados não são armazenados" uma vez, discreto. Não repetir em cada tela. --- ## UX Pattern Analysis & Inspiration ### Inspiring Products Analysis **1. WhatsApp — Experiência de entrada e compartilhamento** - O que faz bem: preview de links (OG tags) cria primeira impressão antes do clique. Compartilhar é o gesto mais natural. A maioria dos advogados brasileiros (90%) usa profissionalmente. - UX lesson: O link compartilhado precisa ter preview rico e auto-explicativo. O advogado que recebe deve entender o valor antes de clicar. **2. iFood / Rappi — Fluxo de seleção em poucos toques** - O que faz bem: Categoria → Subcategoria → Customização em 3-4 telas. Decisões por toque único. Progresso visível. Funciona perfeitamente em mobile com uma mão. - UX lesson: Nosso fluxo (Tipo de tarefa → Área → Subtipo → Perguntas → Preview) deve ter a mesma fluência. Cada tela uma decisão principal. Chips e seleções, não campos de texto. **3. Nubank — Confiança em mobile para produto financeiro** - O que faz bem: Tom profissional mas acessível. Linguagem clara sem jargão técnico financeiro. Feedback visual imediato em cada ação. Funciona como "ferramenta financeira" sem parecer "app de banco". - UX lesson: O Start Kit deve parecer "ferramenta jurídica" assim como o Nubank parece "ferramenta financeira" — sem parecer que é IA por trás. **4. Typeform — Fluxo conversacional um passo por vez** - O que faz bem: Uma pergunta por tela cria sensação de conversa, não formulário. Transições suaves. Progresso visual. Lógica condicional que pula perguntas irrelevantes. - UX lesson: O agrupamento por "momento mental" é nossa versão otimizada deste padrão — conversacional mas mais eficiente que uma pergunta por tela. ### Transferable UX Patterns **Navigation Patterns:** - **Seleção por chips (iFood)**: Para tipo de tarefa, área do direito, subtipo — toque único, visual claro - **Stepper linear (Nubank onboarding)**: Indicador de progresso 4-5 etapas, sempre visível no topo - **Deep link direto (WhatsApp)**: Entrada no fluxo exato via URL — pula seleção inicial quando possível **Interaction Patterns:** - **Progressive disclosure (Typeform)**: Mostrar perguntas condicionais apenas quando relevantes (ex: jornada contratual só aparece se CLT) - **Chip selection (Material Design)**: Respostas pré-definidas como chips tocáveis, sem dropdown - **Inline validation (Nubank)**: Feedback imediato ao responder, sem esperar submit **Feedback Patterns:** - **Skeleton loading (Nubank)**: Durante chamada LLM, mostrar estrutura da próxima tela com shimmer - **Microcopy contextual (Typeform)**: Texto helper que guia sem explicar demais - **Success celebration (Duolingo)**: Micro-animação no preview para marcar o "momento aha" ### Anti-Patterns to Avoid - **Formulário longo com scroll**: Advogado entre audiências não vai scrollar. Uma tela = uma decisão. - **Dropdown menus em mobile**: Dropdowns são péssimos em touch. Sempre chips ou radio buttons. - **Loading genérico ("Carregando...")**: Não comunica valor. Usar microcopy contextual ("Analisando seu caso..."). - **Explicação antes da ação**: Não mostrar tutorial ou onboarding. A primeira tela já é a primeira pergunta. - **Linguagem de chatbot**: "Olá! Sou um assistente de IA..." — este framing afasta a Dra. Carla imediatamente. ### Design Inspiration Strategy **Adotar diretamente:** - Chip selection para todas as perguntas de seleção (iFood/Material) - Stepper linear compact no topo (Nubank) - OG tags ricas para preview no WhatsApp **Adaptar ao contexto:** - Progressive disclosure do Typeform → agrupamento por momento mental (2-3 perguntas/tela) - Tom conversacional do Typeform → linguagem jurídica profissional - Celebração do Duolingo → micro-feedback sutil no preview (profissional, não gamificado) **Evitar explicitamente:** - Chatbot UI com balões de conversa — parece IA, afasta Carla - Onboarding/tutorial antes do fluxo — barra de entrada - Multi-step wizard com 8+ etapas — parece burocracia --- ## Design System Foundation ### Design System Choice **Decisão: Tailwind CSS + componentes custom leves (sem framework de componentes)** ### Rationale for Selection 1. **MPA mobile-first**: Tailwind funciona perfeitamente com server-rendered HTML — sem dependência de JavaScript framework pesado 2. **Performance**: CSS utilitário gera bundles mínimos. Cada page load carrega apenas o CSS usado — crítico para 3G entre audiências 3. **Customização total**: Sem overhead de Material Design ou Bootstrap que traria componentes desnecessários e visual genérico 4. **Boring technology**: Tailwind é estável, bem documentado, ampla comunidade. Sem risco de lock-in ou abandono 5. **Velocidade de desenvolvimento**: Utility-first permite iterar rapidamente no MVP sem criar sistema de design complexo ### Implementation Approach - **Base**: Tailwind CSS v4+ com configuração customizada de design tokens - **Componentes**: HTML semântico + classes Tailwind. Componentes server-side (templates/partials), não client-side - **JavaScript**: Minimal — progressive enhancement para interações que melhoram a experiência (transições, validação inline) mas não são obrigatórias - **Ícones**: Heroicons (já integrado com Tailwind) para consistência visual ### Customization Strategy - Design tokens customizados no Tailwind config: cores, tipografia, espaçamento, border-radius - Componentes reutilizáveis via templates/partials do backend (não React/Vue/Svelte) - Preflight reset + base styles para consistência cross-browser - Sem tema escuro no MVP — foco em uma experiência visual coesa --- ## Core User Experience ### Defining Experience **"Responda sobre seu caso e receba um pedido jurídico otimizado pronto para gerar resultado na primeira tentativa."** Este é o equivalente do Start Kit ao "Swipe to match" do Tinder — a interação que, se perfeita, define o produto. O advogado descreve seu caso respondendo perguntas e recebe um artefato jurídico (pedido otimizado) que funciona de primeira. A mágica é: as perguntas certas extraem as informações certas, sem que o advogado precise saber o que é relevante para um bom prompt. ### User Mental Model **O que o advogado espera:** Uma consulta estruturada. Semelhante a quando um colega mais experiente pergunta sobre o caso antes de ajudar: "Qual o vínculo?", "Quanto tempo?", "Tem registro de ponto?". O advogado entende perguntas — faz isso todo dia com clientes. **O que NÃO espera:** Um chat com IA. Não espera campo de texto livre para "descrever seu caso". Não espera ter que saber o que é relevante. Não espera vocabulário técnico de IA. **Modelo mental correto a reforçar:** "Estou consultando um sistema especialista que sabe fazer as perguntas certas sobre meu tipo de caso." **Workarounds atuais:** - Carla: escreve petição do zero, 2-3 horas. Copia modelo de colega. - Rafael: copia prompts do Google, itera 3-5x no ChatGPT. Gasta 1h tentando. - Marcos: equipe usa ChatGPT sem padrão, resultados inconsistentes. ### Success Criteria | Critério | Indicador | Meta | |----------|-----------|------| | "Isso funciona de primeira" | Resultado no Jus IA sem reformulação | >70% | | "Foi rápido" | Tempo do primeiro toque ao redirect | <5 min | | "Não precisei aprender nada" | Conclusão sem abandono | >60% | | "Vou mandar pra colega" | Tráfego por referral/WhatsApp | >30% | | "Não perdi nada ao voltar" | Estado preservado no browser back | 100% | ### Novel UX Patterns O Start Kit combina padrões estabelecidos de forma inovadora: **Padrão estabelecido (familiar):** Fluxo de seleção tipo e-commerce (categoria → subcategoria → detalhes). O advogado já faz isso no iFood e Nubank. **Inovação invisível:** A transição de perguntas determinísticas para perguntas geradas por IA. O advogado não percebe que mudou de fase — as perguntas da IA são renderizadas identicamente às estruturadas (chips, seleções, placeholders contextuais). **Padrão novo que precisa de validação:** O preview como "contrato de confiança" — mostrar fundamentação jurídica antes do redirect. Este é o ponto de risco: se o preview for confuso ou parecer "prompt", quebra a confiança. Se mostrar artigos/súmulas reconhecíveis, cria o "momento aha". ### Experience Mechanics **1. Initiation:** - Advogado recebe link via WhatsApp, post do Jusbrasil, ou acesso direto - Deep link pode pré-selecionar área (ex: `/trabalhista/horas-extras` pula seleção inicial) - Se link genérico: primeira tela = "O que você precisa?" com chips de tipo de tarefa **2. Interaction (4-5 telas):** - **Tela 1 — Tipo + Área**: "O que você precisa?" [Petição Inicial] [Contestação] [Pesquisa] + Área do direito [Trabalhista] [Cível] (agrupados se deep link não pré-selecionou) - **Tela 2 — Subtipo**: Subtipos da área selecionada como chips (ex: [Horas Extras] [Rescisão Indireta] [Dano Moral]) - **Tela 3 — Dados do caso**: Perguntas estruturadas agrupadas por momento mental (empregador PJ/PF, regime, jornada, período — todas no mesmo contexto "relação de trabalho") - **Tela 4 — Refinamento contextual**: Perguntas da IA + determinísticas restantes, renderizadas identicamente (registro de ponto, testemunhas, pagamento parcial). Loading state: "Analisando seu caso..." - **Tela 5 — Preview + Redirect**: Pedido montado com fundamentação jurídica + botão "Gerar no Jus IA →" **3. Feedback:** - Barra de progresso no topo atualiza a cada avanço (4-5 steps) - Seleção de chip: feedback visual imediato (cor + check) - Loading IA: skeleton com shimmer + microcopy ("Analisando seu caso...") - Preview: fundamentação jurídica destacada visualmente (badges com artigos/súmulas) **4. Completion:** - Preview mostra o pedido montado em linguagem jurídica (não o prompt raw) - Fundamentação jurídica como badges clicáveis (art. 59 CLT, Súmula 85 TST) - Botão primário: "Gerar no Jus IA →" (redirect via URL parametrizada) - Se URL excede limite: fallback com "Copiar pedido" + link direto para Jus IA - Microcopy: "Seus dados não são armazenados após o redirecionamento" --- ## Visual Design Foundation ### Color System **Paleta primária — Alinhada com Jus IA brand:** | Token | Cor | Uso | |-------|-----|-----| | `primary` | Verde escuro (#007A5F) | Ações primárias, botões, CTAs, header — cor principal do Jus IA | | `primary-light` | Verde médio (#009B78) | Hover states | | `primary-dark` | Verde escuro (#005C47) | Active/pressed states | | `accent` | Dourado/âmbar (#D4A843) | Badges de fundamentação jurídica — diferenciador do Start Kit | | `surface` | Branco (#FFFFFF) | Background de cards e áreas de conteúdo | | `background` | Cinza muito claro (#F8F9FA) | Background geral das páginas | | `text-primary` | Azul acinzentado (#5C6F8A) | Texto principal, corpo — padrão Jus IA | | `text-dark` | Quase preto (#0F172A) | Headings, texto enfático — padrão Jusbrasil | | `text-secondary` | Cinza médio (#6B7280) | Texto auxiliar, placeholders | | `border` | Cinza azulado (#B3C0D0) | Bordas de cards, inputs, botões secondary — padrão Jus IA | **Paleta semântica:** | Token | Cor | Uso | |-------|-----|-----| | `success` | Verde Jusbrasil (#7AB441) | Confirmação, progresso completo — cor do logo Jusbrasil | | `warning` | Âmbar (#D97706) | Atenção, fallback copy-paste | | `error` | Vermelho (#DC2626) | Erros de validação | | `info` | Azul Jusbrasil (#378CC8) | Dicas, microcopy informativo — cor do logo Jusbrasil | **Rationale:** Verde (#007A5F) como primary alinha o Start Kit com a identidade visual do Jus IA — continuidade visual natural quando o advogado é redirecionado. O dourado (#D4A843) é mantido exclusivamente para badges de fundamentação jurídica, criando um diferenciador visual do Start Kit que não existe no Jus IA. As cores semânticas (success verde, info azul) remetem ao logo Jusbrasil, reforçando a conexão com o ecossistema. **Acessibilidade:** Contraste mínimo 4.5:1 para texto normal, 3:1 para texto grande. Primary (#007A5F) sobre branco = ratio 5.9:1 (passa AA). Text-dark (#0F172A) sobre branco = ratio 16.6:1 (passa AAA). **Componentes (alinhados com Jus IA):** - **Button Primary**: Background `#007A5F`, texto branco, border-radius 8px, shadow `rgba(25, 52, 102, 0.04) 0px 2px 4px` - **Button Secondary**: Background branco, texto `#007A5F`, borda `#B3C0D0`, border-radius 8px ### Typography System **Typeface:** - **Primary (headings)**: Inter — clean, profissional, excelente legibilidade em mobile. Sem serifa para modernidade sem perder seriedade. - **Body text**: Inter — mesma família para consistência. Pesos variados para hierarquia. - **Fallback**: system-ui, -apple-system, Segoe UI, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif (stack Jus IA) **Type scale (mobile-first):** | Token | Size | Weight | Line Height | Uso | |-------|------|--------|-------------|-----| | `heading-1` | 24px (1.5rem) | 700 | 1.3 | Título da página | | `heading-2` | 20px (1.25rem) | 600 | 1.35 | Seções | | `heading-3` | 16px (1rem) | 600 | 1.4 | Subtítulos | | `body` | 16px (1rem) | 400 | 1.5 | Texto principal | | `body-small` | 14px (0.875rem) | 400 | 1.5 | Microcopy, helpers | | `caption` | 12px (0.75rem) | 400 | 1.4 | Disclaimers, labels | **Desktop scale**: +2px nos headings (heading-1: 28px, heading-2: 22px). Body mantém 16px. ### Spacing & Layout Foundation **Base unit:** 8px (0.5rem) — alinhado com Jus IA base unit **Spacing scale:** | Token | Value | Uso | |-------|-------|-----| | `space-1` | 4px | Gap mínimo entre elementos inline | | `space-2` | 8px | Padding interno de chips, gap entre chips | | `space-3` | 12px | Padding interno de inputs | | `space-4` | 16px | Margem entre elementos de formulário | | `space-6` | 24px | Margem entre seções dentro de uma tela | | `space-8` | 32px | Margem entre seções principais | **Layout:** - **Mobile**: Single column, 100% width com padding lateral de 16px - **Desktop**: Max-width 640px centralizado — o fluxo não precisa ser wide, mantém foco - **Cards**: Background white, border-radius 6px, padding 16px, shadow `rgba(25, 52, 102, 0.04) 0px 2px 4px` — padrão Jus IA - **Chips**: Height 44px mínimo (touch target), border-radius 8px, padding horizontal 16px - **Botões**: Height 48px, full-width em mobile, border-radius 8px ### Accessibility Considerations - **Touch targets**: Mínimo 44x44px para todos os elementos interativos - **Contraste**: WCAG AA (4.5:1 texto normal, 3:1 texto grande) - **Focus indicators**: Outline visível para navegação por teclado (`:focus-visible`) - **Semantic HTML**: `
`, `
`, ``, `