Design system • memória • calor humano

Um visual novo para o RestauraAI.

Esse HTML é a base pra você mexer sem medo. Eu puxei o sistema pra algo mais fotográfico, quente e emocional: menos SaaS, mais memória, família e restauração.

Ver tokens Ver componentes

Antes

→

Depois

Recupere memórias que o tempo quase apagou. Você vê a prévia antes de pagar. Isso continua sendo o centro da oferta.

Tokens

Base visual do sistema

Esses são os blocos que eu usaria como guia pra qualquer página do produto.

--bg / #f5efe6

--paper / #fffaf2

--accent / #9b5e2a

--good / #0f766e

Tipografia

Fraunces + Inter

Fraunces pro emocional e premium. Inter pro corpo, leitura e clareza.

Raio

24–28px

Curvas suaves, mais humanas, menos “app genérico”.

Sombra

Soft depth

Sombras amplas e leves, pra parecer papel/print, não dashboard.

Tipografia

Escala textual

HeroRecupere memórias que o tempo quase apagou.

HeadlineUm presente que emociona de verdade.

SubtitleEnvie uma foto antiga, veja a prévia restaurada e só pague se gostar.

BodyCorpo em 16–18px com line-height 1.6 para leitura fácil em mobile.

Componentes

Blocos reutilizáveis

Eu desenhei isso pra você recortar e colar na LP sem reinventar tudo.

Hero

Recupere fotos antigas da sua família.

Envie uma foto antiga, veja a prévia restaurada e só pague se gostar do resultado.

Quero ver minha foto restaurada Ver exemplo

Before / after

Antes

→

Depois

Cards

Card de benefício

Mais calor, menos “feature list”.

Curto.
Escaneável.
Focado em memória / família / segurança.

FAQ

Preciso pagar antes?

Não. Esse é o centro da oferta.

Minha foto antiga funciona?

Sim, principalmente fotos desbotadas, amareladas ou danificadas.

Botões

Estados recomendados

CTA principal CTA secundário Botão neutro

Use um CTA principal só. O resto é apoio, não competição.

Princípios

Como aplicar esse sistema

1. Fotográfico

Use imagens grandes, reais e orgânicas.

2. Emocional

Foque em memória, família, presente e reconexão.

3. Claro

CTAs diretos, sem excesso de UI e sem ruído.