, página inicial

Recortes Mentais · manual da marca

Caderno de Recortes

a mente em colagem

O brandbook do Recortes Mentais: o que a gente é, como a gente fala e como cada pedaço se cola na página. Serve pra quem produz, pra parceiros e pra imprensa. Tudo aqui pode ser baixado.

Recortesmentais

Tira Rasgada · versão empilhada

Recorte nº 000
famílias tipográficas, uma por papel
4famílias tipográficas, uma por papel
cores com papel claro, mais a cor-herança
9 + 1cores com papel claro, mais a cor-herança
cadernos, cada um com a sua cor
6cadernos, cada um com a sua cor
mascote que escuta mais do que fala
1mascote que escuta mais do que fala

A grande ideia

A cabeça da gente funciona como um caderno de recortes.

A cabeça da gente funciona como um caderno de recortes: a frase de filme anotada às pressas, o ingresso colado com durex, a pergunta sem resposta no canto da página, o rabisco na margem que só faz sentido de madrugada. O Recortes Mentais assume isso ao pé da letra e vira um caderno aberto, onde psicologia, saúde, filosofia e cultura pop são recortadas em pedaços do tamanho certo, coladas com cuidado e comentadas na margem, sempre como conversa e nunca como sermão.

O moderno está na execução: grid limpo, muito respiro, tipografia de leitura longa, acessibilidade e performance. O vintage está nos detalhes: fita crepe, borda rasgada, carimbo, marca-texto, etiqueta escolar e numeração de arquivo (“Recorte nº 042”).

Posicionamento

Não é consultório nem palco de guru: é a conversa de antes, durante e depois.

Para brasileiros curiosos de 18 a 40 anos que pensam demais (e às vezes de menos) sobre si mesmos, consomem cultura pop sem culpa e desconfiam de autoajuda, o Recortes Mentais é o caderno de recortes que junta psicologia, saúde, filosofia e cultura pop numa conversa acolhedora, inteligente e bem-humorada. Ele se diferencia dos perfis de frase pronta e do conteúdo clínico e frio porque explica com fonte, liga a teoria ao filme que você viu ontem e nunca promete cura em dez passos.

A promessa

Você sai da leitura entendendo um pouco melhor por que faz o que faz, um pouco mais gentil consigo e, de quebra, com uma boa indicação de filme.

A psicologia por trás de tudo, contada como quem divide um caderno

O que veio de 2020

O patrimônio continua inteiro. O roxo elétrico vira roxo de mimeógrafo, a tinta das provas da escola que todo brasileiro reconhece, ancorado numa ameixa profunda. A tagline do limão vira a segunda cor da marca, o amarelo de marca-texto. O personagem da lua crescente ganha nome (Crescêncio), traço refeito e borda de adesivo, como se tivesse sido recortado do próprio caderno.

Manifesto e taglines

O que a gente diz quando ninguém perguntou (e quando perguntou também).

O manifesto é a página de abertura do caderno. As taglines são os carimbos que a marca usa sempre do mesmo jeito.

Todo mundo tem (ou já teve) um caderno assim. Uma frase de filme anotada às pressas, um ingresso colado com durex, uma pergunta sem resposta no canto da página, uma lista de coisas que iam mudar a partir de segunda.

O Recortes Mentais é esse caderno, só que aberto.

Aqui a gente junta pedaços: de psicologia, de saúde, de filosofia, do filme que ficou ecoando, do disco que pensou por você numa terça-feira difícil. E tenta entender o que eles dizem sobre a gente. A mente não é manual de instruções. Está mais para colagem: meio torta, cheia de camadas e bonita justamente por isso.

Aqui a psicologia tira o jaleco, a filosofia desce do pedestal e a cultura pop vira espelho. Ninguém vai te prometer a sua melhor versão em sete passos. A promessa é outra: ler a ciência com cuidado, mostrar de onde veio cada ideia, rir quando der e não ter pressa quando não der.

E a gente conhece o limite do papel. Isto aqui é conversa, não consultório. Quando o assunto apertar, a gente vai lembrar que existe ajuda de verdade (o CVV atende pelo 188, 24 horas, de graça) e que pedir ajuda também é coragem.

No mais, a regra da casa é a mesma desde o primeiro rabisco: se a vida te der limões... faça um mousse. E se não der vontade de fazer nada, tudo bem também. Puxa uma cadeira. Às vezes a gente só precisa de alguém para conversar.

Só alguém para conversar.

As taglines

  • Assinatura de abertura · patrimônio

    Só alguém para conversar.

    Bio, início dos vídeos, página Conversas, avatar.

  • Assinatura de fechamento · patrimônio

    Se a vida te der limões... faça um mousse.

    Rodapé, fim dos vídeos, newsletter, última lâmina dos carrosséis.

  • Descritor oficial

    Um caderno de recortes para quem pensa demais.

    Abaixo do logo, na meta description e na bio.

  • CTA-assinatura

    Puxa uma cadeira.

    Convite padrão da marca: hero, Conversas, fim de texto.

  • CTA curto

    Pensa comigo?

    Fim de carrossel e de vídeo, puxando comentário.

  • Tagline de apoio

    Psicologia sem jaleco. Cultura pop sem pressa.

    Mídia kit, banner, apresentações.

  • Tagline de apoio

    A psicologia por trás de tudo (inclusive do mousse).

    Território da marca; caderno Miudezas.

  • Tagline de apoio

    Nem tudo cabe numa frase. Por isso a gente recorta.

    Campanhas e peças de lançamento.

  • Tagline de apoio

    Coisas da cabeça, coladas com carinho.

    Papelaria, adesivos, merch.

Regras de escrita das assinaturas

  • Certo: Só alguém para conversar.

    Errado: Apenas alguém para conversar.

    É “Só”, em todos os canais. “Apenas” soa formal demais para quem senta do lado.

  • Certo: Se a vida te der limões... faça um mousse.

    Errado: Se a vida te der limões, faça um mousse!

    Sempre com reticências: a pausa é a piada. Sem vírgula e sem exclamação.

  • Certo: Só alguém para conversar.

    Errado: Só alguém pra conversar.

    Nas assinaturas patrimônio e em títulos formais, “para”. No texto corrido, “pra” está liberado.

  • Certo: Puxa uma cadeira.

    Errado: PUXE UMA CADEIRA AGORA!

    Convite, não ordem. Sem caixa alta gritada e sem urgência fabricada.

Ícones e avatares

Sete rostos para a mesma conversa.

testados a 160, 98 e 40 px

O avatar é o mesmo no YouTube, no Instagram e no ícone de app, para a pessoa reconhecer de longe. A recomendação é a opção A; as outras ficam prontas para testes, campanhas e usos específicos. Todas foram desenhadas para o corte circular.

Lua de Bolso e os monogramas

Os desenhos mínimos da marca. Sem texto, então funcionam como SVG puro em qualquer lugar.

Carimbos e etiqueta

Peças com texto: aqui elas vêm com as fontes da marca. Para impressão, prefira o SVG.

Ícones de traço e biblioteca de carimbos

Grid de 48, traço de 3 px, pontas redondas. Um ícone por ideia.

Na interface, as marcas são componentes

No site, cada marca é um componente React com as cores dos tokens: muda sozinha no modo escuro e herda a cor do texto quando faz sentido. Sem title, o desenho é decorativo e fica escondido dos leitores de tela.

  • <LuaDeBolso />
  • <RLunar />
  • <RecorteAqui />
  • <BalaoLua />
  • <BalaoLua preenchido />
  • <Tesourinha />
  • <Carimbo />
  • <Carimbo variant="exlibris" />
  • <EtiquetaCaderno nome="…" />
  • Psicologia de BolsoCorpo & CabeçaCultura no DivãFilosofia de PadariaEntre NósMiudezas
    <IconeCaderno slug="…" />

Mascote

Crescêncio, o Cresc.

escuta mais do que fala

Nome de tio-avô brasileiro escondendo a palavra “crescente”: vintage, com humor, e lembra “crescer” sem cara de coach. O apelido é Cresc. Introvertido, curioso, levemente melancólico, ri de canto de boca. Escuta mais do que fala. É o próprio leitor que pensa demais, em forma de personagem.

forma canônica, com borda de adesivo

O que não muda (é o DNA)

  • Cabeça em lua crescente gorda, quase feijão, inclinada −18°, com a abertura para cima e para a direita.
  • Dois olhos amendoados de tamanhos diferentes: o esquerdo é 25% maior. É a assimetria da curiosidade e não pode ser “corrigida”.
  • Nariz em gota, claro.
  • Boca pequena e entreaberta, de quem vai dizer “hmm, faz sentido”.
  • Pescoço e corpo em cone estreito que se alarga para baixo.
  • Proporção: cabeça 62% da altura, corpo 38%.
  • A silhueta lembra um R. Chapada, ela continua reconhecível em 16 px.

