Firme e quente, com um palco: o rosé emoldura, a ameixa escreve e a framboesa acende uma palavra. Kleiciane Rocha é a educadora financeira que abre os olhos da aluna sem julgar, e cada peça precisa ser confortável de olhar muitas e muitas vezes. Siga estas regras em tudo da marca: landing do Método ROCHA, página de evento online e de aula ao vivo, área de membros e tela de aula, capa de aula e de curso, slides de palestra e de aula, apostila e guia em PDF, planilhas, certificado, Instagram (post, carrossel, story, capa de destaque), e-mail e imagem de compartilhamento.

Princípios

• O rosé emoldura. Toda peça de comunicação de tamanho fixo (post, story, capa, slide emoldurado, imagem de compartilhamento, certificado, capa de documento) tem a moldura Rosé e, dentro dela, a janela Rosé-ar, que recebe a frase ou a foto. Nas páginas que rolam (landing, evento, aula), a moldura entra só nos blocos da lista fechada da seção Moldura e janela. Aqui a cor é o ambiente, e não um acento. Nunca a moldura com canto arredondado, arco ou sombra.
• Uma cor viva, numa palavra. A Framboesa aparece em uma palavra (a que carrega a promessa) por peça de tamanho fixo e por tela nas páginas que rolam: nunca duas à vista juntas (seção Frase em destaque, "Quantas palavras em Framboesa"). Rosé, Rosé-ar, Ameixa e Malva completam a paleta; não existe segunda cor viva.
• Nada pesa. Nenhum bloco escuro em peça de comunicação: a Ameixa escreve (texto, logotipo, botão em pílula) e nunca vira fundo, faixa ou bloco. A superfície mais escura de uma peça é o próprio Rosé.
• O nome é a marca. Não há símbolo: o logotipo é o nome em Archivo, e o rosto da marca é a foto dela. A força vem da largura (o "Rocha" expandido), nunca de peso extra nem de caixa alta espaçada.
• Uma ousadia por tela. Uma ação principal, uma palavra em framboesa, uma moldura à vista por vez. O resto fica quieto. As três medidas se conferem com assets/ferramentas/conferir.js.

Prioridade de uso

A marca é desenhada primeiro para estes materiais, nesta ordem (decisão de 02/10/2026): landing page de venda, página de evento online e de aula ao vivo, área de membros e tela de aula, capa de aula e de curso, slides de palestra e de aula, apostila e guia em PDF. Cada um tem um modelo pronto em assets/modelos/ (tabela do SKILL.md). Telas de gestão e o tema escuro ficam em segundo plano: existem e passam nos testes, mas não são o foco; na dúvida, resolva primeiro como fica na landing, na aula e no slide.

Voz e conteúdo

• Fale com a aluna em segunda pessoa, no feminino quando o texto é para ela: "você", "a sua planilha", "para não caminhar sozinha". Direta e acolhedora, provocadora sem julgar, didática e alegre: "Eu tô aqui pra abrir seus olhos, mas sem te julgar."
• Frase curta, uma ideia por frase. Português do Brasil sempre, com acento.
• Em título, uma ênfase: a palavra que carrega o sentido vai em Framboesa (<b>), com o mesmo peso do resto. Nesta marca é uma palavra sempre, mesmo quando o título traz número e resultado; nunca duas. Exemplos reais: "Organize suas finanças e tire seus sonhos do papel, sem abrir mão do conforto." · "Não sobrar dinheiro não é normal." · "Cortar gastos sem cortar prazer". Títulos de seção e de documento ficam inteiros em Ameixa; a palavra em framboesa mora na frase em destaque e no título da tela.
• Botão é verbo + objeto e diz o que acontece ("Baixar planilha", "Salvar orçamento"). Na landing vale a primeira pessoa da aluna, já aprovada: "Quero conhecer o método". O aviso repete o verbo no particípio ("Orçamento salvo").
• Erro explica o que houve e como resolver, sem culpa e sem desculpas: "O mercado passou do planejado. Ajuste o resto do mês na planilha."
• Número real quando houver prova. Nunca promessa sem prova: nada de "fique rica", dinheiro fácil, resultado garantido ou renda prometida. Os números de alunos da W1 ("+100 mil") não são dela e nunca entram. Depoimento só com nome, foto e autorização confirmados pela cliente.
• Preço e valor: "R$" escrito antes de um valor real (o preço da oferta, o exemplo de um gráfico, a planilha) é texto e está liberado; o proibido é o cifrão como ícone, ilustração ou enfeite. O preço da oferta entra em Archivo 600 na largura expandida, Ameixa, 80 px no computador e 56 no celular, com o "R$" no mesmo corpo; embaixo, em texto de apoio (17 px, Malva), as parcelas, o acesso e a garantia, com espaço sem quebra entre número e palavra ("12 vezes", "7 dias").
• Nomes dos produtos: "Método ROCHA" nunca parte em duas linhas (espaço sem quebra, Método ROCHA, ou a classe kr-nome-produto). Os três bônus do Método ROCHA são Cortar gastos sem cortar prazer, Dinheiro a Dois e Ritual Mensal da Riqueza (guias e materiais; o Ritual é bônus, decidido em 03/10/2026). A mentoria ao vivo é outra entrega: até a cliente confirmar o nome dela, as peças de live e de aula ao vivo dizem "Mentoria mensal ao vivo" e o tema do encontro fica entre colchetes ("[Tema da mentoria]"). Nunca chame a mentoria de "Ritual Mensal da Riqueza". O nome da mentoria ao vivo, se houver, fica a confirmar com a cliente.
• O nome dela em texto: o logotipo é sempre arquivo (seção Logo). Escrever "Kleiciane Rocha" em texto é menção, e vale em quatro lugares: a assinatura de autoria ("Kleiciane Rocha · Educadora financeira"), o crédito e o © do rodapé, o título "Quem vai te ensinar" e o texto corrido. Na menção, o nome fica na letra do texto ou do título em volta, sem imitar o logotipo (nada de "Rocha" expandido) e nunca no lugar onde o logotipo deveria estar (topo, faixa da peça, capa).
• Crédito da agência: peça da marca (landing, post, slide, apostila, certificado, e-mail) não leva crédito de quem a fez. O crédito da agência vai em tudo que é entrega da identidade: o pé do manual da marca, o slide final da apresentação e o fim deste README (decisão de 03/10/2026). Nunca em peça dela.
• Nunca: jargão de mercado financeiro sem explicar ("alavancar", "rentabilizar", "ativos"), culpa ("você gasta demais"), tom de relatório, exclamação de enfeite, emoji, cifrão como ícone, seta subindo, foguete, coroa, "rainha das finanças".

