Papel
#FFFFE9fundo principalParatempo · sistema visual
Um lugar para
abrir espaço e criar.
Uma linguagem digital editorial e tátil: matéria, gesto e tempo traduzidos num sistema claro para todas as páginas.
Com espaço✳Com intenção✳Sem pressa✳À tua maneira
01 Fundamentos
A identidade começa
no que permanece.
As propostas podem contar histórias diferentes. Estas escolhas dão-lhes a mesma voz.
Paleta da marca
Uma base quente, um contraste profundo e acentos vindos dos materiais.
Tinta
#35192Ftexto e contrasteVinho
#6D3A43ênfase e secçõesTerracota
#A46F5Fdetalhe e açãoAreia
#CEA893calor e destaqueLavanda
#BDB8E0acento expressivoCampos de cor · fundos atmosféricos
A cor entra como luz,
não como efeito.
Degradês amplos e desfocados criam profundidade sem competir com o conteúdo. São construídos apenas com a paleta Paratempo e funcionam como ambiente para sessões especiais.
2–3 manchas amplascentros fora do eixotransição longacontraste preservado
FUNDO CLARO · EDITORIAL
--gradient-atelierLuz de atelier
Papel, lavanda e areia.
CALOR · ACOLHIMENTO
--gradient-alvoradaPrimeira luz
Terracota diluída sobre papel.
CALMA · MATÉRIA
--gradient-fioFio de lavanda
Lavanda, papel e areia.
CONTRASTE · FECHO
--gradient-entardecerEntardecer
Vinho, tinta e luz quente.
Usar em áreas generosas. Evitar em chips, botões ou superfícies menores que um cartão editorial.
Texto em tinta nos fundos claros; papel no padrão escuro. Nunca posicionar texto sobre a mancha mais contrastante.
Se animado, deslocar apenas 2–3% em 12–18 s. Sem pulsação e sempre respeitando redução de movimento.
Tipografia
Duas vozes principais e uma terceira, manuscrita, usada como gesto.
O tempo volta
às tuas mãos.
Uma caixa por mês para descobrires uma técnica, experimentares ao teu ritmo e partilhares o processo com a comunidade.
Leitura confortável em parágrafos, navegação e controlos.feito à tua maneira
Reservada a frases curtas, nunca a texto funcional.Ritmo e forma
Espaço consistente para a página respirar; cantos suaves sem transformar tudo em cápsula.
04
08
12
16
24
32
12
20
28
999
4 px como unidade-base · cartões 20 px · imagem de destaque 28 px · botões em pílula
02 Componentes
Peças comuns.
Com personalidade.
Os componentes repetem a mesma lógica visual; cor e conteúdo podem variar com a secção.
A mensagem e o impulso são duas formas separadas. O espaço entre elas faz parte do componente.
✳ Gesto & corPróxima edição 01 / 04
Pequenas etiquetas identificam técnica, edição ou contexto; não substituem títulos.
gesto criativoExperimentar também é criar.
Materiais, tempo e espaço para encontrares o teu jeito.
Descobrir a técnica“Não ficou perfeito — mas foi a primeira peça que fiz do meu jeito.”
Usar depoimentos reais e autorizados; conteúdo de exemplo deve ser identificado como tal.
Fotografia · pessoas da comunidade
Rostos que dão
contexto ao gesto.
Na referência, retratos pequenos aproximam cada pergunta, técnica e experiência de uma pessoa. Para a Paratempo, usamos o mesmo princípio de proximidade — com luz natural, ambientes de criação e uma presença espontânea.
Martapintura
Inêscrochê
Lúciabordado
Davidesenho
Camilacostura
Nunooficina
Perfis e fotografias fictícios, criados com IA apenas para demonstrar o sistema. Não representam clientes nem testemunhos reais.
Inês · crochê
Como mantenho a tensão do fio mais regular?
Experimenta pousar o fio no dedo antes de puxar o ponto.
Lúciadescobre o bordado livrehá 3 meses na comunidade
Direção fotográficaNatural, próxima
Natural, próxima
e sem pose de banco de imagens.
- Luz suave de janela; fundo real de atelier, casa ou mesa de trabalho, desfocado e sem competir com o rosto.
- Retrato próximo, expressão tranquila e espontânea; pessoa no centro com margem para corte circular.
- Cor de pele fiel e textura natural; sem filtros pesados, retoque de pele ou adereços que não pertençam à pessoa.
- Originais quadrados. Aplicar o círculo com CSS e
object-fit: cover; nunca gravar a máscara no ficheiro. - Referência de escala: 32–40 px em autoria, 48–56 px em cartão, 64–80 px em perfil. Em conjunto, manter anel claro e sobreposição curta.
Direção de ilustração · referência aprovada
Este é
o traço.
Um desenho a lápis fino, delicado e assumidamente manual, aplicado sempre como traço isolado. O contorno preserva pequenas irregularidades, mas nunca fica pesado. Não existe papel, área branca ou preenchimento: o fundo da página atravessa toda a ilustração.
Leve, mas presente.
Contorno fino com variação subtil de pressão, anatomia natural e hachura apenas onde ajuda a explicar o volume. O resultado deve respirar sobre o fundo, sem massas escuras ou aparência de gravura.
Padrão de produção
Como repetir
este resultado.
O tema pode mudar. A referência de traço e os critérios abaixo não.
- 01Define um gesto real
Escolhe uma ação manual clara e ligada à criação. Uma imagem, um momento e um foco; não inventes uma cena decorativa.
- 02Usa a referência certa
Inclui
public/assets/crochet-pencil-strokes-fine.pngcomo referência estrita de estilo, nunca como alvo de edição. Preserva a leveza do traço e a transparência, não a composição do exemplo. - 03Descreve o enquadramento
Pede um close-up editorial, recorte natural e anatomia legível. Especifica apenas os materiais necessários para entender o gesto.
- 04Trava a linguagem gráfica
Lápis em vinho-grafite escuro, contorno fino com pressão subtilmente desigual e hachura curta e espaçada. O volume nasce de poucos riscos bem colocados, nunca de manchas, contornos grossos ou massas preenchidas.
- 05Exporta apenas os traços
Todo pixel que não seja um risco de grafite deve ter alpha zero — inclusive dentro das mãos, materiais e espaços entre hachuras. Sem papel, branco, cinza, vinheta, halo ou sombra exterior.
- 06Inspeciona antes de aprovar
Confere anatomia, leveza, contraste, hachura económica, transparência e leitura no fundo real da página. Se parecer pesada, preenchida ou próxima de uma gravura, ainda não está aprovada.
Prompt-base e checklist de aprovação
Substitui apenas o que está entre parênteses retos. Mantém a referência aprovada anexada em todas as gerações.
Use case: stylized-concept.
Asset type: uma ilustração editorial para o site Paratempo, para [local de uso].
Input images: public/assets/crochet-pencil-strokes-fine.png é uma REFERÊNCIA ESTRITA DE ESTILO, não é alvo de edição. Reproduzir a espessura fina, o contraste, a hachura leve e a transparência entre as linhas, sem copiar a pose nem a composição.
Subject: [um gesto manual concreto ligado à atividade criativa].
Composition: close-up editorial, recorte orgânico, um foco visual claro, apenas as mãos e os materiais necessários à ação; anatomia natural e número correto de dedos.
Style: desenho monocromático a lápis, visivelmente feito à mão; contornos finos e delicados com pequena variação de pressão; linhas de construção discretas; hachura curta, leve e espaçada apenas onde define volume; cruzamentos mínimos nas dobras mais profundas; intervalos entre todos os riscos completamente vazados; anatomia natural e acabamento editorial arejado.
Color: somente traços em vinho-grafite escuro, com contraste suficiente para leitura; nenhum preenchimento branco, cinzento ou de cor de marca.
Background: transparência verdadeira (alpha). Todo pixel que não seja traço deve ter alpha zero, inclusive dentro das mãos, objetos, fios e entre hachuras.
Constraints: criar apenas uma imagem. Manter a espessura visual fina em toda a ilustração; evitar contorno grosso, hachura densa, massas pretas, linha vetorial perfeitamente uniforme ou sombreado aerografado. Sem colagem, gouache, aguarela, pintura digital, ícone vetorial, 3D, aspeto fotográfico, texto, logótipos ou marca-d'água. Sem papel, área branca, preenchimento cinzento, vinheta, halo, brilho, névoa, gradiente ou sombra exterior. Não acrescentar pessoas, mãos, dedos ou objetos que não sejam necessários ao gesto.- O contorno está fino, delicado e consistente, sem perder a pequena variação natural do lápis?
- As sombras usam poucas hachuras leves e espaçadas — sem áreas densas, gradientes ou manchas suaves?
- A mão tem anatomia natural e o gesto compreende-se sem explicação?
- O fundo e todos os intervalos internos são transparentes, sem branco, cinzento ou halo?
- A imagem continua nítida, mas visualmente leve, quando aplicada ao fundo real da página?
Se qualquer resposta for “não”, a imagem ainda não está aprovada. Corrige o desvio específico e volta a comparar com a referência.
Caderno de gestos · técnicas
O mesmo traço,
muitos gestos.
Quatro momentos da experiência, desenhados com o mesmo lápis fino, a mesma leveza de contorno e a mesma hachura económica — da primeira pincelada à partilha.
experimentar a corA primeira
tinta + papelA primeira
pincelada.
um mês começa aquiAbrir espaço
caixa + surpresaAbrir espaço
para criar.
seguir ponto a pontoUm fio
fio + tempoUm fio
leva ao outro.
mostrar só o que quiseresUm gesto.
ativo · single-hand-sharing-card-pencil-fine.pngUm gesto.
Uma escolha.
Um mundo, várias entradas
Cada técnica tem
o seu começo.
Imagens grandes, cortes diferentes e títulos que entram na composição — como um pequeno editorial, não uma fila de miniaturas.
GESTO 01abrir espaço · criar
Ritual
COR 02experimentar · compor
Pintura
TEXTURA 03entrelaçar · continuar
Fios
Biblioteca de sessões
Mais formas de
contar a experiência.
Modelos para dar variedade ao percurso da página. São peças combináveis, não uma sequência obrigatória.
uma pausa para criarComeça pela matéria.
Começa pela matéria.
Segue o teu ritmo.
Uma imagem com textura, um título claro e um único próximo passo.
Ver como funcionaImagem e texto em equilíbrio; o conteúdo continua legível sem depender da fotografia.
01 / experimentarUma técnica
de cada vez.✳
de cada vez.✳
fios · aprender fazendo02 / partilharSem pressa.
Sem comparação.
Sem comparação.
Um bloco principal conduz; módulos menores dão contexto e variedade sem virar painel de métricas.
Uma caixa pensada para o mês.
Materiais e orientação simples.
O processo também conta.
Use sequência numerada apenas quando a ordem ajuda a compreender o serviço.
EXEMPLO ILUSTRADOUm gesto próprio
Participanteimagem de perfil · exemplo
Um gesto próprio
de chegar à peça.
Ilustração de processo, não pose de catálogo.
Participanteimagem de perfil · exemploNa página final, substituir por imagem autorizada e nome/contexto confirmados.
Participantepartilha ilustrativa · pintura
EXEMPLO“A primeira camada ficou diferente do que imaginei. Ainda bem que continuei.”
♡ 12 apreciações ilustrativas↗ conversa de exemplo
A interface deve parecer acolhedora e discreta; não apresentar números fictícios como prova real.
matéria, gestoe pequenas descobertas
Misturar escalas e cortes cria ritmo; preservar textura, contraste e tons da marca.
Preciso de experiência?
Não. A proposta é experimentar uma técnica com orientação acessível.
O que vem na caixa?
Uma resposta curta e concreta, alinhada com o conteúdo da edição disponível.
E se eu não terminar?
O ritmo é teu. A comunicação deve explicar com clareza como funciona a subscrição.
Respostas curtas e honestas; esclarecer preço, envio e cancelamento sem esconder condições.
Um fecho distinto, com uma ação só; pode usar cor de acento e detalhe ilustrado da marca.
03 Leitura das referências
Boas ideias.
Com sotaque nosso.
O valor está na clareza e no ritmo das páginas — não em copiar cores, tipos ou personalidade de outras marcas.
O que as oito páginas fazem bem
Mostram uma ideia.
Depois, fazem-na avançar.
Um primeiro ecrã memorável abre a conversa; cada sessão responde à pergunta seguinte. Fotografia, interface e ilustração entram quando ajudam a perceber uma coisa concreta.
Uma promessa.
Um gesto visual.
Os heróis mais fortes combinam uma frase específica com um elemento que só aquela marca poderia mostrar.
Para nós: a caixa, a matéria e o primeiro gesto criativo.
Cada sessão
tem um papel.
As páginas alternam explicação, demonstração e prova — em vez de repetir a mesma grelha de cartões.
Promessa→Experiência→Técnicas→Comunidade→Dúvidas→Convite
Uma sequência narrativa; não uma fórmula rígida. Mostrar é mais
forte que prometer.
Interfaces, objetos e passos visuais tornam a proposta tangível. Na Paratempo, a própria criação é a demonstração.
Usar imagens de processo, materiais e peças reais.A comunidade
precisa aparecer.
Retratos autorizados e pequenas histórias criam confiança; o desenho de mãos funciona como camada editorial, não como substituto de uma pessoa real.
Um gesto próximoUma técnica · uma pessoa · o seu tempo
Estruturas de página · leitura das referências
Não é só o que mostram.
É como conduzem.
As páginas mudam o formato quando muda a pergunta da pessoa. Estas quatro estruturas ajudam a escolher o ritmo certo para cada proposta.
A · Narrativa visual
Promessa → experiência → pertença
Alterna uma abertura emocional com demonstrações de uso, cenas humanas e blocos de respiro. Boa para apresentar o ritual mensal como um todo.
Inspirado na cadência de Luffu e Bloom; fotografia e escala próprias da Paratempo.B · Processo explicado
Demonstração ao lado de etapas
Mostra uma conversa, objeto ou momento de uso enquanto explica a sequência. Ideal quando é preciso esclarecer como receber, começar ou pedir ajuda.
Adaptar a clareza de processo da Axis; não importar linguagem de consultoria ou finanças.C · Benefícios em sequência
Um bloco, uma razão para continuar
Empilha módulos com um benefício principal e uma imagem demonstrativa por vez. Ajuda a apresentar materiais, técnicas ou vantagens sem formar uma parede de texto.
Inspirado na progressão de OWO; usar acentos de cor e densidade da marca Paratempo.D · Confiança com contexto
Prova visível, detalhe verificável
Combina números ou credenciais com explicação, casos e respostas práticas. Ajuda a reduzir dúvidas sem transformar a página numa lista de promessas.
Leitura de Axis e Bloom: só usar métricas, clientes, políticas e resultados comprováveis.Roteiro recomendado · página de apresentação da caixa
Uma visita guiada,
não um catálogo.
Este é um ponto de partida para a landing page principal. O conteúdo real e as dúvidas de quem compra devem decidir a ordem final.
Essencial · abertura
Promessa + imagem da caixa
Explicar em poucas palavras o que chega e o que a pessoa poderá fazer. Uma fotografia de matéria ou gesto dá identidade ao primeiro ecrã.
Essencial · entendimento
Como funciona em três passos
Recebe → experimenta → partilha. Reduz incerteza cedo e mostra a experiência inteira de uma vez.
Essencial · tangibilidade
O que vem nesta edição
Materiais, orientação e resultado possível; organizar por função e mostrar detalhes reais, sem prometer peças idênticas.
Conforme a edição · demonstração
A técnica em uso
Uma sequência de imagens ou módulos alternados: mãos a começar, detalhe do material e peça em processo. Uma composição própria para cada técnica, com o mesmo sistema.
Se houver conteúdo autorizado · comunidade
Quem cria e o que descobriu
Retratos pequenos ligados a nomes, técnica e projetos reais. Dar espaço a uma história individual ou mosaico de trabalhos; nunca preencher a grelha com prova social inventada.
Essencial · decisão informada
Preço, envio e dúvidas práticas
Explicar frequência, cancelamento, prazos e o que pode variar. FAQ ou resumo logístico entram antes do convite final, não escondidos no rodapé.
Essencial · próximo passo
Convite final, sem distrações
Retomar a promessa e oferecer uma ação principal clara. CTA ao longo da página pode repetir-se, mantendo o mesmo destino e nome.
Regra de edição: remover qualquer sessão que não esclareça, demonstre, dê confiança ou ajude a avançar. A página pode ser mais curta se a proposta já estiver clara.
Sessões que podem entrar
Escolher pelo papel,
não pela tendência.
Dentro da caixa
Fotografia de cima, detalhe dos materiais e etiquetas curtas para cada peça.
Usar quando o conteúdo do box for parte central da decisão.Arquivo de técnicas
Pequeno índice visual de edições passadas ou técnicas possíveis, com cartões em escalas diferentes.
Usar se houver histórico real e imagens consistentes.Trabalhos de quem participa
Mosaico irregular de resultados e retratos ligados a autoria, técnica e contexto.
Usar só com autorização e crédito confirmado.Transparência da assinatura
Resumo visual de frequência, preço, envio e cancelamento, seguido de respostas detalhadas.
Essencial se houver cobrança recorrente ou condições de envio.Uma pessoa, um gesto
Perfil curto com retrato, técnica preferida e uma frase aprovada pela própria pessoa.
Preferir poucas histórias reais a muitos cartões genéricos.Inspiração para continuar
Recursos, ideias ou próximos passos ligados à edição, sem transformar a landing numa página de conteúdo infinita.
Usar quando houver material editorial útil e atualizado.Números com contexto
Uma métrica em destaque acompanhada da definição, período e fonte — ou credenciais que ajudem a avaliar a marca.
Não preencher com números ilustrativos que pareçam resultados reais.Índice de dúvidas
Perguntas agrupadas por tema, com navegação curta e respostas expansíveis. Uma busca só entra se funcionar de verdade.
Dar prioridade a envio, recorrência, materiais e cancelamento.Nota de quem faz
Um retrato, uma breve nota editorial e o motivo por trás de uma edição ou escolha de materiais.
Usar voz e imagem autorizadas; evitar biografias genéricas.Ver a leitura das oito páginas, uma a uma
Ilustração + experiênciaTraço manual e narrativa contemplativa. Para nós: ilustrar um gesto criativo sem substituir as pessoas reais.
Cor + demonstraçãoBlocos de benefício, telefone em destaque e CTA repetido. Para nós: mostrar o conteúdo da caixa com hierarquia, sem trazer o néon.
História modularSessões alternadas e uma faixa de contraste. Para nós: organizar experiência, técnicas e confiança em ritmos distintos.
Editorial + produtoTexto e interface alternados, prova social e respiro. Para nós: intercalar histórias de criação com cartões de comunidade.
Pessoas + cuidadoRetratos, avatares e cenas de uso. Para nós: pôr quem cria no centro, sempre com imagens autorizadas.
Tipografia + retratosTítulos monumentais e grelha de pessoas. Para nós: um único momento tipográfico forte, equilibrado por fotografia contemporânea e humana.
Casos + variedadePortefólio com módulos de formatos diferentes. Para nós: cada técnica pode ter uma composição própria, mantendo os mesmos tokens.
UI + explicaçãoDiagramas e exemplos de colaboração. Para nós: mostrar como uma partilha ou desafio acontece, sem inventar funcionalidades.
Direção de imagem
Três maneiras de
dar corpo à ideia.
Fotografia editorial contemporânea
Pessoas atuais em apartamentos urbanos pequenos e vividos, com roupa natural, móveis comuns, luz disponível e gestos espontâneos. Preservar poros, marcas de expressão, fios soltos, vincos e alguma desordem doméstica. O fazer manual surge como pausa do digital, não como nostalgia. Evitar atelier rústico, cottagecore, interiores de catálogo, pele excessivamente tratada e poses publicitárias.
Pequenas cenas de UI
Um post, um desafio ou uma partilha ilustrativa da comunidade. Interface limpa, legível e claramente identificada como exemplo.
Ilustração editorial
Uma única linguagem: desenho monocromático a lápis, com contorno fino, variação subtil de pressão e hachura curta e económica. Variar gestos, materiais e cenas sem introduzir massas escuras, acabamento digital polido, colagem, cor ou outro traço. Reservar fotografias para mostrar pessoas e processos reais.
Escala de leitura sugerida
Grande no que importa.
Calma no resto.
- Hero
- 64–96 px desktop · 44–60 px mobile
- Título de sessão
- 40–64 px · entre 4 e 9 palavras
- Texto corrido
- 16–18 px · largura confortável
- Legenda / etiqueta
- 10–12 px · apenas informação auxiliar
04 Movimento
O scroll acompanha
o gesto.
GSAP é a ferramenta. A sensação Paratempo é contida, tátil e sempre ao serviço da leitura.
Opacidade e deslocamento de 38 px; grupos revelados com intervalos de 0,11 s.
Fotografias atravessam o enquadramento com amplitude visível; no mobile, o percurso fica reduzido.
Seções chegam desmontadas, com escala, deslocamento, rotação e perspectiva, e assumem a composição final no scroll.
Botões giram o impulso; fotografias aproximam 3,5% e legendas levantam 4 px.
Avatares e notas respiram em ritmos diferentes, com movimento curto e senoidal.
Sem parallax, loops ou animação decorativa quando a pessoa prefere menos movimento.
Próximo passo
O sistema agora vive
nas páginas.
As três direções aplicam esta base em páginas completas: editorial, comunidade e ritual.