Construção

A cabeça é a subtração de dois círculos: A com r = 150 em (240, 215) menos B com r = 118 em (318, 150), girada −18°. O contorno é Nanquim de espessura variável, como caneta-pincel: grosso na barriga da lua, fino na curva interna, com duas ou três tremidas de propósito.

Antes e depois

O rabisco de 2020 não foi apagado: virou retrato de família, colado com fita ao lado do redesenho. As mudanças vêm anotadas na margem, para quem acompanhou o canal desde o começo reconhecer o amigo antigo.

O Crescêncio de 2020, roxo elétrico com contorno preto, ao lado da versão nova, com anotações à mão explicando as mudanças
2020 → hoje: contorno em Nanquim, olho esquerdo maior de propósito, corpo de papel dobrado.SVG: baixar Crescêncio · 2020 → hoje, vetor, 11,1 KBPNG: baixar Crescêncio · 2020 → hoje, imagem de 1500 pixels de largura

Cinco humores

A cabeça é sempre a mesma: só mudam os olhos e a boca. Nenhum humor é bravo, sarcástico ou de sorriso largo.

  • Curioso

    o padrão: de olho no que vem

    mood="curioso"
  • Sonolento

    o mascote do modo escuro

    mood="sonolento"
  • Espantado

    susto contido, nunca escândalo

    mood="espantado"
  • Feliz

    ri de canto de boca

    mood="feliz"
  • Pensativo

    olhar de lado, hmm, faz sentido

    mood="pensativo"

Uma regra só, três momentos

O corpo em cone muda conforme a hora em que o caderno é lido. Fora desses três, o cone não se transforma.

  • Papel dobrado

    De dia: a forma canônica, um recorte colado no caderno.

    variant="papel"
  • Abajur

    À noite, no modo escuro: base de cerâmica com frisos em Lâmpada e a cordinha do tema.

    variant="abajur"
  • Taça de mousse

    No domingo, na newsletter. A cabeça pode virar Gomo de Lua.

    variant="taca"

Espiando pelo rasgo

O recurso-assinatura do hero, da página 404 e do banner do YouTube: a cabeça atravessa a folha e as mãozinhas agarram a borda.

Versões

  • Colorida (padrão)
  • Duas cores: Ameixa e Papel
  • Traço único, para carimbo e bordado
  • Só a cabeça (Lua de Bolso), a partir de 16 px

Regras de uso

Faça

  • Escuta, não julga. Pode estar curioso, sonolento, espantado, feliz ou pensativo.
  • Sobre cor ou foto, sempre com a borda de adesivo (Papel) e a sombra deslocada.
  • Respiro em volta igual à altura do olho maior.
  • No escuro: cabeça e corpo em #B99AE0, contorno creme #EFE4D0.

Não faça

  • Nunca bravo, sarcástico, apontando o dedo, fazendo joinha de coach ou sorriso largo de mascote corporativo.
  • Nunca de jaleco, estetoscópio, diploma ou prancheta: aqui não é consultório.
  • Nunca faz graça em temas sensíveis. Em crise, luto, suicídio, autolesão ou violência ele não aparece, ou aparece pequeno, em silêncio, de costas ou sentado ao lado.
  • Nunca distorcido, recolorido fora da paleta, com degradê, 3D ou brilho. No máximo 4 cores por aplicação.

Cores

Roxo de mimeógrafo, ameixa e um limão pra grifar.

clique no swatch e o HEX vai junto