Cor

• Chão da página e do app: fundo. Cartões, tabelas, menus e campos: superficie. Faixas, cabeçalho de tabela e hover: superficie-2.
• Texto principal texto; apoio texto-2; placeholder e metadado texto-3. Todos passam 4,5:1 sobre fundo, superficie e superficie-2 nos dois temas.
• Ação principal acao com texto sobre-acao; hover acao-hover. Item ativo e botão secundário: realce com texto sobre-realce.
• Status sempre com palavra: sucesso/sucesso-fundo, atencao/atencao-fundo, critico/critico-fundo. Informação usa realce. Variação para baixo de um indicador ("2 aulas abaixo do plano") não é erro: fica em Malva (texto-2), com a palavra.
• Divisórias linha. Borda de controle borda-controle (3:1).
• Rosé #E4B9B0 (moldura, realce): a cor da marca, tirada do fundo rosé das fotos dela. Moldura de toda peça de comunicação; na interface, item ativo, botão secundário, filtro ligado, etiqueta e selo da marca, e a moldura de três lugares do sistema (login, estado vazio, capa de documento).
• Onde o Rosé pode ser fundo: moldura e o espaço sob a janela; capa de destaque do Instagram; divisória de capítulo de slide; faixa de cabeçalho de planilha; selo "Método ROCHA" em pílula; item ativo e botão secundário.
• Onde nunca: chão de página inteira (site, sistema, documento), área de texto corrido, tabela, formulário, cartão, menu. E nunca cor de texto.
• Rosé-ar #F3E7E3 (fundo, janela, sobre-acao): o chão das páginas e a janela onde a frase respira; o texto do botão principal.
• Ameixa #3A2430 (texto, acao, logotipo, foco): texto, logotipo e o botão principal em pílula. Nunca superfície, faixa ou bloco.
• Malva #77586A (texto-2): texto de apoio, só no claro. Sobre o Rosé, só acima de 24 px (3,5:1).
• Framboesa #B0244E (enfase): a palavra em destaque. Nunca no logotipo, em botão, fundo, faixa, moldura, ícone ou etiqueta. Sobre o Rosé, só letra grande (3,7:1).
• Os status (sucesso verde-escuro, atencao ocre, critico) existem só em interface de sistema e sempre com palavra. Peça de comunicação não tem status: um resultado (de aluna, de exemplo) vai em texto, em Malva, nunca numa etiqueta verde, ocre ou vinho.
• O critico e a ênfase nunca se confundem. No claro, o crítico é um vinho mais escuro que a Framboesa (#761A3A), nunca o vermelho de "ficar no vermelho". No escuro, um vinho mais escuro não passa no contraste, então o crítico é uma ameixa clara (#D99AD6): nem rosa (seria a Framboesa clareada), nem vermelho, nem coral. Nos dois temas, a distância de cor (ΔE CIELAB) é de 20 ou mais entre o crítico e a ênfase, o crítico e a ação, o crítico e o texto de apoio, e a ênfase e a ação; verificacao/contraste.py mede (distancia_extra no marca.json). E os dois nunca dividem a tela: tela com erro, alerta crítico ou ação destrutiva (botão --perigo, modal de cancelar) fica com o título inteiro em Ameixa.
• Proporção: Rosé e Rosé-ar ocupam quase tudo (cerca de 50% de Rosé e 30% de Rosé-ar ou superficie numa peça de comunicação); a Ameixa escreve (cerca de 12%); a Malva apoia (4%); a Framboesa acende uma palavra (2%). Medido na apresentação aprovada.
• Escala rose-50 a rose-950 (do Rosé-ar à Ameixa, passando pelo Rosé no 300 e pela Malva no 600) só para sistemas que exigem escala. Na interface, use os tokens semânticos.
• Gráficos usam as cores de dados dado-1 a dado-3 (seção Gráficos), não a escala da marca.

Tema escuro (só em sistema)

• A marca não tem chão escuro. O tema escuro existe só nas telas de sistema (área de membros), para quem usa o aparelho no modo escuro, e fica em segundo plano: chão #241620 (uma ameixa quase preta), texto Rosé-ar, botão principal Rosé com texto Ameixa, ênfase numa framboesa clareada (#EC7C99), crítico em ameixa clara (#D99AD6) e moldura num rosé apagado (#5A3641). Contraste e distância de cor medidos nos dois temas.
• No escuro, o botão de perigo é contorno (traço e texto no crítico, sem fundo): a ação destrutiva nunca é a mancha mais forte da tela.
• Peça de comunicação é sempre clara, em qualquer tema: post, story, landing, documento, PDF, slide, e-mail, imagem de compartilhamento. Os componentes de comunicação (TelaLanding, CabecalhoSite, RodapeSite, Depoimento, FormularioEtapas, Sumario, Documento) levam data-theme="claro" no próprio contêiner e não mudam com o tema da página. Página de comunicação inteira (landing, página de evento) leva data-theme="claro" no <html> e no <body>: publicada num site com tema (shadcn e next-themes põem .dark no <html>), o <body> redeclara os tokens claros e a página continua clara, com o esquema de cor claro também no <html>. Tela de sistema (aula, login, área da aluna) não leva no <body>: ela segue o tema do aparelho.
• No escuro, o logotipo é o arquivo Rosé-ar. Em tela que segue o tema do aparelho (login, área da aluna, página da aula), use o SVG inline com a classe kr-logotipo (copiado do componente Logotipo ou de assets/modelos/login.html), que pinta com o token logotipo e fica Ameixa no claro e Rosé-ar no escuro sozinho. O <img> do arquivo Ameixa só em peça que é sempre clara.

Luz

• A marca não tem luz: nada de halo, brilho, degradê, vidro ou sombra colorida ("luz": false no marca.json). O efeito da marca é a moldura (seção Moldura e janela), e ela é chapada.
• Gradiente em lugar nenhum: nem no fundo, nem em botão, cartão, foto ou logotipo.

Moldura e janela

• Moldura (kr-moldura, token moldura): faixa chapada de Rosé em volta da janela. Nas peças de tamanho fixo, a espessura é a da peça (post: 120 px nas laterais e 156 px em cima, onde fica o logotipo, ocupando de 40% a 55% da área; story, capas, slides, compartilhamento e certificado: medidas na seção Aplicações). Na tela, uma espessura só para qualquer bloco: 24 px; 16 px abaixo de 760 px (é o padrão de kr-moldura: não escreva outra). Na capa de documento, 24 px na tela e 18 px no PDF.
• Janela (kr-janela, token janela): o retângulo Rosé-ar dentro da moldura, que recebe a frase ou a foto. Sem sombra, sem canto arredondado, sem arco, sem borda.
• Onde entra (lista fechada; o que não está aqui não leva moldura):

• Uma moldura à vista por vez. Na página que rola, entre o fim de uma moldura e o começo da próxima fica, no mínimo, meia tela de chão sem moldura (450 px no computador, 422 px no celular, medidos em 1440 × 900 e 390 × 844): quando uma está inteira à vista, da outra se vê no máximo a borda. Duas molduras nunca ficam lado a lado nem em seções vizinhas. Confira com node assets/ferramentas/conferir.js <página>.html.
• A moldura emoldura a Kleiciane: a foto dela e a frase dela. Vídeo e foto de aluna (depoimento) ficam em cartão, retos, sem moldura.
• Carrossel longo: até 5 cartões, todos com a moldura Rosé. Com 6 ou mais, o primeiro e o último levam a moldura Rosé e os do meio levam a faixa em Rosé-ar com a janela em superficie (o mesmo desenho, um tom abaixo), para o feed não virar papel de parede.
• Foto sempre dentro da moldura: nunca sangrada até a borda da peça, nunca recortada em círculo (exceto o avatar), nunca com texto por cima.

Frase em destaque

• É o palco da marca: Archivo 650 na largura 112 (font-stretch: 112%), Ameixa, entrelinha 1,08, espaçamento −0,02 em, quebra balanceada. Classe kr-frase, com <b> na palavra em destaque.
• Centrada na janela do post e do story; alinhada à esquerda no topo da landing e na capa de documento (composição Leitura).
• Uma palavra só em Framboesa, a que carrega a promessa: nunca duas, nunca em itálico, nunca sublinhada, nunca sobre a foto. Dentro da frase não há troca de peso nem de largura.
• Quantas palavras em Framboesa (peça e tela). Peça de tamanho fixo (post, story, capa, slide, imagem de compartilhamento, capa de documento): uma por peça. Página que rola é uma sequência de telas: uma por tela, e nunca duas à vista juntas, ou seja, entre uma palavra e a seguinte fica no mínimo a altura de uma tela (900 px no computador, 844 px no celular). Na landing, no máximo duas na página inteira: a do topo e a da frase grande do meio; nenhuma outra seção leva Framboesa. Na página de evento, na de aula, no login e no documento, uma só. assets/ferramentas/conferir.js mede as distâncias.
• Quebra balanceada em toda frase, título e lema (text-wrap: balance): nenhuma palavra sozinha na última linha. Já está no CSS para todo h1 a h5, a pergunta da sanfona (summary) e as classes de título, frase e lema (kr-titulo, kr-frase, kr-cartao__titulo, kr-alerta__titulo, kr-aviso__titulo, kr-rodape__frase…). Classe própria de um modelo que faz papel de título (passo numerado, item de "Para quem é", título de slide) leva text-wrap: balance no CSS do modelo. O conferir.js mede: título é h1 a h6, summary, classe de título, frase, pergunta ou lema, ou texto de 18 px ou mais em peso 600 ou mais; falha se a última linha tiver uma palavra só.
• Título curto (três ou quatro palavras) em que o balanceamento ainda deixa uma palavra sozinha ("[Tema da / mentoria]"): junte as duas últimas palavras com espaço sem quebra ([Tema da&nbsp;<b>mentoria</b>]). Número e unidade também andam juntos (1 hora, 12 vezes).
• Exceção nomeada, a frase empilhada: na capa do guia e em capa vertical, a frase pode subir em pilha, uma ou duas palavras por linha, com a quebra escrita (Cortar<br>gastos<br>sem cortar<br><b>prazer</b>, como a capa aprovada). Aí a palavra da promessa pode fechar a pilha sozinha, porque toda linha é curta e a pilha é o desenho. Fora da pilha (algum trecho com três palavras ou mais), a quebra escrita também não pode deixar a última palavra sozinha.
• No post de frase, de 84 a 88 px na janela Rosé-ar. No post de foto, a frase fica no Rosé abaixo da foto com 72 px ou mais, porque a Framboesa sobre o Rosé só passa para letra grande.
• No máximo 6 linhas no post; se passar, a frase está longa demais.
• O botão principal da marca é Ameixa, então a palavra em Framboesa fica na frase. Se um dia um botão for Framboesa, a frase daquela tela fica inteira em Ameixa: uma aparição por vez.

Tipografia

• Archivo para tudo, título e texto (Google Fonts, licença OFL), variável em peso e largura. Motivo: letra bem definida e de leitura fácil, como a cliente pediu, e o eixo de largura deixa o mesmo desenho ficar próximo (normal) ou firme (expandido).
• Três larguras e nada fora delas: normal (100) no texto, na interface e em "Kleiciane"; 112 nos títulos e na frase em destaque; expandida (125) em "Rocha" e "ROCHA", nos números de indicador, nos números grandes de passo e no número do sumário.
• display, titulo-1 e titulo-2 em 650 na largura 112, com uma ênfase de cor (Framboesa), nunca de peso. titulo-3 em 600 na largura normal para títulos de cartão, modal e painel.
• Rótulo e cabeçalho de tabela: rotulo, 600 em caixa alta com espaçamento 0,1 em, em Malva.
• Texto corrido corpo (400), até 65 caracteres por linha; na landing, 18 a 20 px. Interface corpo-sm; botões e menus interface (600).
• Números de indicador em numero (600, expandida) com algarismos tabulares.
• Nenhum texto abaixo de 12 px renderizado na tela (no celular também, e também dentro de gráfico: o SVG encolhe com a largura, seção Gráficos). No slide e na imagem de compartilhamento, nada abaixo de 24 px.
• Data e hora nunca em caixa alta ("20h", nunca "20H"): a linha do evento fica em caixa normal (seção Aplicações, "Peças de evento").
• Nunca: caixa alta espaçada em título ou no logotipo, itálico, serifa, segunda família, letra fina (abaixo de 400) ou pesada (acima de 650).

Composição

Toda tela usa um de três modelos. Escolha o modelo antes de desenhar; dentro de um bloco, o alinhamento é um só.

• Centrada (uma ação só): login, estado vazio, confirmação, avatar, certificado e post com frase. A capa de apresentação e de palestra não é Centrada: segue referencias/apresentacao.md (janela à esquerda com o rótulo, o logotipo e a data; foto à direita). Logotipo, título, texto de apoio e ação no eixo central, coluna de até 360 px (formulário) ou 34 caracteres (texto). Sem cartão: a janela dentro da moldura já é a superfície, e os campos ficam direto nela, com rótulos à esquerda. Texto de apoio em uma linha. Botão no tamanho padrão, na largura da coluna.
• Cartão só agrupa. Use kr-cartao para separar um grupo entre vários na mesma tela. Nunca para envolver a única coisa da tela.
• Botão grande só no marketing. kr-botao--lg é para o topo de landing e capa; em formulário e sistema, o tamanho padrão.
• Leitura (marketing e documentos): tudo alinhado à esquerda numa coluna de até 1180 px (kr-leitura), texto até 65 caracteres. Título, texto, botões, preço e prova começam na mesma linha vertical. No topo da landing, a foto fica à direita, dentro da moldura (kr-heroi). Exemplo: TelaLanding. A única exceção é a frase grande do meio da landing: um bloco emoldurado com uma frase só é uma peça dentro da página e fica centrado por inteiro (a frase e nada mais). Nenhum outro bloco se centra numa página Leitura: a oferta, os bônus e as dúvidas ficam à esquerda.
• Painel (sistemas): menu lateral à esquerda (NavegacaoLateral) e conteúdo alinhado à esquerda; título da página à esquerda e ações à direita, na mesma linha. Exemplos: TelaSistema (início da área da aluna), TelaCRM (a trilha do curso em colunas).
• Nunca misture: um título centralizado sobre um texto alinhado à esquerda está errado.
• Nada de item sozinho numa linha. Sumário em grade leve; grades de cartões com número de colunas que feche certo; nunca colunas automáticas que deixem um item órfão.
• Grade: 12 colunas, intervalo espaco-5 (24 px), margem lateral espaco-4 (16 px) até 1023 px e 48 px a partir de 1024 px, largura máxima 1180 px de conteúdo. A coluna pronta é kr-leitura (landing, evento, documento na tela). Grades de cartões em kr-grade kr-grade--2, --3 ou --4 (2 e 3 viram 1 coluna no celular; 4 vira 2), nunca auto-fit.
• Respiro vertical: espaco-6 entre blocos de uma tela, espaco-7 entre seções, espaco-8 no topo de página de marketing.
• No máximo três coisas por peça de comunicação: frase, logotipo e foto. Nada de @, selo, faixa ou ícone a mais (a cliente recusou "muita informação"). Vale assim, sem exceção, para post, story, capa de destaque e imagem de compartilhamento da landing. As outras peças têm a lista do que entra na própria regra (seção Aplicações) e nada fora dela; as exceções são só estas: capa de aula, de curso e de live (+ a assinatura Método ROCHA e um rótulo), peças de evento (+ a linha com o tipo de encontro, a data e a hora), certificado (+ os textos do certificado e a linha de assinatura) e slide de encerramento (+ "@ e site", a única peça com @, porque é onde a plateia anota o contato).

Gráficos

• Uma série: tudo em dado-1 (a Malva com cor bastante para ser marca). É o caso mais comum nos painéis.
• Duas ou três séries: dado-1 (malva de dados #8A4A72), dado-2 (mel #BA7331) e dado-3 (verde-água #008874), sempre nesta ordem; no escuro, #B06290, #C28336 e #249B86. Validadas com o validador da skill dataviz (validate_palette.js): no claro, sobre superficie #FBF6F4 e sobre fundo #F3E7E3; no escuro, sobre superficie #2D1C28 e sobre fundo #241620. Todas as checagens passam nos quatro casos: luminosidade dentro da faixa, croma mínimo de 0,10, separação para daltonismo (protan e deutan) de ΔE 8,6 no pior par vizinho no claro e 9,9 no escuro, visão normal ΔE 18,4 e 16,8, e contraste de 3:1 ou mais com a superfície. Mais de três séries: agrupe em "Outros" ou divida em gráficos.
• As cores de dados só existem dentro de gráficos. Nunca em botão, texto, fundo, moldura ou ilustração. No post do Instagram, use um número grande em vez de gráfico; na aula, na apostila e no slide de palestra, o gráfico é material didático, fica dentro de um cartão superficie e diz que os números são de exemplo.
• Um eixo só; duas escalas diferentes viram dois gráficos. Grade em linha, eixos e rótulos em texto-3, valores em texto. A partir de duas séries, legenda sempre presente e rótulo direto no ponto que importa.
• Rótulo nunca abaixo de 12 px renderizado. O SVG encolhe com a largura do cartão: desenhado para o computador e visto num celular, o rótulo fica com 5 a 7 px. Por isso cada gráfico tem duas versões do mesmo desenho (componente Grafico): a larga (viewBox de 480, rótulos de 12), mostrada com 480 px de cartão ou mais, e a estreita (viewBox de 300, rótulos de 13), abaixo disso, com barras deitadas e o valor de cada barra no fim dela (no celular não existe "passar o mouse") e linhas com no máximo 6 pontos. No slide, o viewBox tem a largura real do gráfico (1550 px no slide de 1920) e o rótulo, 24 px ou mais.

Camadas e telas

• Camadas (o que fica por cima): camada-fixo (cabeçalho), camada-menu (menu e seleção), camada-painel (painel lateral), camada-modal, camada-aviso, camada-dica. Nunca um número solto de z-index.
• Pontos de quebra: desenhe primeiro em quebra-celular (390 px), porque a aluna chega pelo Instagram. Abaixo de quebra-tablet (760 px) tudo vira uma coluna e o menu do site vira botão; a partir de quebra-desktop (1024 px) a margem lateral é 48 px.

Espaço, raio e sombra

• Grade de 4 px: espaco-1 (4) a espaco-8 (64). Padding de cartão espaco-5; entre blocos espaco-6; entre seções espaco-7.
• Superfície é reta, o que se toca é redondo. Moldura, janela, foto, cartão, tabela, aviso, alerta, menu, painel e modal têm canto reto (raio-lg e raio-xl valem 0), como a moldura. Botão, botão só com ícone, filtro, etiqueta, selo e avatar são pílula (raio-pilula, raio-sm); campo, seleção, item de menu e opção em cartão têm raio-md (12 px).
• Sombras quase invisíveis: sombra-1 em repouso, sombra-2 para o que flutua, sombra-3 para modal. Nunca sombra colorida saturada; moldura e janela nunca têm sombra.

Movimento

• Toda animação usa curva-marca (sai firme e assenta devagar, sem quique). Durações: tempo-rapido para hover e foco, tempo-base para menus e avisos, tempo-lento para modal.
• Assinatura: o sobrenome se abre. "Kleiciane" sobe e assenta; 450 ms depois, "Rocha" vai da largura normal à expandida em tempo-assinatura (1,2 s). É o kr-carregando (carregamento de página e de painel), a abertura em vídeo (identidade/logo/movimento/) e a abertura de aula e de live.
• Com movimento reduzido ativado, tudo para: o nome aparece montado.

Estados e acessibilidade

• Foco: anel de 2 px sólido em foco, afastado 2 px, em todo elemento interativo.
• Desabilitado: opacidade 45% e cursor bloqueado; o texto explica por quê quando não for óbvio.
• Erro de campo: borda critico, fundo critico-fundo e mensagem de correção.
• Cor nunca carrega sentido sozinha: status sempre com palavra, variação sempre com sinal.

Ícones

• Ícones de traço do conjunto Lucide, traço 1,75, na cor do texto ao lado (texto-2; ativo sobre-realce). 16 px em botão, 18 px em menu, 20 px em aviso.
• Capas de destaque do Instagram: círculo Rosé com ícone de traço Ameixa (2,2), um por assunto, sempre estes: Método book-open, Ao vivo play, Dúvidas message-square, Agenda calendar, Sobre user (Lucide; os SVG estão em assets/modelos/instagram.html). Assunto novo ganha um ícone de traço do Lucide com o mesmo traço, nunca um desenho próprio.
• Nunca ícone colorido, preenchido ou emoji. Nunca cifrão, cofrinho, moeda, seta subindo, foguete ou coroa, nem como ícone de menu.

Imagens

• As fotos são dela, da sessão de maio de 2025 (assets/fotos/): set rosé (o preferido, conversa com a moldura), set areia, sala clara e set preto. Sempre dentro da moldura, com o rosto no terço de cima, sem filtro, sem recorte do fundo e sem texto por cima.
• Logotipo sobre foto: Ameixa sobre fundo rosé, areia ou sala clara; Rosé-ar sobre o set preto.
• Proibido: foto de banco de imagem (dinheiro, cofrinho, moedas, notas, calculadora, gráfico subindo, mulher olhando o horizonte), ilustração de cifrão, foguete, coroa, flor, caligrafia, e qualquer coisa herdada da W1 (logo, petróleo, azul-escuro, imitação do Notas do iPhone).

Logo

• Só tipográfico: "Kleiciane Rocha" em Archivo 600, "Kleiciane" na largura 100 e "Rocha" na 125, em curvas. Arquivos em assets/logos/: horizontal-ameixa.svg (claro e Rosé), horizontal-rose-ar.svg (foto escura e tema escuro), empilhado-ameixa.svg e empilhado-rose-ar.svg, metodo-rocha-ameixa.svg e metodo-rocha-rose-ar.svg, icone-app-marca.svg, favicon.svg e favicon.ico. Cada logotipo também em PNG transparente de 2048 px de largura (mesmo nome, .png), para onde SVG não abre: e-mail, WhatsApp, Canva, editor de vídeo.
• Em linha a partir de 200 px de largura; abaixo disso, o empilhado (obrigatório). O nome é sempre "Kleiciane Rocha", as duas palavras juntas.
• Método ROCHA: a mesma construção ("Método" na largura 100, "ROCHA" na 125 em caixa alta), como selo do produto: landing, guias e planilhas do curso, certificado, abertura de aula. Nunca ícone, nunca coroa; ROCHA é nome, não sigla.
• Mínimo: 18 px de altura na tela (cerca de 205 px de largura), a mesma letra do logotipo no mínimo dele; 7 mm no impresso. Onde não couber (ao lado de etiquetas, em tabela, em menu), escreva "Método ROCHA" em texto, que é menção.
• Na página (landing, chão Rosé-ar): na pílula Rosé kr-selo, de 48 px de altura com a assinatura de 18 px. Nas capas, na tela de espera e no certificado: solta, o arquivo direto na janela, sem pílula (como a abertura de aula aprovada).
• Avatar (Instagram, WhatsApp, área da aluna, assinatura de e-mail): a foto dela com recorte no rosto e aro Rosé. É arquivo, como o logotipo: assets/logos/avatar-1080.png (perfil das redes) e avatar-320.png (e-mail, área da aluna, aplicativos de reunião). Desenho: quadrado Rosé; dentro, o aro Rosé de 5% do lado, um anel Rosé-ar de 3% e a foto no círculo que sobra (84% do lado); a foto é a rose-retrato-0912 (de frente, olhando para a câmera, fundo do set rosé), com o rosto um pouco acima do centro e os ombros aparecendo. O Instagram e o WhatsApp recortam o quadrado num círculo e o aro fica na borda. Gerado da foto original em alta (identidade/avatar/gera_avatar.py); não refaça a partir das fotos de 900 px de assets/fotos/, que sairiam ampliadas. Nunca monograma "KR". A letra K existe só no ícone de app e no favicon.
• Respiro: a altura de uma maiúscula de "Kleiciane" em volta, por todos os lados.
• Cor: Ameixa sobre Rosé-ar e sobre Rosé; Rosé-ar sobre foto escura e no tema escuro. Nunca Framboesa; nunca Rosé-ar sobre Rosé (1,46:1).
• Nunca: contorno, sombra, gradiente, distorção, caixa alta espaçada, outra fonte, ou o nome digitado em texto no lugar do arquivo (a única exceção é o kr-carregando, que anima a fonte). Mencionar o nome em texto (assinatura de autoria, crédito, ©, "Quem vai te ensinar") é outra coisa e está liberado (seção Voz).

Aplicações

• Landing page de venda: assets/modelos/landing-metodo-rocha.html. Composição Leitura, na coluna kr-leitura, nesta ordem: o topo com a frase em destaque e a foto na moldura (TelaLanding) e a faixa do que vem no método (4 itens); para quem é; a frase grande na moldura; por onde você começa (os passos); os depoimentos, quando a cliente confirmar (componente Depoimento, em cartões, sem moldura); os bônus (três cartões com o mesmo rótulo, "Bônus", e o nome de cada um como título); quem é a Kleiciane (a foto na moldura); a oferta; as dúvidas; o rodapé. O que vem no método aparece uma vez só (a faixa do topo), sem seção de cartões repetindo os mesmos itens.
• Molduras: três (foto do topo, frase do meio, foto do "sobre"), a meia tela ou mais uma da outra. Framboesa: "conforto" no topo e, no máximo, a palavra da frase do meio, a uma tela ou mais uma da outra.
• Oferta: no chão Rosé-ar, sem moldura, alinhada à esquerda, com um traço Ameixa de 1,5 px em cima: a pílula Método ROCHA e o rótulo "Investimento", o preço (seção Voz, "Preço e valor"), as condições e o botão "Quero entrar no Método ROCHA" (--lg). No celular, o botão ocupa a largura da coluna e, se o texto não couber, quebra a linha dentro dele: nunca sai da coluna.
• Página de evento online e de aula ao vivo: assets/modelos/evento-online.html. A moldura com a janela no topo, a linha do evento ("Aula ao vivo · quinta, 12/11 · 20h", 18 px, Archivo 600, Ameixa, caixa normal), o título da aula como frase em destaque, o formulário de inscrição (nome, e-mail, WhatsApp) direto na janela e "Garantir minha vaga", com a nota embaixo alinhada à esquerda como o formulário. Depois, o que ela vai ensinar (3 itens) e quem é ela (a foto na moldura).
• Peças de evento: data e hora. Um formato só em toda peça de evento (página, tela de espera, divulgação, story, imagem de compartilhamento, cartão e alerta da área da aluna): o dia da semana abreviado como se fala, a data e a hora: "quinta, 12/11 · 20h" (com minutos, "20h30"; nunca "quinta-feira", que não cabe na tela de espera), sempre em caixa normal e numa linha só (kr-sem-quebra em volta da data e da hora). Enquanto não houver data, os campos ficam "[dia], [dd/mm] · [hora]". No Indicador da área da aluna, a hora é o número grande ("20h") e a data vai embaixo, no mesmo formato sem a hora: "quinta, 12/11".
• Área de membros e tela de aula: TelaSistema (início), TelaCRM (trilha) e assets/modelos/aula.html (a página da aula: vídeo na moldura, título, abas Aula · Materiais · Anotações, lista de aulas do módulo ao lado).
• Login da área da aluna: assets/modelos/login.html, na composição Centrada: a moldura com a janela ocupa a tela; logotipo, título com uma palavra em Framboesa, campos e "Entrar" numa coluna de 360 px, direto na janela. Segue o tema do aparelho.
• Capa de aula e de curso: assets/modelos/capas.html. Abertura de aula ao vivo e capa de aula gravada em 1280 × 720; capa de curso em 1280 × 720 e em 1080 × 1350. Em todas: moldura Rosé, janela Rosé-ar com a assinatura Método ROCHA solta no alto (sem pílula), o título em frase de destaque e o logotipo em linha no pé; a foto dela dentro da moldura, separada da janela por Rosé, quando houver.
• 1280 × 720: moldura de 48 px; janela com 56 px de respiro; assinatura de 20 px de altura (44 px na capa de curso, onde ela é o nome do curso); foto de 400 a 440 px de largura à direita, a 48 px da janela.
• 1080 × 1350 (curso, vertical): moldura de 120 px em volta; em cima, a janela de 840 × 560 com 64 px de respiro (assinatura de 40 px no alto, título de 64 px à esquerda, logotipo de 29,4 px no pé); 48 px de Rosé; embaixo, a foto de 840 × 502, com o rosto no terço de cima.
• Abertura de live: rótulo "Mentoria mensal ao vivo" (18 px, caixa alta, Malva) sobre o tema do encontro.
• Evento online: tela de espera e divulgação (assets/modelos/capas.html). Tela de espera da live (1920 × 1080, fica na tela antes de a live começar): moldura de 56 px, como nos slides; à esquerda, a janela com 96 px de respiro leva a assinatura Método ROCHA solta no alto (30 px de altura), o rótulo "Mentoria mensal ao vivo · já vamos começar" (24 px, caixa alta, Malva), o tema do encontro em frase de destaque (112 px, à esquerda), a data e a hora (44 px, Archivo 600 na largura expandida, Ameixa, caixa normal) e o logotipo em linha no pé (32 px de altura); à direita, a foto dela com 760 px de largura, separada da janela por 56 px de Rosé. Nada importante nos 10% de baixo da janela, onde o player põe os controles. Divulgação (1080 × 1350, feed e WhatsApp): a geometria do post de foto, com a linha do evento logo acima da frase ("Mentoria mensal ao vivo · quinta, 12/11 · 20h", 32 px, Archivo 600, Ameixa, caixa normal) e o tema do encontro em frase de destaque (84 px). Nos dois, data e hora no formato das peças de evento. Até a cliente confirmar o nome da mentoria, o título é "[Tema da mentoria]"; quando houver tema, a palavra em Framboesa é a que carrega a promessa do tema.
• Slides de palestra e de aula: assets/modelos/slides-palestra.html (1920 × 1080), na estrutura de referencias/apresentacao.md: capa, o que vamos ver, divisória de capítulo, frase em destaque, conteúdo, passos numerados, gráfico, foto e encerramento. Nada abaixo de 24 px, medido já com a escala do SVG no gráfico.
• Apostila e guia em PDF: assets/modelos/apostila.html (capa A4 inteira na moldura, como o guia aprovado, e o miolo com sumário e seções) e assets/modelos/documento.html (relatório, resumo de mentoria). Proposta e papel timbrado têm modelo próprio (abaixo).
• Compartilhamento de link (assets/modelos/compartilhamento.html, 1200 × 630, PNG): moldura Rosé de 48 px nas laterais e embaixo e de 112 px em cima; o logotipo em linha centrado na faixa de cima, com 26 px de altura e o centro a 56 px do topo; a janela Rosé-ar com 1104 × 470. A imagem aparece pequena (de 300 a 500 px de largura no WhatsApp, no Instagram e no LinkedIn), então a frase é grande: de 56 a 64 px, no máximo 3 linhas, e nenhum texto abaixo de 24 px. Landing: a tese em frase de destaque, centrada na janela ("…sem abrir mão do conforto."). Página de evento: a janela à esquerda, com a linha do evento ("Aula ao vivo · quinta, 12/11 · 20h", 24 px, Malva, caixa normal) e o título do evento em frase de destaque alinhada à esquerda; a foto dela à direita, com 360 px de largura, separada da janela por 48 px de Rosé. No <head> de cada página: og:title, og:description, og:image (endereço público do PNG), og:image:width 1200 e og:image:height 630, como nos modelos da landing e do evento.
• Instagram (assets/modelos/instagram.html; cada peça é exportada em PNG no tamanho real). Em post e story, no máximo três coisas: frase, logotipo e foto; nada de @, selo ou assinatura do método. O rótulo de data e hora só entra em peça de evento.
• Post (1080 × 1350): moldura de 120 px nas laterais e 156 px em cima; o logotipo em linha centrado na faixa de cima, com 29,4 px de altura (40 px de corpo), o topo a 63 px e o centro da maiúscula a 78 px.
• Post de frase: a janela vai de 156 a 1193 px (840 × 1037), e a frase fica centrada nela, de 84 a 88 px, em até 6 linhas.
• Post de foto: a foto ocupa a janela de 156 a 936 px (840 × 780), com o rosto no terço de cima; a frase fica no Rosé abaixo, centrada, de 80 a 88 px, em até 2 linhas (frase curta, de 2 a 6 palavras).
• Carrossel: a capa é um post de frase com a pergunta ou a promessa e, abaixo da frase, um rótulo de 34 px em Malva ("Passo a passo · arrasta"). Os cartões internos mantêm a janela no mesmo lugar (o olho não pula ao arrastar) e não levam logotipo: o número do passo no alto, à esquerda (Archivo 600 na largura expandida, 360 px, Ameixa), e embaixo o título do passo (frase de destaque à esquerda, 76 px, inteira em Ameixa) e uma frase de apoio (400, 42 px, Malva). A palavra em Framboesa fica na capa. Um passo por cartão.
• Story (1080 × 1920): as faixas de 250 px no topo e de 340 px na base são do aplicativo (barra de progresso, nome, caixa de resposta); a moldura passa por elas, mas nada importante entra ali. Laterais de 120 px, como no post; logo abaixo da faixa de cima do aplicativo, a faixa do logotipo (de 250 a 382 px, logotipo centrado com 29,4 px de altura); a janela vai de 382 a 1580 px (840 × 1198). Story de frase: a frase centrada, de 88 a 96 px; quando o story vai receber caixa de pergunta ou enquete, a frase sobe para o terço de cima da janela e a caixa, que é do aplicativo, entra por cima no próprio Instagram (não desenhe uma caixa falsa). Story de foto: a foto ocupa de 382 a 1180 px (840 × 798) e, no Rosé abaixo dela, até 1580 px, ficam o rótulo e a frase, como no post de foto.
• Capa de destaque (1080 × 1920, sobe como story): Rosé chapado, com o ícone de traço Ameixa centrado, 400 px de lado e traço 2,2 (seção Ícones). O nome do destaque é o texto do próprio Instagram, embaixo do círculo; não vai escrito na imagem.
• Assinatura de e-mail (assets/modelos/assinatura-email.html): tabela de duas colunas, sem moldura (ela fecha uma conversa; não é uma peça): à esquerda, o avatar (avatar-320.png exibido com 88 × 88 px e border-radius: 50%, para sair redondo; o Outlook do computador ignora e mostra o quadrado Rosé do arquivo); à direita, a 20 px, o logotipo em linha Ameixa em PNG (horizontal-ameixa.png, exibido com 220 × 20 px, texto alternativo "Kleiciane Rocha"), "Educadora financeira · Método ROCHA" em Arial 13 px Malva e os contatos em Arial 13 px Ameixa, separados por " · ": WhatsApp e Instagram (e-mail e site quando existirem). O logotipo já é o nome: não repita o nome em texto ao lado. Sem Framboesa, sem ícone, sem frase, sem cor de fundo. Imagens com width e height no HTML e com endereço público (https): o Gmail não aceita SVG nem arquivo do computador. Estilo em linha, fonte Arial e cores em hex, porque programas de e-mail não carregam fonte da web nem leem variável CSS: use os valores dos tokens (texto #3A2430, texto-2 #77586A) e nenhum outro.
• Documentos (guia, relatório da consultoria, resumo de mentoria): monte com o componente Documento (HTML que também vira PDF A4). A capa é a moldura Rosé com a janela, com o título em frase de destaque e uma palavra em Framboesa; os títulos de seção ficam inteiros em Ameixa. Sumário com Sumario: uma grade leve logo abaixo da capa, sem linhas, com número de dois dígitos em Malva na largura expandida. As colunas saem da contagem, pelo CSS: na tela, 4 colunas para 4, 7 ou 8 seções e 3 para 3, 5, 6 ou 9; no celular e no PDF, 2 colunas com total par e 1 com total ímpar, para nenhuma seção ficar sozinha numa linha. Grades de cartões com número de colunas que feche certo. No PDF: margem de 14 mm em cima e embaixo e 16 mm nas laterais, primeira página com a capa e o sumário, cartão e linha de tabela nunca partidos entre páginas, cabeçalho de seção nunca sozinho no pé. A moldura só na capa; nada de marca d'água ou fundo colorido atrás do texto.
• Planilhas (assets/modelos/planilha-orcamento-do-mes.xlsx, a planilha "Meu orçamento do mês" da apresentação aprovada; gerada por interface/fonte/gen_planilha.py):
• Ferramenta: Google Planilhas, que a aluna recebe por link de "Fazer uma cópia" (Arquivo › Importar abre o .xlsx); o mesmo arquivo abre no Excel.
• Fonte: Archivo (no Google Planilhas, Fonte › Mais fontes › Archivo). No Excel sem Archivo, Arial. Nenhuma outra.
• Faixa de cabeçalho: as três primeiras linhas em Rosé (#E4B9B0, 56 px de altura no total), com a assinatura Método ROCHA em PNG à esquerda (18 px de altura, assets/logos/metodo-rocha-ameixa.png) e o nome da planilha à direita (Archivo negrito, 14 pt, Ameixa).
• Colunas: margem de 16 px dos dois lados; a primeira coluna (o que se classifica) com 240 px; as de valor com 140 px cada, alinhadas à direita. Cabeçalho de coluna em caixa alta, Archivo negrito 10 pt, Malva, sobre superficie-2 (#EFE0DB).
• Corpo: fundo superficie (#FBF6F4), texto Ameixa 11 pt, linhas de 30 px de altura, bordas finas em linha (#E4CFC9); linha de total em superficie-2, negrito. Sem a grade cinza do programa (Exibir › Linhas de grade desligado).
• Valores: formato de moeda brasileira "R$ 1.234,56" ("R$" #,##0.00); negativo com sinal de menos e na mesma cor, nunca em vermelho; zero aparece como "–". Fórmulas prontas nas colunas que se calculam (diferença, total).
• Sem Framboesa, sem cor de status, sem gráfico fora das cores de dados. Uma nota de uso embaixo da tabela, em Malva, 10 pt.
• Certificado (assets/modelos/certificado.html, A4 deitado, PDF e PNG): composição Centrada. Moldura Rosé de 14 mm e janela Rosé-ar com 16 mm de respiro; no alto, a assinatura Método ROCHA (arquivo, solta, 7 mm de altura); no meio, "Certificado de conclusão" em rótulo (4,5 mm, Malva), o nome da aluna em frase de destaque sem Framboesa (17 mm; nome que passe de 2 linhas desce para 14 mm; o nome é dela, não é promessa), a frase "concluiu o Método ROCHA e colocou as próprias finanças em ordem." (5,5 mm, Malva) e "Concluído em [data de conclusão]"; no pé, a linha de assinatura (70 mm, Ameixa) com o logotipo em linha embaixo. Na impressão, @page { size: A4 landscape; margin: 0 }: o certificado é uma folha inteira, sem margem branca. Sem carga horária, número de registro ou selo de "certificação" que a cliente não tenha confirmado.
• Papel timbrado e proposta (assets/modelos/proposta.html, A4 em pé, PDF): folhas fixas (.folha, 210 × 297 mm) com margem de 14 mm em cima e embaixo e 16 mm nas laterais, chão Rosé-ar até a borda. Em toda folha, o topo (logotipo em linha à esquerda, 5 mm de altura; o tipo do documento em rótulo à direita; linha linha embaixo) e o rodapé (contatos entre colchetes à esquerda, "1 de 2" à direita; linha em cima). A primeira folha abre com a capa da proposta (a moldura Rosé com a janela, como a capa do Documento: rótulo com a data, título em frase de destaque com uma palavra em Framboesa, para quem é), o sumário em grade leve e a primeira seção; a última termina no investimento e no aceite, com duas linhas de assinatura. Seções numeradas com título inteiro em Ameixa, tabela para o que tem valor ou prazo, cartões só para agrupar. Nada partido entre folhas: se o texto crescer, acrescente uma folha com o mesmo topo e rodapé e renumere ("1 de 3"). Valores, prazos, número de encontros e condições ficam entre colchetes até a cliente confirmar. Papel timbrado em branco: a mesma folha, só com topo, rodapé e o corpo vazio.
• Slides de aula e mentoria: veja referencias/apresentacao.md.
• Exportar as peças: node assets/ferramentas/exportar.js assets/modelos/<modelo>.html <pasta> gera um PNG no tamanho real de cada .arte e .slide (o nome vem de data-nome) e, quando o modelo tem folhas .folha, o PNG de cada folha e o PDF. Edite uma cópia do modelo dentro de assets/modelos/, porque ele usa ../css, ../logos e ../fotos. Abra cada PNG antes de entregar.
• Conferir as regras de tela: node assets/ferramentas/conferir.js assets/modelos/<modelo>.html mede, no computador (1440 × 900) e no celular (390 × 844), a rolagem lateral, o que sai da tela ou da janela, o menor texto (12 px; 24 no slide), a distância entre as palavras em Framboesa (uma tela) e entre as molduras (meia tela) e se algum título termina com uma palavra sozinha na última linha; nas peças de tamanho fixo, uma palavra em Framboesa por peça e o mesmo título sem palavra sozinha. Rode antes de entregar qualquer página ou peça; sai com erro se algo falhar.

Identidade criada pela Anúncio Jurídico · outubro de 2026.