Nove cores com trabalho definido, mais a cor-herança: o roxo elétrico de 2020 (#8001FE) virou Roxo Mimeógrafo, com o mesmo matiz e a saturação da tinta das provas da escola. O original fica guardado para a peça de arquivo “Crescêncio de 2020”.

No código, use sempre o token (var(--primary) ou a classe Tailwind): ele troca sozinho no modo escuro. HEX fixo, só em peça que não muda de tema.

Caderno de Recortes · modo claro

Papel

os fundos: nunca branco puro

  • Papel de Caderno

    RGB
    245, 238, 225
    token
    var(--paper)
    classe
    bg-paper

    Fundo principal. Creme quente que cansa menos que o branco na leitura longa.

  • Folha Avulsa

    RGB
    251, 247, 239
    token
    var(--paper-2)
    classe
    bg-paper-2

    Cards, campos de formulário e caixas de nota.

  • Papel Envelhecido

    RGB
    237, 230, 218
    token
    var(--paper-3)
    classe
    bg-paper-3

    Faixas alternadas e blocos de código.

  • Fita Crepe

    RGB
    232, 217, 181
    token
    var(--tape)
    classe
    bg-tape

    Fitas, etiquetas e caixas de citação, a 85% de opacidade.

Tinta

texto e traço: nunca preto puro

  • Nanquim

    RGB
    42, 33, 48
    token
    var(--ink)
    classe
    text-ink

    Texto principal, traço do Crescêncio e logo monocromático.

  • Grafite

    RGB
    92, 82, 98
    token
    var(--ink-muted)
    classe
    text-ink-muted

    Texto secundário, linha fina e metadados.

  • Grafite claro

    RGB
    144, 136, 137
    token
    var(--ink-faint)
    classe
    text-ink-faint

    Só ícones e detalhes decorativos. Nunca em texto.

Marca

a ameixa manda, o limão grifa

  • Ameixa

    RGB
    106, 44, 122
    token
    var(--primary)
    classe
    bg-primary

    Cor primária: links, botões, wordmark, notas de margem e anel de foco.

  • Berinjela

    RGB
    63, 27, 75
    token
    var(--primary-deep)
    classe
    bg-primary-deep

    Rodapé, blocos invertidos, hover de botão e fundo do logo negativo.

  • Roxo Mimeógrafo

    RGB
    122, 74, 168
    token
    var(--mimeo)
    classe
    text-mimeo

    Cor-herança: o roxo elétrico de 2020 com a tinta das provas da escola. Crescêncio, retícula, ilustração.

  • Lavanda Desbotada

    RGB
    199, 181, 222
    token
    var(--lavender)
    classe
    bg-lavender

    Seleção de texto, fita lavanda e fundo de post-citação. Nunca como texto sobre o Papel.

  • Mousse de Limão

    RGB
    242, 211, 91
    token
    var(--lemon)
    classe
    bg-lemon

    Marca-texto, botão da newsletter e sublinhado à mão. Nunca é cor de texto.

  • Chip de Ameixa

    RGB
    231, 219, 215
    token
    var(--primary-soft)
    classe
    bg-primary-soft

    Fundo de chip e de bloco suave.

Apoio e cadernos

cada uma tem um caderno

  • Tinta de Carimbo

    RGB
    158, 59, 38
    token
    var(--stamp)
    classe
    text-stamp

    Carimbos, alerta de spoiler e erros de formulário. Caderno Cultura no Divã.

  • Sálvia

    RGB
    79, 98, 54
    token
    var(--sage)
    classe
    text-sage

    Sucesso, selo “revisado com fontes” e caixa de cuidado. Caderno Corpo & Cabeça.

  • Azul Pauta

    RGB
    62, 95, 122
    token
    var(--blue)
    classe
    text-blue

    Mensagens informativas. Caderno Miudezas.

  • Café Coado

    RGB
    122, 82, 48
    token
    var(--coffee)
    classe
    text-coffee

    Xícaras do tempo de leitura e madeira nas ilustrações. Caderno Filosofia de Padaria.

  • Rosa Antigo

    RGB
    154, 61, 99
    token
    var(--rose)
    classe
    text-rose

    Detalhes afetivos. Caderno Entre Nós. Nada de rosa-chiclete.

Linhas e bordas

só enfeitam, nunca escrevem

  • Borda

    RGB
    194, 187, 181
    token
    var(--border)
    classe
    border-border

    Bordas de input e de card.

  • Fio

    RGB
    225, 218, 207
    token
    var(--rule)
    classe
    border-rule

    Linhas divisórias.

  • Linha de Margem

    RGB
    217, 139, 126
    token
    var(--margin-line)

    A linha vertical do caderno pautado.

  • Linha de Pauta

    RGB
    191, 208, 221
    token
    var(--blue-line)

    Pauta e quadriculado, sempre transparente (40–70%).

Luz de Abajur · modo escuro

O mesmo caderno lido de madrugada, com um abajur de cúpula amarelada aceso ao lado. O papel vira berinjela quase preta, o texto vira papel-creme iluminado, a Ameixa acende em lavanda e o limão vira a lâmpada. Um halo quente no canto da tela simula a luz vindo de fora.

A noite

o mesmo caderno, de madrugada

  • Noite de Berinjela

    RGB
    29, 23, 33
    token
    var(--paper)

    Fundo. Uma berinjela quase preta, nunca #000.

  • Folha no Escuro

    RGB
    42, 34, 48
    token
    var(--paper-2)

    Cards.

  • Superfície elevada

    RGB
    53, 43, 60
    token
    var(--paper-3)

    Menus, modais e caixas de nota.

  • Borda no escuro

    RGB
    74, 63, 80
    token
    var(--border)

    Bordas.

  • Pauta no escuro

    RGB
    58, 51, 70
    token
    var(--rule)

    Linhas de pauta e divisórias (decorativas).

A luz

o que o abajur acende

  • Papel sob Abajur

    RGB
    239, 228, 208
    token
    var(--ink)

    Texto principal.

  • Grafite no escuro

    RGB
    189, 176, 185
    token
    var(--ink-muted)

    Texto secundário.

  • Lavanda Acesa

    RGB
    205, 174, 230
    token
    var(--primary)

    Links, botões e foco: a Ameixa acesa.

  • Lâmpada

    RGB
    242, 212, 106
    token
    var(--lemon)

    CTA e destaque: o limão vira a lâmpada.

  • Grifo Noturno

    RGB
    74, 62, 30
    token
    var(--highlight)

    Marca-texto no escuro, com texto creme por cima.

  • Halo do Abajur

    RGB
    242, 184, 101
    token
    var(--lamp-glow)

    Brilho radial no canto da tela, a 6–8% de opacidade, respirando em 8 s.

  • Fita Âmbar

    RGB
    90, 78, 58
    token
    var(--tape)

    Fita crepe translúcida, a 70%.

  • Lavanda de citação

    RGB
    59, 46, 74
    token
    var(--lavender-surface)

    Cards de citação.

Cadernos à noite

mais claras, mesma família

  • Mimeógrafo aceso

    RGB
    185, 154, 224
    token
    var(--mimeo)

    Corpo do Crescêncio à noite e caderno Psicologia de Bolso.

  • Carimbo no escuro

    RGB
    238, 154, 126
    token
    var(--stamp)

    Carimbos, spoiler, erros. Cultura no Divã.

  • Sálvia no escuro

    RGB
    181, 198, 142
    token
    var(--sage)

    Sucesso e cuidado. Corpo & Cabeça.

  • Café no escuro

    RGB
    217, 179, 140
    token
    var(--coffee)

    Filosofia de Padaria.

  • Rosa no escuro

    RGB
    232, 161, 190
    token
    var(--rose)

    Entre Nós.

  • Azul no escuro

    RGB
    157, 187, 214
    token
    var(--blue)

    Miudezas.

Lado a lado

Os mesmos componentes, com os tokens de cada tema. Nada é recolorido à mão: só as variáveis mudam.

Psicologia de Bolso

Por que a gente ensaia discussão no chuveiro?

Recorte nº 042 · leitura de 2 cafés

A conversa que nunca aconteceu ganha três versões e um final perfeito. Isso tem nome, e a gente explica com calma.

Abrir o cadernoQuero minha colherada

Caderno de Recortes · claro

Psicologia de Bolso

Por que a gente ensaia discussão no chuveiro?

Recorte nº 042 · leitura de 2 cafés

A conversa que nunca aconteceu ganha três versões e um final perfeito. Isso tem nome, e a gente explica com calma.

Abrir o cadernoQuero minha colherada

Luz de Abajur · escuro

Contraste WCAG, calculado

As razões abaixo são calculadas aqui mesmo, a partir do HEX, com a fórmula de luminância relativa da WCAG 2.x. Texto normal precisa de 4,5:1 (AA) ou 7:1 (AAA); texto grande (24 px, ou 19 px em negrito) precisa de 3:1 (AA) ou 4,5:1 (AAA). Ícones e elementos gráficos precisam de 3:1. As razões são arredondadas para baixo: um par de 2,99:1 aparece como 2,9:1, nunca como 3,0:1.

Modo claro
AmostraTexto sobre fundoRazãoTexto normalTexto grande
Nanquim sobre Papel#2A2130 / #F5EEE1 · corpo de texto13,3:1AA passaAAA passaAA passaAAA passa
Nanquim sobre Folha#2A2130 / #FBF7EF · texto em cards14,4:1AA passaAAA passaAA passaAAA passa
Grafite sobre Papel#5C5262 / #F5EEE1 · texto secundário6,4:1AA passaAAA não passaAA passaAAA passa
Grafite sobre Folha#5C5262 / #FBF7EF · meta em cards6,9:1AA passaAAA não passaAA passaAAA passa
Ameixa sobre Papel#6A2C7A / #F5EEE1 · links e títulos8,0:1AA passaAAA passaAA passaAAA passa
Papel sobre Ameixa#F5EEE1 / #6A2C7A · botão primário8,0:1AA passaAAA passaAA passaAAA passa
Mimeógrafo sobre Papel#7A4AA8 / #F5EEE1 · chapéus e trechos curtos5,3:1AA passaAAA não passaAA passaAAA passa
Nanquim sobre Mousse de Limão#2A2130 / #F2D35B · botão da newsletter, marca-texto10,4:1AA passaAAA passaAA passaAAA passa
Grafite sobre Mousse de Limão#5C5262 / #F2D35B · legenda sobre limão5,0:1AA passaAAA não passaAA passaAAA passa
Papel sobre Berinjela#F5EEE1 / #3F1B4B · rodapé, blocos invertidos12,3:1AA passaAAA passaAA passaAAA passa
Limão sobre Berinjela#F2D35B / #3F1B4B · destaque no rodapé9,6:1AA passaAAA passaAA passaAAA passa
Nanquim sobre Lavanda#2A2130 / #C7B5DE · post-citação, seleção8,1:1AA passaAAA passaAA passaAAA passa
Nanquim sobre Fita Crepe#2A2130 / #E8D9B5 · etiquetas e legendas11,0:1AA passaAAA passaAA passaAAA passa
Ameixa sobre Chip#6A2C7A / #E7DBD7 · chips e filtros6,8:1AA passaAAA não passaAA passaAAA passa
Carimbo sobre Papel#9E3B26 / #F5EEE1 · carimbos e erros5,8:1AA passaAAA não passaAA passaAAA passa
Carimbo sobre Fita Crepe#9E3B26 / #E8D9B5 · carimbo sobre etiqueta4,8:1AA passaAAA não passaAA passaAAA passa
Carimbo sobre Alerta#9E3B26 / #ECDCCE · aviso de conteúdo5,0:1AA passaAAA não passaAA passaAAA passa
Sálvia sobre Papel#4F6236 / #F5EEE1 · Corpo & Cabeça, sucesso5,8:1AA passaAAA não passaAA passaAAA passa
Azul Pauta sobre Papel#3E5F7A / #F5EEE1 · Miudezas, informação5,8:1AA passaAAA não passaAA passaAAA passa
Café sobre Papel#7A5230 / #F5EEE1 · Filosofia de Padaria5,9:1AA passaAAA não passaAA passaAAA passa
Rosa Antigo sobre Papel#9A3D63 / #F5EEE1 · Entre Nós5,6:1AA passaAAA não passaAA passaAAA passa
Grafite claro sobre Papel#908889 / #F5EEE1 · ícones decorativos2,9:13:1 gráfico não passasó decorativo, nunca texto
Linha de Margem sobre Papel#D98B7E / #F5EEE1 · linha do caderno2,2:13:1 gráfico não passasó decorativo, nunca texto
Modo escuro (Luz de Abajur)
AmostraTexto sobre fundoRazãoTexto normalTexto grande
Papel sob Abajur sobre Noite#EFE4D0 / #1D1721 · corpo de texto13,9:1AA passaAAA passaAA passaAAA passa
Papel sob Abajur sobre Folha no Escuro#EFE4D0 / #2A2230 · texto em cards12,1:1AA passaAAA passaAA passaAAA passa
Papel sob Abajur sobre Superfície elevada#EFE4D0 / #352B3C · menus e modais10,6:1AA passaAAA passaAA passaAAA passa
Grafite no escuro sobre Noite#BDB0B9 / #1D1721 · texto secundário8,4:1AA passaAAA passaAA passaAAA passa
Grafite no escuro sobre Superfície elevada#BDB0B9 / #352B3C · meta em menus6,4:1AA passaAAA não passaAA passaAAA passa
Lavanda Acesa sobre Noite#CDAEE6 / #1D1721 · links e títulos9,0:1AA passaAAA passaAA passaAAA passa
Noite sobre Lavanda Acesa#1D1721 / #CDAEE6 · botão primário9,0:1AA passaAAA passaAA passaAAA passa
Noite sobre Lâmpada#1D1721 / #F2D46A · CTA12,0:1AA passaAAA passaAA passaAAA passa
Papel sob Abajur sobre Grifo Noturno#EFE4D0 / #4A3E1E · marca-texto8,3:1AA passaAAA passaAA passaAAA passa
Papel sob Abajur sobre Lavanda de citação#EFE4D0 / #3B2E4A · citações9,9:1AA passaAAA passaAA passaAAA passa
Carimbo no escuro sobre Noite#EE9A7E / #1D1721 · carimbos e erros7,9:1AA passaAAA passaAA passaAAA passa
Mimeógrafo aceso sobre Noite#B99AE0 / #1D1721 · Psicologia de Bolso7,3:1AA passaAAA passaAA passaAAA passa
Sálvia no escuro sobre Noite#B5C68E / #1D1721 · Corpo & Cabeça9,5:1AA passaAAA passaAA passaAAA passa
Café no escuro sobre Noite#D9B38C / #1D1721 · Filosofia de Padaria9,0:1AA passaAAA passaAA passaAAA passa
Rosa no escuro sobre Noite#E8A1BE / #1D1721 · Entre Nós8,5:1AA passaAAA passaAA passaAAA passa
Azul no escuro sobre Noite#9DBBD6 / #1D1721 · Miudezas8,7:1AA passaAAA passaAA passaAAA passa
Grafite claro sobre Noite#85778A / #1D1721 · ícones decorativos4,1:13:1 gráfico passasó decorativo, nunca texto

Regra prática: corpo de texto sempre em Nanquim (ou Papel sob Abajur). As cores dos cadernos passam no AA e valem para chapéus, títulos e trechos curtos. Lavanda, Limão e as linhas decorativas nunca viram texto sobre o Papel.

Proporção

No feed e nas peças, o papel respira mais do que a cor.

60% papel, 40% cor, com o limão sempre em dose de grifo. No Crescêncio, no máximo 4 cores por aplicação.

Tipografia

Quatro famílias, quatro papéis. Não existe quinta.

todas gratuitas, no Google Fonts

Uma serifa macia de revista para os títulos, uma serifa de livro para ler longe, uma grotesca de zine para a interface e uma letra de caneta para anotar na margem. Todas são variáveis, têm acentuação completa do português e são distribuídas sob a licença SIL Open Font License.

  • Títulos

    Fraunces

    Puxa uma cadeira.

    Aa Bb Cc Gg Rr · á é í ó ú â ê ô ã õ ç · 0123456789

    Serifa “old style” macia, na linhagem de Windsor, Cooper e Souvenir: capas de revista, livros de bolso e rótulos dos anos 70. O SOFT arredonda as serifas; o WONK entorta de leve o n, o h e o m, uma imperfeição de coisa feita à mão.

    Variável 100–900 · eixos opsz (9–144), SOFT (0–100) e WONK (0–1). Títulos em 600; hero, capas e thumbnails em 800–900.

    font-display · var(--font-display)Fraunces no Google Fonts (abre em nova aba)
  • Leitura longa

    Literata

    A mente não é manual de instruções. Está mais para colagem.

    Aa Bb Cc Gg Rr · á é í ó ú â ê ô ã õ ç · 0123456789

    Desenhada para ler em tela por muito tempo: altura-x generosa, contraste moderado e um itálico literário de verdade. Aguenta 2.000 palavras no celular sem cansar e dá ao texto cara de livro de cabeceira.

    Variável 200–900 · itálico real · opsz (7–72). Corpo em 400, ênfase em 600, itálico 400 na linha fina, em citações e em títulos de obras.

  • Interface e numeração

    Bricolage Grotesque

    Recorte nº 042 · 2 cafés

    Aa Bb Cc Gg Rr · á é í ó ú â ê ô ã õ ç · 0123456789

    Grotesca contemporânea com o tempero irregular das grotescas francesas antigas: sabor de zine e de xerox, simpática e nada corporativa. O eixo de largura gera etiquetas condensadas que parecem fichas de arquivo.

    Variável 200–800 · opsz (12–96) e wdth (75–100). Navegação e botões em 500–600; chapéus em 700 com wdth 85; numeração em 500 com wdth 80 e tabular-nums.

  • Anotação na margem

    Caveat

    olha isso aqui!

    Aa Bb Cc Gg Rr · á é í ó ú â ê ô ã õ ç · 0123456789

    Parece caneta esferográfica, é legível e tem acentuação completa. Ecoa o rabisco original do mascote: é a voz de quem anota “olha isso!” na margem.

    400–700 · notas de margem em 500; rabiscos de destaque, setas e assinatura do Crescêncio em 700.

Os eixos que dão o sotaque

As fontes variáveis deixam ajustar o tom sem trocar de família.

Recortes

Recortes

Fraunces 800 · SOFT 0, WONK 0 → SOFT 100, WONK 1 (o da marca)

Caderno de · 75

Caderno de · 85

Caderno de · 100

Bricolage Grotesque · largura 75, 85 e 100

Brilho Eterno de uma Mente sem Lembranças: título de obra vai no itálico de verdade.

Ênfase em 600, nunca em 800.

Literata · itálico real e peso 600

Escala

Razão de 1,25 no celular e 1,333 no desktop, com clamp(). A base da interface é 16 px.

  1. Display

    Fraunces 800 · opsz 144 · SOFT 100 · WONK 1 · clamp(2,75rem → 5,75rem) · entrelinha 1,02 · −0,02em

    Vamos recortar uns pensamentos.

  2. Título do recorte (h1)

    Fraunces 600 · SOFT 50 · WONK 1 · clamp(2,25rem → 3,75rem) · 1,08

    Por que a gente ensaia discussão no chuveiro?

  3. Intertítulo (h2)

    Fraunces 600 · SOFT 50 · WONK 0 · clamp(1,625rem → 2,375rem) · 1,15

    O que acontece aí dentro

  4. Subtítulo (h3)

    Fraunces 600 · SOFT 30 · clamp(1,3rem → 1,625rem) · 1,25

    Um recorte pra levar

  5. Linha fina

    Literata 400 itálico · clamp(1,2rem → 1,4375rem) · 1,5 · Grafite

    Spoiler: não é porque você é uma pessoa ruim.

  6. Corpo

    Literata 400 · 17 px no celular, 19 px a partir de 1024 px · 1,7 · 66ch

    Isso tem nome: viés de confirmação. Traduzindo: o cérebro adora ter razão, nem que seja sobre o horóscopo.

  7. Citação colada

    Fraunces 400 itálico · SOFT 100 · clamp(1,6rem → 2,25rem) · 1,3

    “Nem tudo cabe numa frase. Por isso a gente recorta.”

  8. Interface

    Bricolage Grotesque 500–600 · opsz 14 · 15–16 px

    Abrir o caderno

  9. Chapéu

    Bricolage Grotesque 700 · wdth 85 · 12 px · caixa alta · 0,12em

    Psicologia de Bolso

  10. Meta e numeração

    Bricolage Grotesque 500 · wdth 80 · 13 px · 0,04em · tabular-nums

    Recorte nº 042 · 05.10.2026 · leitura de 2 cafés

  11. Nota de margem

    Caveat 500 · 22 px · 1,15 · girada −1,5° · Ameixa (Lavanda Acesa no escuro)

    isso aqui vale grifar

Regras

  • Quatro famílias, cada uma com um papel. Não existe quinta família.
  • WONK 1 só a partir de 28 px. Nos tamanhos grandes, SOFT 100 e WONK 1; em h2 e h3, SOFT 50 e WONK 0.
  • Caveat nunca abaixo de 20 px, nunca em parágrafo nem em botão, no máximo 8 palavras por vez, uns 30% maior que o texto em volta e girada −1,5°.
  • Corpo de artigo em Literata, com medida de 62 a 68 caracteres (66ch), hifenização em pt-BR e 1,1em entre parágrafos.
  • Numeração e metadados em Bricolage condensada com tabular-nums: “Recorte nº 042” sempre com três dígitos.
  • Itálico para títulos de filmes, livros e discos. Negrito em 600, nunca em 800 no meio do texto.
  • Nada de caixa alta gritada em títulos. Caixa alta só no chapéu e nos carimbos.

No código: next/font e Tailwind

As fontes vêm do Google Fonts pelo next/font (sem requisição externa no navegador) e viram classes no Tailwind v4.

src/app/layout.tsx · next/font
// src/app/layout.tsx
import { Fraunces, Literata, Bricolage_Grotesque, Caveat } from "next/font/google";

const fraunces = Fraunces({
  subsets: ["latin"],
  axes: ["SOFT", "WONK", "opsz"],
  variable: "--font-fraunces",
  display: "swap",
});
const literata = Literata({
  subsets: ["latin"],
  style: ["normal", "italic"],
  axes: ["opsz"],
  variable: "--font-literata",
  display: "swap",
});
const bricolage = Bricolage_Grotesque({
  subsets: ["latin"],
  axes: ["opsz", "wdth"],
  variable: "--font-bricolage",
  display: "swap",
});
const caveat = Caveat({ subsets: ["latin"], variable: "--font-caveat", display: "swap" });

// <html lang="pt-BR" className={`${fraunces.variable} ${literata.variable} ${bricolage.variable} ${caveat.variable}`}>
src/app/globals.css · Tailwind v4
/* src/app/globals.css (Tailwind CSS v4) */
@import "tailwindcss";

@theme inline {
  --font-display: var(--font-fraunces), "Fraunces", Georgia, serif;
  --font-serif: var(--font-literata), "Literata", Georgia, serif;
  --font-sans: var(--font-bricolage), "Bricolage Grotesque", system-ui, sans-serif;
  --font-hand: var(--font-caveat), "Caveat", cursive;
}

/* uso: font-display · font-serif · font-sans (padrão da UI) · font-hand */

Recursos vintage

O moderno está na execução. O vintage, nos detalhes.

tudo isso é CSS de verdade, não foto

Fita, rasgo, pauta, carimbo e marca-texto são o tempero. Usados com medida, deixam a página com cara de caderno; usados demais, viram fantasia. Todos os exemplos abaixo usam as classes reais do globals.css e acompanham o modo escuro.

  • Fita crepe

    tapetape-lefttape-righttape-cornertape-lavendertape-lemon<TapeStrip />

    Faça: Fita segura alguma coisa: um card, uma foto, uma citação. No máximo uma ou duas por tela.

    Não faça: Fita colada no nada, em cima de texto ou em todo card da página.

  • Recorte nº 042

    Borda rasgada

    torn-toptorn-bottomtorn-both

    Faça: Em tiras de título, topo e pé de seção e polaroids. O rasgo é sempre o mesmo desenho, nunca aleatório a cada visita.

    Não faça: Rasgar botão, campo de formulário ou card de texto longo.

  • o que tá na sua cabeça hoje?

    Newsletter, caixa de nota, 404.

    Papel pautado

    paper-ruled

    Faça: Newsletter, caixas de nota curtas, carrosséis e a página 404.

    Não faça: Pauta atrás do corpo do artigo ou de qualquer texto longo: atrapalha a leitura.

  • banner · prancha · esquema

    Quadriculado

    paper-grid

    Faça: Fundo de banner, prancha técnica e esquemas com setas.

    Não faça: Pauta e quadriculado na mesma peça.

  • Retícula

    halftone(cor: currentColor)

    Faça: Sombra de ilustração, terço inferior de avatar e capas, sempre na cor do desenho.

    Não faça: Retícula atrás de texto ou em mais de uma camada.

  • Alerta de spoilerRevisado com fontes

    Carimbos

    <StampText><Carimbo />

    Faça: Tinta de Carimbo, rotação de −6° a −12°, um por bloco. Biblioteca: spoiler, Recorte nº, revisado com fontes, 1 café, novo, errata colada.

    Não faça: Carimbo em toda parte (perde a graça) ou em cor fora da paleta.

  • O cérebro adora ter razão, nem que seja sobre o horóscopo.

    Marca-texto

    <mark>

    Faça: Grifar uma ideia por parágrafo. No escuro, ele vira o grifo noturno sozinho.

    Não faça: Parágrafo inteiro grifado, ou marca-texto como fundo de botão.

  • Psicologia de BolsoFilosofia de PadariaRecorte nº 042

    Etiqueta escolar

    label-caderno

    Faça: Chapéus de caderno, cabeçalhos de seção e lower thirds de vídeo.

    Não faça: Etiqueta como botão: ela informa, não clica.

  • retrato de domingo

    Polaroid

    polaroid

    Faça: Fotos em duotone (sombras Berinjela, luzes Papel), base de 44 px e legenda em Caveat.

    Não faça: Foto colorida crua dentro da polaroid, ou legenda em Caveat abaixo de 20 px.

  • passa o mouse
    e ele endireita

    Cards de papel e adesivo

    paper-cardtilt-ltilt-rsticker

    Faça: Cards repousam com ±0,6° e endireitam no hover. Mascote sobre cor ou foto sempre com borda de adesivo.

    Não faça: Girar mais de 3°, ou animar com o usuário pedindo movimento reduzido.

  • Recorte nº 042

    leitura de 1 café (4 minutos)leitura de 2 cafés (8 minutos)leitura de um bule (14 minutos)

    Numeração de arquivo e cafés

    metarecorteNo()<Cups minutes />

    Faça: Todo recorte ganha número de três dígitos (“Recorte nº 042”) e tempo em cafés: 1 café até 5 min, 2 cafés até 10, um bule acima disso.

    Não faça: Número sem zeros à esquerda, ou “5 min de leitura” no lugar dos cafés.

  • isso aqui vale grifar

    Nota de margem

    handaside.nota (em .prose-recorte)

    Faça: Até 8 palavras, uns 30% maior que o texto em volta, girada −1,5°. Opinião vem marcada como nota de margem.

    Não faça: Parágrafo, botão ou qualquer texto abaixo de 20 px em Caveat.

Cadernos

Seis cadernos, uma cabeça só.

cada um com sua cor, seu ícone e seu Crescêncio

As categorias do site são cadernos. Cada um tem uma cor de apoio da paleta, um ícone de traço e uma pose do Crescêncio. A cor aparece no chapéu, na capitular, nas listas e na aba de fichário; o resto da página continua papel.

  • Psicologia de Bolso

    Conceitos da psicologia num tamanho que cabe no bolso.

    Vieses, emoções, memória, hábitos, autoestima: a ciência do “por que eu sou assim?”, com fonte e sem jaleco.

    Séries fixas: Dicionário da CabeçaRecorte Científico

    óculos redondos

    claro · var(--cat-psicologia-de-bolso)

    escuro · Luz de Abajur

  • Corpo & Cabeça

    Saúde física e mental como a mesma conversa.

    Sono, ansiedade, cansaço, movimento, telas, terapia e quando procurar ajuda. Sem terrorismo, sem milagre e com fontes oficiais.

    Séries fixas: Recorte Científico

    tênis de caminhada

    claro · var(--cat-corpo-e-cabeca)

    escuro · Luz de Abajur

  • Cultura no Divã

    Filmes, séries, discos e jogos deitados no divã.

    O que personagens, trilhas e finais polêmicos revelam sobre a gente. Spoiler sempre carimbado.

    Séries fixas: Pipoca & DivãLado B

    balde de pipoca

    claro · var(--cat-cultura-no-diva)

    escuro · Luz de Abajur

  • Filosofia de Padaria

    Grandes ideias em tamanho de balcão.

    Nietzsche, Camus, Beauvoir, os estoicos, o tédio e o sentido das coisas, entre um pingado e um pão na chapa.

    pingado na xícara

    claro · var(--cat-filosofia-de-padaria)

    escuro · Luz de Abajur

  • Entre Nós

    Amor, amizade, família e o grupo do WhatsApp.

    Como a gente se conecta, se desencontra e aprende a se reencontrar. Relações de todo tipo, com limites e conversas difíceis.

    coração colado com fita

    claro · var(--cat-entre-nos)

    escuro · Luz de Abajur

  • Miudezas

    A psicologia por trás de tudo (inclusive do mousse).

    A fila do mercado, a geladeira aberta sem fome, a tristeza de domingo à noite, travar justo no que mais precisa fazer.

    Séries fixas: Por que a gente faz isso?

    lupa para as miudezas

    claro · var(--cat-miudezas)

    escuro · Luz de Abajur

No código: var(--cat-<slug>) para a cor e var(--cat-<slug>-soft) para o fundo claro do caderno. O componente <CategoryLabel slug="…" /> monta o chapéu.

Voz e tom

Conversa, não palestra.

a gente e você, sempre

É aquele amigo que leu o livro, viu o filme, anotou na margem e mesmo assim pergunta “e você, o que achou?”. Meio bibliotecário de sebo, meio companhia de padaria. Curioso, gentil, levemente irônico, com uma pontinha de melancolia herdada do Crescêncio. Honesto sobre o que a ciência sabe e sobre o que ela ainda não sabe. Não é terapeuta de ninguém, não vende fórmula e sabe a hora de dizer “isso aqui é assunto pra terapia, e tá tudo bem procurar”.

  • curioso
  • gentil
  • levemente irônico
  • honesto
  • calmo
  • bem-humorado sem piada às custas de ninguém

Seis princípios

  1. 01

    Conversa, não palestra

    Escrever como quem senta ao lado, não como quem sobe no púlpito. Abrir com uma cena do cotidiano e só depois chegar ao conceito. O leitor é interlocutor, não aluno.

    “Por que a gente explode justo com quem mais ama? (Spoiler: não é porque você é uma pessoa ruim.)”

  2. 02

    Ciência com cheiro de café

    Rigor com leveza: citar a fonte, separar estudo de achismo, traduzir o termo técnico na mesma frase e dizer o tamanho da evidência.

    “Isso tem nome: viés de confirmação. Traduzindo: o cérebro adora ter razão, nem que seja sobre o horóscopo.”

  3. 03

    Recorte, não tratado

    Cada texto é um pedaço bem cortado: um tema, uma pergunta, uma ideia. Assume o que ficou de fora e indica onde se aprofundar.

    “Esse texto não vai dar conta da teoria do apego inteira (precisaria de umas 400 páginas e um bule de café). É só um recorte.”

  4. 04

    Cuidado antes de esperteza

    Acolher sem passar pano, sem culpar e sem prometer cura. Não diagnosticar, não prescrever. Quando o tema pesa, aviso no topo e caixa de cuidado no fim.

    “Se esse texto mexeu com alguma coisa aí dentro, tudo bem parar a leitura aqui. E se estiver difícil demais, o CVV atende 24 horas pelo 188, de graça e sem julgamento.”

  5. 05

    Cultura pop como espelho

    Filmes, séries, discos, games e livros são portas de entrada para ideias, nunca enfeite ou isca de clique. O spoiler sempre vem avisado.

    “Brilho Eterno de uma Mente sem Lembranças não é um filme sobre esquecer alguém. É sobre o que a gente faria com a dor se pudesse apagá-la.”

  6. 06

    Limão vira mousse

    Otimismo realista com humor leve. O azedo não é negado, mas a marca oferece alguma coisa para fazer com ele, mesmo que seja só descansar.

    “A boa notícia é que dá pra negociar com ela. A má é que não vai ser hoje que você arruma o guarda-roupa. Tudo bem.”

Faça e não faça

Faça

  • Usar “a gente” e “você”, alternando frases curtas e longas, no ritmo de quem conversa.
  • Abrir com uma cena reconhecível (o visto sem resposta, a louça que fica pra amanhã) antes do conceito.
  • Citar fontes (autor, ano, link) e dizer o tamanho da evidência.
  • Traduzir todo termo técnico na mesma frase em que ele aparece.
  • Fechar com “Um recorte pra levar” e uma pergunta que puxe conversa.
  • Escrever títulos honestos, em forma de pergunta real.
  • Usar linguagem de pessoa, não de prontuário: “pessoa com depressão”.
  • Rir de si mesmo e das situações, nunca de pessoas ou de quem está sofrendo.
  • Corrigir publicamente quando errar, com uma “errata colada”.

Não faça

  • Clichês de coach: “saia da zona de conforto”, “mindset”, “seja sua melhor versão”, “virar a chave”, “gatilho mental”.
  • Diagnosticar à distância ou usar termo clínico como adjetivo (“sou muito TOC”, “meu chefe é narcisista”).
  • Prometer cura, resultado ou prazo: “em 7 dias”, “nunca mais”, “X passos para mudar sua vida”.
  • Clickbait, falso segredo, caixa alta gritada, emoji demais e exclamação em série.
  • Tom de jaleco: “é importante ressaltar que”, “segundo a literatura vigente”.
  • Romantizar o sofrimento ou cair na positividade tóxica.
  • Culpar o leitor (“se você não muda é porque não quer”).
  • Linguagem capacitista como xingamento (“louco”, “surtado”).
  • Apresentar opinião como ciência: opinião vem marcada como nota de margem.

Vocabulário da casa

Palavras do caderno: recorte, margem, colar, rabisco, grifo, página, fita.

  • recorte
  • a gente
  • Puxa uma cadeira.
  • caderno
  • nota de margem
  • colar, rabiscar, grifar
  • virar a página
  • Um recorte pra levar
  • Recorte nº 042
  • leitura de 1 café
  • 2 cafés
  • um bule
  • Pensa comigo?
  • aqui entre nós
  • sem jaleco
  • à luz de abajur
  • alerta de spoiler
  • Continuar a conversa
  • Guardar este recorte
  • Abrir o caderno
  • Puxar conversa
  • Enviar pro caderno
  • Correio do Crescêncio
  • Mousse de Domingo
  • Quero minha colherada
  • errata colada
  • Este recorte agora é seu

Reescritas: antes e depois

O mesmo recado, na voz da marca.

  • Título

    AntesDescubra os 5 segredos da inteligência emocional!

    DepoisPor que a gente explode justo com quem mais ama? (Spoiler: não é porque você é uma pessoa ruim.)

    Pergunta real no lugar de falso segredo e lista mágica.

  • Texto

    AntesÉ importante ressaltar que a procrastinação é um fenômeno multifatorial.

    DepoisProcrastinar não é preguiça. Muitas vezes é uma tentativa desajeitada de fugir de uma emoção ruim.

    Sai o jaleco, entra a cena. O conceito vem traduzido.

  • Promessa

    AntesSaia da zona de conforto e seja sua melhor versão em 7 dias.

    DepoisNinguém vira outra pessoa em sete dias. Mas entender por que você faz o que faz já é um bom começo.

    Sem prazo, sem fórmula, sem clichê de coach.

  • Linguagem

    AntesMeu chefe é narcisista e a semana foi depressiva.

    DepoisMeu chefe é difícil de lidar e a semana foi pesada.

    Termo clínico não é adjetivo.

  • Culpa

    AntesSe você não muda, é porque não quer.

    DepoisMudar é difícil, e não é só questão de vontade. Às vezes o primeiro passo é entender o que está te segurando, e tudo bem pedir ajuda pra isso.

    Acolhe sem passar pano e sem culpar.

  • Thumbnail

    AntesVOCÊ PRECISA VER ISSO!!!

    DepoisPor que eu travo?

    Pergunta honesta. No YouTube, no máximo uma palavra em caixa alta; no site, nenhuma.

  • Botão

    AntesAssine já a nossa newsletter

    DepoisQuero minha colherada

    O CTA fala a língua da casa, não a do funil.

  • Erro de formulário

    AntesErro: e-mail inválido.

    DepoisEsse e-mail parece ter perdido um pedaço. Confere aí?

    Diz o que houve e como resolver, sem bronca.

  • Aviso

    AntesATENÇÃO: conteúdo pesado!!! Se estiver mal, procure ajuda.

    DepoisEste recorte fala de temas que podem mexer com você. Leia no seu ritmo. Se precisar, o CVV atende 24h pelo 188.

    Aviso claro, sem drama, com caminho de ajuda real.

Cuidado editorial

Isto aqui é conversa, não consultório.

A marca fala de saúde mental, e isso vem com responsabilidade. A gente não diagnostica, não prescreve e não promete cura. Quando o tema pesa, o caderno avisa antes, cuida durante e aponta ajuda real no fim.

Temas sensíveis

Sempre que o recorte tocar em um destes assuntos, entram o aviso no topo e a caixa de cuidado no fim:

  • suicídio
  • autolesão
  • luto
  • crise
  • abuso e violência
  • transtornos alimentares

Ajuda real, sempre sinalizada

188
CVV: ligação gratuita, 24 horas, ou chat em cvv.org.br (abre em nova aba)
192
SAMU, para emergências
/ajuda
outros caminhos, incluindo terapia gratuita e acessível
  • Aviso de conteúdo, no topo

    Sempre que o recorte tocar num tema sensível. É ligado pelo campo sensitive: true no frontmatter do post e aparece antes do primeiro parágrafo.

  • Caixa de cuidado, no fim

    Obrigatória quando sensitive: true, e fixa na página Conversas. Traz o CVV (188, ligação gratuita, 24 horas, ou chat em cvv.org.br), o SAMU (192) e o link para /ajuda.

  • Aviso em Corpo & Cabeça

    Todo texto do caderno leva: “isto não substitui acompanhamento profissional”.

  • Correio do Crescêncio

    Perguntas de leitores viram recorte anônimo, respondido com cuidado. Não é atendimento: nunca responder como se fosse terapia online.

Os componentes, como aparecem no site

São sempre os mesmos componentes, com o mesmo texto. Não reescreva a caixa de cuidado a cada post.

<CareBox variant="aviso" /> · no topo do recorte

Aviso de conteúdoEste recorte fala de temas que podem mexer com você. Leia no seu ritmo. Se precisar, o CVV atende 24h pelo 188.

<CareBox variant="completa" /> · no fim do recorte

<CareBox variant="curta" /> · Conversas e formulários

Como escrever sobre o que pesa

  • Nunca descrever métodos de autolesão ou suicídio. Seguir as recomendações de comunicação responsável da OMS e do CVV.
  • Não diagnosticar ninguém à distância: nem leitor, nem celebridade, nem personagem.
  • Linguagem de pessoa, não de prontuário: “pessoa com depressão”, nunca “o depressivo”.
  • Nada de romantizar a dor (“a dor te faz mais forte”) nem de positividade tóxica (“é só pensar positivo”).
  • Quando o assunto for de terapia, dizer isso com todas as letras, sem drama: “isso aqui é assunto pra terapia, e tá tudo bem procurar”.

O Crescêncio em temas sensíveis

Faça

  • Presença silenciosa: pequeno, na pose de escuta, de costas ou sentado ao lado. Sem acessório, sem piada, sem expressão exagerada.
  • Ou simplesmente não aparecer. Silêncio também é cuidado.

Não faça

  • Nunca usar o mascote fazendo graça em texto sobre crise, luto ou violência, nem em thumbnail de tema sensível.
  • Acessório, piada visual ou expressão de espanto em tema de crise.
Pequeno, quieto, escutando, no canto da página. Nada de acessório e nada de humor visual: é só alguém para conversar.

Aplicações

Toda peça é uma página do mesmo caderno.

papel, um recorte, uma tira e, no máximo, um rabisco

Fundo de papel ou cor de caderno, um recorte (foto ou Crescêncio) com borda de adesivo, uma tira rasgada com o título em Fraunces e, no máximo, uma anotação em Caveat. As fotos passam pelo duotone Berinjela + Papel para unificar o feed.

YouTube

Avatar

800 × 800, exibido como círculo de 98 px

Opção A, a mesma do Instagram e do ícone de app. Testar a 98, 40 e 24 px.

Avatar A, Crescêncio Recortado sobre Ameixa

Todas as opções, com prévias em 160, 98 e 40 px, estão em Ícones e avatares.

Thumbnail

1280 × 720 · testar a 168 × 94

Três camadas: (1) Papel com grão ou a cor do caderno; (2) rosto ou Crescêncio recortado, com borda Papel de 12 px; (3) título de 2 a 4 palavras em Fraunces 900 numa tira rasgada, com UMA palavra em marca-texto. Nada no canto inferior direito, onde fica a duração.

Thumbnail · Por que eu travo?, reduzida a 168 por 94 pixels
Teste de leitura a 168 × 94 px, o tamanho da lista de sugestões. Se o título não lê aqui, não lê em lugar nenhum.

Marca d’água e lower third

150 × 150 a 60%

R Lunar como marca d’água; Etiqueta de Caderno nos lower thirds.

Descrição do canal
Um caderno de recortes para quem pensa demais: psicologia, saúde, filosofia e cultura pop explicadas com calma, fonte e um pouco de graça. Só alguém para conversar. Se a vida te der limões... faça um mousse.

Instagram

Feed em 4:5, com o conteúdo-chave na faixa central que aparece no recorte 3:4 da grade do perfil.

Avatar

320 × 320, exibido com 110 px

Opção A, igual ao YouTube.

Avatar A, Crescêncio Recortado sobre Ameixa

Todas as opções, com prévias em 160, 98 e 40 px, estão em Ícones e avatares.

Carrossel-caderno

1080 × 1350 (4:5) · 6 a 10 lâminas

Capa com título em tira rasgada, Crescêncio e “Recorte nº”. Lâminas em papel pautado ou quadriculado, Literata de 34 a 40 px, até 45 palavras, uma nota em Caveat e a paginação “p. 2/8”. Penúltima: “Um recorte pra levar”. Última: “Pensa comigo?”.

Reels e Shorts

1080 × 1920 (9:16)

Título no terço central seguro; legendas sempre em Bricolage Grotesque 600 sobre caixa de fita crepe.

Bio do Instagram
Um caderno de recortes para quem pensa demais.
Psicologia, saúde e cultura pop.
Só alguém para conversar.
Se a vida te der limões... faça um mousse.

Outras peças do kit social

Tudo o que está em brand/svg/social e não entrou nas fichas acima.

Favicon e ícone de app

A Lua de Bolso em tudo que é pequeno. Até 32 px, sem nariz; a partir de 48 px, entra o nariz de gota. O ícone acompanha o tema do navegador.

16 px
favicon.ico
32 px
favicon.ico
48 px
favicon.ico
180 px (a 50%)
apple-icon (180)

No site: src/app/icon.svg (com versão escura embutida), favicon.ico (16, 32 e 48) e apple-icon.png (180 × 180).

Newsletter: Mousse de Domingo

Chega no domingo de manhã, sempre que tiver recorte bom pra contar. O cone vira taça e a cabeça pode virar Gomo de Lua.

Nesta colherada

  • Um recorte pra pensar, com fonte e sem pressa.
  • Um Lado B pra sentir: um filme ou um disco.
  • Uma pergunta pra levar pro café.
Quero minha colherada

Se a vida te der limões... faça um mousse.

Assinatura de e-mail

Simples, em tabela e com estilos inline, para funcionar nos clientes de e-mail. Troque o nome entre colchetes.

Um abraço,

[Seu nome]

Recortes Mentais · Só alguém para conversar.

recortesmentais.com · Instagram · YouTube

Se a vida te der limões... faça um mousse.

assinatura.html
<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, sans-serif; color: #2A2130;">
  <tr>
    <td style="padding-right: 14px; vertical-align: top;">
      <img src="https://www.recortesmentais.com/brand/png/icones/lua-de-bolso.png" width="48" height="48" alt="Recortes Mentais" style="display: block; border-radius: 10px;">
    </td>
    <td style="border-left: 2px solid #D98B7E; padding-left: 14px; vertical-align: top;">
      <div style="font-size: 15px; font-weight: bold;">[Seu nome]</div>
      <div style="font-size: 13px; color: #5C5262;">Recortes Mentais · Só alguém para conversar.</div>
      <div style="font-size: 13px; margin-top: 6px;">
        <a href="https://www.recortesmentais.com" style="color: #6A2C7A;">recortesmentais.com</a> ·
        <a href="https://www.instagram.com/recortesmentais/" style="color: #6A2C7A;">Instagram</a> ·
        <a href="https://www.youtube.com/@recortesmentais" style="color: #6A2C7A;">YouTube</a>
      </div>
      <div style="font-size: 12px; color: #5C5262; margin-top: 6px;">Se a vida te der limões... faça um mousse.</div>
    </td>
  </tr>
</table>

Contato oficial: contato@recortesmentais.com.

Vídeo curto

Crescêncio em vídeo.

quem conduz é você; ele comenta na margem

No YouTube Shorts, no TikTok, no Reels e no canal, quem apresenta é você. O Crescêncio entra como co-apresentador que reage: sem voz, com a cara e um balão escrito à mão. Escuta, pensa, se surpreende, concorda e, no fim, fecha o caderno.

O kit serve em qualquer editor. Cada clipe vem com transparência de verdade, sobre verde para chroma, sobre Papel e em GIF. A lista abaixo sai dos arquivos que existem hoje nas pastas do kit.

A Bíblia do Crescêncio, em um minuto

O resumo do que ele faz em cena. A versão completa, com mapa de reações, balões aprovados, séries, som, responsabilidade e checklist de publicação, está nos documentos logo abaixo.

  • Quem ele é

    Co-apresentador que reage, sem voz: fala com a cara e com um balão escrito à mão em Caveat. Quatro verbos: escuta, pensa, se surpreende, concorda. Nunca corrige você, nunca debocha, nunca fica mais de 3 s roubando a cena.

  • Quando entra

    Cinco momentos: gancho, “hmm”, virada, alívio cômico e fechamento. Pelo menos 6 s entre uma entrada e outra; até 3 aparições em 30 s, 4 em 45 s e 5 em 60 s.

  • Onde fica

    Na margem esquerda do quadro (x 60 a 490), com você levemente à direita. Vaga A, margem baixa (padrão); vaga B, margem alta; vaga C, o palco em tela cheia, uma vez por vídeo. Entre 34% e 46% da largura, de 1 a 3 s por aparição.

  • O que não se mexe

    Nunca espelhado (o olho esquerdo maior é DNA), esticado, recolorido ou com filtro. Sempre com a borda de adesivo e a sombra. Nunca sobre o rosto nem sobre a legenda. Um Crescêncio por vez.

  • O short

    Gancho em 2 s (o gancho é a capa), um conceito só e o fechamento com “Pensa comigo?” ou com o mousse. Sem vinheta no começo: a intro é do vídeo longo.

  • Séries fixas

    Por que a gente faz isso? · Dicionário da Cabeça em 30s · Pipoca & Divã em 60s · Mito ou fato do Crescêncio · Correio do Crescêncio · Filosofia de Padaria em 45s. Cada uma com a mesma abertura e o mesmo fechamento.

O semáforo de temas

Classifique o roteiro antes de gravar. Na dúvida entre verde e amarelo, é amarelo; entre amarelo e vermelho, é vermelho. Em tema sensível, o Crescêncio não faz graça.

  • Verde

    cotidiano, hábitos, procrastinação, amizade, filosofia, cultura pop, mitos de ciência, sono e movimento

    O Crescêncio: o kit inteiro.

  • Amarelo · tema de cuidado

    terapia, ansiedade, raiva sem violência, solidão, sofrimento do dia a dia, término

    O Crescêncio: só o que é calmo: piscando, hmm, concordando, sonolento, entra espiando e as figurinhas calmas. Nada de espanto, pulinho, “oxe?”, “eita” ou efeito cômico.

  • Vermelho · sensível de verdade

    saúde mental grave, crise, suicídio, autolesão, luto por morte, violência, abuso, trauma

    O Crescêncio: ele não aparece, ou aparece uma vez, pequeno, piscando, sem balão e longe do trecho difícil. Nunca na capa, nunca durante a fala de ajuda, e o mousse não fecha o vídeo.

Os documentos

Reações

9 clipes em 1080 × 1080, a 30 quadros por segundo, com o Crescêncio centralizado e folga em volta. Todos começam na mesma pose e no mesmo lugar, então dá pra emendar: entra espiando, uma reação, piscando e sai afundando.

As bolinhas em cada reação são o semáforo de temas (verde, amarelo, vermelho): cheia, pode; meia, com restrição; vazia, não pode.

O xadrez atrás é a transparência: tudo o que é xadrez some no seu vídeo.

Gráficos

Vinhetas, transições, carimbos, etiquetas dos cadernos, marca-texto e a lua de progresso. Etiqueta, carimbo e marca-texto nunca dividem o mesmo segundo com o Crescêncio.

Abertura e fechamento3 clipes

têm fundo próprio

Já vêm com o papel de fundo, então saem só em MP4, GIF e pôster. Entram em tela cheia.

Transições2 clipes

corte no quadro marcado

O papel cobre a tela inteira por um instante: corte o vídeo de baixo no quadro indicado e a troca some atrás dele.

Carimbos3 clipes

batem e ficam

O recorte cola, o carimbo desce, bate com um achatadinho e assenta. O último quadro é a marca parada: congele o tempo que quiser e saia com fade de 3 a 4 quadros.

Etiquetas dos cadernos6 clipes

lower third, 2 a 5 s

A etiqueta escolar entra pela esquerda (no lugar da vaga A), a fita prende, o nome se escreve, segura e sai. O último quadro fica vazio. Nunca no mesmo segundo do Crescêncio.

Marca-texto e progresso3 clipes

faixas finas, por cima do vídeo

O marca-texto vai sob a palavra-chave da legenda (um por vídeo, dois no máximo em 60 s); a lua corre no alto da área segura.

Qual arquivo usar em qual editor

A regra que não muda de versão pra versão: transparência de verdade quando o editor aceitar; verde #00B140 com chroma quando não aceitar. Os nomes dos menus mudam; o arquivo certo, não.

  • Premiere Pro, After Effects, DaVinci Resolve, Final Cut Pro

    Use-alpha.mov (na pasta do projeto); reserva: -alpha.webm

    Transparência de verdade e bordas limpas: é o caminho mais seguro. O WebM só serve se o seu editor abrir WebM com alfa; teste uma vez.

  • CapCut (computador ou celular), InShot, VN

    Use-verde.mp4 + chroma key no #00B140 (na pasta do projeto); ou -papel.mp4 e .gif

    Se o seu CapCut aceitar o .mov ou o WebM com transparência, prefira. O -papel.mp4 serve quando a cena também é Papel. Figurinhas PNG entram direto como sobreposição.

  • Canva

    Use.gif ou -papel.mp4; teste o -alpha.webm

    Se o WebM aparecer com fundo preto, volte pro GIF. Os 540 px do GIF sobram para o tamanho em que ele aparece na margem (cerca de 430 px).

  • Só no celular (Stories, WhatsApp, editor do próprio app)

    Use.gif e as figurinhas PNG

    A figurinha já vem com o balão desenhado. Os apps raramente aceitam vídeo com transparência.

  • Corte em tela cheia (vaga C)

    Use-papel.mp4

    Já vem sobre Papel: complete o 9:16 com Papel liso em cima e embaixo.

  • Capa, thumbnail, post parado

    Use-poster.png e as figurinhas

    O pôster é o quadro-chave do clipe, com fundo transparente.

  • Newsletter e e-mail

    Use.gif

    E-mail não toca vídeo. A transparência do GIF é de tudo ou nada: use sobre fundo Papel ou claro.

  • Site

    Use-alpha.webm com -papel.mp4 de reserva

    É o que esta página usa. No Safari e no iPhone, a prévia cai no -papel.mp4, porque o WebKit não mostra o alfa do WebM.

Figurinhas

O Crescêncio com o balão já desenhado, recortado como figurinha de papel. Uma por vez, a 42% do quadro (cerca de 430 px), na margem esquerda, de 1,5 a 3 s. Nunca espelhe, recolora ou tire a borda.

Capas

Título de 2 a 4 palavras em forma de pergunta honesta, em Fraunces Black, com uma palavra em marca-texto; o Crescêncio recortado; o carimbo “Recorte nº” no alto. Tudo dentro da área segura e do recorte 3:4 da grade. Em tema vermelho, a capa vai sem ele.

O gerador monta a capa pronta com qualquer título, medido na fonte de verdade (| força a quebra de linha; --sensivel deixa o Crescêncio pequeno e quieto, para tema de cuidado):

node scripts/video/templates/capas.mjs --modelo 1 --titulo "Por que eu|travo?" --destaque travo --numero 002

Guias de área segura

Sobreposições transparentes de 1080 × 1920 que mostram onde a interface de cada app cobre o vídeo.

Quanto a interface de cada app cobre do quadro 1080 × 1920, em pixels
AppEm cimaEmbaixoÀ esquerdaÀ direita
TikTok150 px500 px60 px160 px
YouTube Shorts200 px440 px60 px150 px
Instagram Reels270 px480 px60 px140 px
Os três ao mesmo tempo270 px500 px60 px160 px

Tudo o que importa (rosto, legenda, Crescêncio, balão, carimbo) mora entre x 60 e 920, y 270 e 1420. A legenda fica na faixa x 160–920, y 1110–1400, e a grade do perfil mostra só o recorte 3:4 do meio (y 240 a 1680): a capa precisa funcionar ali.

O guia é a camada mais de cima da edição, esticada na tela inteira. Desligue antes de exportar. As interfaces mudam com a versão do app, o celular e o idioma: os números são conservadores (revisados em outubro de 2026) e valem conferir de vez em quando num rascunho privado.

Estilo de legenda

Duas versões aprovadas; nas duas, uma palavra-chave em marca-texto por vez.

quando a cabeça
vai pro chuveiro

Caixa de fita crepe (padrão da marca). Bricolage Grotesque 600, 60 a 68 px num quadro de 1080, Nanquim sobre Fita Crepe #E8D9B5. A melhor em fundo agitado.

quando a cabeça
vai pro chuveiro

Contorno (a dos templates). Bricolage Grotesque Condensed 800, 80 a 88 px, Folha #FBF7EF com contorno Nanquim de uns 8 px por fora.
  • De 2 a 6 palavras por tela, no máximo 2 linhas de 26 a 30 caracteres. Quebre por sentido.
  • Uma palavra-chave em marca-texto Mousse de Limão, no máximo uma a cada 10 s.
  • Centralizada na faixa x 160–920, y 1110–1400. Nunca sobre o rosto.
  • Sincronizada com a fala, pelo menos 0,6 s por tela, entrando com fade de 3 quadros.
  • Caixa normal, sem emoji e sem ponto final no fim da tela. Números em algarismos: “46,9%”.
  • Nada de karaokê palavra por palavra, cor trocando a cada sílaba, tremida ou zoom.
  • Caveat nunca é legenda: é a letra do Crescêncio e das notas de margem.
  • Revise a legenda automática nome por nome, e suba o .srt no YouTube.
Prancha do estilo de legenda: posição no quadro 9:16, anatomia com medidas, regras da casa e quatro exemplos certos e quatro errados
A prancha completa, com os exemplos certos e errados.PNG: baixar prancha do estilo de legenda, 390 KB

Downloads

Leva pra casa. É seu.

este recorte agora é seu

Todos os arquivos da marca em SVG (vetor, para impressão e edição) e PNG (a partir de 1000 px, com as fontes da marca já desenhadas). Os PNG vêm com fundo transparente quando o desenho não tem fundo próprio.

Para parcerias, imprensa ou dúvidas de uso, escreva para contato@recortesmentais.com.

Logos12 arquivos

Tira Rasgada, pranchas e alternativas

Avatares7 arquivos

opções A a G, 800 × 800, para corte circular

Ícones e carimbos13 arquivos

Lua de Bolso, monogramas, carimbos e ícones de traço

Crescêncio12 arquivos

canônico, adesivo, pranchas e versões noite

Kit social12 arquivos

YouTube e Instagram

Para quem não abre o site: este brandbook inteiro, em texto, está em brand/BRANDBOOK.md. A especificação completa (cores, voz, mascote, aplicações) está em brand/brand-spec.json, e os arquivos-fonte em brand/svg/.