Solv Framed Fintech Landing Page — Skill de Recriação

1. Filosofia de design

Construa a página como uma demo de produto refinada colocada dentro de uma "tela sem navegador" suavemente arredondada, não como um site corporativo de ponta a ponta. O contraste vem de três sistemas trabalhando juntos:

Restrição editorial: headlines grotescas grandes, texto curto, espaço vazio generoso e poucas cores.
Tato do produto: controles em pílula, mini-interfaces embutidas, números ao vivo, controles deslizantes, acordeões e fragmentos de dashboard.
Movimento cinematográfico suave: o conteúdo não quica nem voa. Ele se resolve a partir de desfoque, baixa opacidade e deslocamento vertical modesto com uma curva de ease-out, depois permanece imóvel.

A página deve parecer calma em repouso e responsiva durante a interação. O movimento é uma ferramenta de hierarquia, não de decoração.

2. O que é diretamente observado vs inferido

Diretamente observado

Uma captura de desktop de 22,38 segundos a 60 fps em 2272×1440.
Um fundo fotográfico fixo de floresta ao redor de uma casca de página arredondada.
Superfícies brancas, oliva, limão-ácido, azul claro, lavanda clara, cinza e fotográficas.
Coreografia de carregamento do herói com desfoque + fade + translação vertical.
Rolagem vertical suave com um polegar de rolagem estreito e limão na borda direita da casca da página.
Revelações de seção que usam clareamento de desfoque, opacidade e movimento ascendente curto.
Uma faixa horizontal de logotipos.
Uma calculadora ao vivo com um polegar de intervalo quadrado e estimativa de financiamento em tempo real.
Um acordeão que troca a resposta aberta com altura animada e ícones de mais/menos.
Uma imagem de depoimento com texto de citação e pontos de paginação.
Três cartões de artigo, uma seção de CTA centralizada e um rodapé escuro embutido.
Nenhum scroll-jacking óbvio ou sequência horizontal fixada.

Inferência de alta confiança

Framer Motion, GSAP ScrollTrigger ou um sistema de revelação semelhante orientado por interseção.
Uma camada de rolagem suave estilo Lenis ou rolagem de trackpad/navegador muito suave.
Uma marquee CSS duplicada para a faixa de logotipos.
Uma única família grotesca moderna; provavelmente na vizinhança de Suisse/Neue Haas/Aeonik. A identidade exata da fonte não é recuperável apenas a partir da captura.
O comportamento em tablet/mobile não é mostrado. As regras responsivas abaixo são requisitos de implementação projetados para preservar a qualidade do desktop.

3. Sistema visual

3.1 Tokens de cor

Esses valores são amostrados ou reconstruídos visualmente a partir da captura. Use-os como a paleta de implementação canônica.

:root {
  /* Core */
  --ink: #273000;          /* oliva escuro amostrado; FAQ/rodapé/texto */
  --ink-strong: #1f2700;   /* oliva mais profundo para controles de alto contraste */
  --acid: #ddff5a;         /* calculadora amostrada/limão de acento */
  --acid-soft: #efffb0;    /* brilho do CTA / campos destacados sutis */
  --paper: #ffffff;
  --paper-warm: #fbfbf7;

  /* Cartões de suporte */
  --sky: #cfe7e9;          /* azul claro amostrado */
  --lavender: #d9def8;     /* lavanda clara amostrada */
  --mist: #efeee9;         /* chips, pílula de declaração de logotipo */
  --line: rgba(39, 48, 0, 0.14);
  --line-on-dark: rgba(221, 255, 90, 0.16);

  /* Texto */
  --text-primary: #273000;
  --text-secondary: #74756d;
  --text-on-dark: #ddff5a;
  --white-muted: rgba(255, 255, 255, 0.72);

  /* Vidro do herói */
  --glass-dark: rgba(48, 43, 39, 0.48);
  --glass-light: rgba(255, 255, 255, 0.82);
  --hero-scrim: linear-gradient(
    180deg,
    rgba(20, 24, 10, 0) 42%,
    rgba(20, 24, 10, 0.24) 68%,
    rgba(20, 24, 10, 0.72) 100%
  );
}

Regras de uso de cor

Use --paper para aproximadamente 65–75% da superfície da página.
Use --ink para uma seção grande e o rodapé, não para todos os cartões.
Reserve --acid para calls to action principais, a calculadora, tipografia do FAQ, o polegar de rolagem personalizado e pequenos chips de status.
Não use mais de uma cor de suporte pálida em um componente pequeno. Um cartão é branco, azul, lavanda, limão, oliva ou fotográfico — não um gradiente multicolorido.
Evite preto puro para texto e controles. O preto-oliva é uma parte importante do caráter original.
A foto da floresta atrás da casca deve permanecer suficientemente suave para que a casca da página seja sempre dominante. Adicione uma lavagem ciano/creme sutil, se necessário.

3.2 Tipografia

Tipo de letra

A captura usa um neo-grotesco neutro com espaçamento compacto e geometria suave. Use esta pilha:

font-family: "Suisse Intl", "Neue Haas Grotesk Text", "Inter", "Helvetica Neue", Arial, sans-serif;

Para uma implementação de código aberto, use Inter Tight para exibição e Inter para corpo. Não introduza uma família secundária serifada ou monoespaçada.

Sistema de peso

Exibição: 400–500. O tipo grande não é pesado.
Cabeçalho de seção: 400–500.
Corpo: 400.
Ênfase dentro do corpo: 600.
Botões/navegação: 500–600.
Leitura numérica grande: 500.

Escala tipográfica para desktop

:root {
  --fs-hero: clamp(3.75rem, 4.35vw, 5.15rem);       /* ~60–82px */
  --fs-section-xl: clamp(3rem, 3.4vw, 4.25rem);    /* ~48–68px */
  --fs-section: clamp(2.5rem, 2.8vw, 3.65rem);     /* ~40–58px */
  --fs-card-title: clamp(2rem, 2.2vw, 3rem);       /* ~32–48px */
  --fs-quote: clamp(1.75rem, 2vw, 2.75rem);        /* ~28–44px */
  --fs-body-lg: 1.25rem;                           /* 20px */
  --fs-body: 1rem;                                 /* 16px */
  --fs-small: 0.875rem;                            /* 14px */
}

Altura da linha e tracking

Herói/cabeçalhos grandes: line-height: 0.96–1.02, letter-spacing: -0.045em.
Cabeçalhos de seção: line-height: 0.98–1.05, letter-spacing: -0.04em.
Títulos de cartão: line-height: 1.0–1.08, letter-spacing: -0.035em.
Corpo: line-height: 1.42–1.55, letter-spacing: -0.01em.
Botões/navegação: line-height: 1, letter-spacing: -0.01em.
Valores grandes de moeda: letter-spacing: -0.055em; use números tabulares.

.numeric {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.055em;
}

Regras de comprimento de linha

Corpo do herói: 42–54 caracteres.
Corpo da seção: 48–64 caracteres.
Resposta do FAQ: 62–76 caracteres.
Não deixe um cabeçalho de exibição exceder 14–18 palavras ou mais de três linhas no mobile.

3.3 Ritmo de espaçamento e grid

Use uma base de 4px, com a maioria dos espaçamentos visíveis em múltiplos de 8.

:root {
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
}

Medidas da casca do desktop

Da captura de 2272×1440:

Largura da casca da página: aproximadamente 90vw.
Margem externa horizontal: aproximadamente 5vw.
Margem externa superior/inferior visível: aproximadamente 3–3.5vh.
Raio do canto da casca: 28–32px.
Preenchimento interno da seção: 56–64px esquerda/direita.
Preenchimento vertical grande da seção: 96–144px.
Espaçamento entre cartões principais: 20–28px.
Separadores finos: 1px com 12–16% de opacidade.

Grid

Use um grid de 12 colunas dentro da casca.

.section-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 1.4vw, 1.75rem);
}

Proporções de composição:

Conteúdo do herói: 6–7 colunas à esquerda; cartão de dashboard flutuante: 3 colunas à direita.
Visão geral do produto: texto 5 colunas; módulos visuais 6–7 colunas.
Trio de recursos: aproximadamente 3 / 3 / 4.5 colunas, com o cartão fotográfico mais largo.
Calculadora: 5.5 / 5.5 colunas com um espaço central generoso.
FAQ: 5 / 7 colunas.
Artigos: cartões iguais de 4 colunas.
Rodapé: bloco de marca 4 colunas; navegação/contato/localização/idiomas preenchem o restante.

3.4 Convenções de raio

:root {
  --radius-shell: 2rem;      /* 32px */
  --radius-section: 1.5rem;  /* 24px */
  --radius-card: 1.25rem;    /* 20px */
  --radius-ui: 1rem;         /* 16px */
  --radius-chip: 999px;
}

Regras:

Casca da página externa: 28–32px.
Mídia grande e cartões de seção: 20–24px.
Mini cartões de dashboard: 14–18px.
Botões, tags, navegação segmentada e chips de declaração: pílula completa.
Evite misturar muitos raios arbitrários. Use apenas esses cinco valores.

3.5 Sombra e elevação

O original depende mais de contraste e desfoque do que de sombras óbvias.

:root {
  --shadow-shell: 0 24px 70px rgba(26, 34, 12, 0.18);
  --shadow-float: 0 18px 50px rgba(25, 31, 8, 0.18);
  --shadow-ui: 0 8px 24px rgba(25, 31, 8, 0.10);
}

A casca da página recebe uma sombra grande e suave.
O dashboard flutuante do herói recebe uma sombra suave média.
A maioria dos cartões de recurso não tem sombra; use borda ou separação de cor.
Nunca use sombras pretas nítidas ou várias sombras empilhadas.

4. Arquitetura de layout

4.1 Tela global

O fundo da floresta permanece fixo enquanto a casca de conteúdo arredondada rola.

html {
  background: #b9d9d8;
}

body {
  margin: 0;
  color: var(--text-primary);
  background:
    linear-gradient(90deg, rgba(174, 219, 224, 0.34), rgba(250, 249, 218, 0.34)),
    url('/images/forest-background.avif') center / cover fixed;
}

.page-shell {
  width: min(90vw, 132rem);
  margin: 3.25vh auto;
  border-radius: var(--radius-shell);
  overflow: clip;
  background: var(--paper);
  box-shadow: var(--shadow-shell);
  position: relative;
}

Não coloque uma borda pesada ao redor da casca. O contraste com o fundo é suficiente.

4.2 Ordem das seções

Herói / navegação
Chip de declaração do cliente + faixa de logotipos em loop
Visão geral do produto — headline/texto à esquerda, dois cartões de história do produto à direita
Trio de recursos de capital de crescimento
Calculadora de taxas transparente
Acordeão de FAQ
Depoimento em mídia/carrossel
Artigos recentes
CTA de especialista em financiamento
Rodapé escuro embutido

4.3 Composição do herói

Altura: min(92svh, 82rem) no desktop; mínimo 760px.
Imagem sem margens dentro da casca.
Navegação superior flutua sobre a imagem.
O texto é ancorado no canto inferior esquerdo.
O cartão de produto/dashboard é ancorado no canto inferior direito.
Adicione um scrim escuro inferior para legibilidade e uma sobreposição quente muito sutil sobre a foto.

.hero {
  min-height: min(92svh, 82rem);
  position: relative;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
  z-index: -1;
}

4.4 Navegação

O desktop consiste em três clusters independentes:

Esquerda: uma pílula escura translúcida contendo 3 links.
Centro: logotipo branco.
Direita: uma pílula de conta escura translúcida mais um botão de menu circular separado.

Use backdrop-filter: blur(14px) e uma superfície semitransparente. Mantenha a altura da navegação em 58–64px.

Em larguras abaixo de 900px:

Esconda a pílula de links à esquerda.
Mantenha o logotipo centralizado.
Mantenha uma ação principal e o ícone do menu.
Garanta que o logotipo permaneça opticamente centralizado, não deslocado matematicamente por controles laterais desiguais.

4.5 Faixa de logotipos

Seção branca.
Chip de declaração centralizado acima dos logotipos.
Logotipos em uma faixa horizontalmente recortada com conteúdo duplicado.
O tamanho do logotipo deve ser normalizado visualmente, não definido com larguras brutas idênticas.
Use tratamento em escala de cinza/oliva e opacidade menor para marcas selecionadas.

4.6 Visão geral do produto

Grande headline de duas linhas à esquerda.
Dois botões em pílula diretamente abaixo.
Dois parágrafos curtos; as primeiras palavras em cada parágrafo estão em seminegrito.
O lado direito usa dois cartões de cores diferentes, deslocados verticalmente para criar assimetria.
O cartão escuro é mais estreito/mais alto que o cartão azul claro e contém uma mini UI de produto.

4.7 Trio de recursos de crescimento

O cabeçalho da seção abrange a maior parte da linha, com uma pequena pílula "Saiba mais" delineada alinhada à direita.
Três cartões:
1. Cartão fotográfico/gradiente verde suave com UI branca embutida.
2. Cartão lavanda com um painel de resumo de saldo.
3. Cartão fotográfico largo com grande headline branco e sobreposição de texto inferior.
Os cartões compartilham altura e raio, mas não largura.

4.8 Calculadora

Seção branca com grande espaço em branco acima e abaixo.
Esquerda: cabeçalho, descrição de 2–3 linhas, CTA em pílula escura.
Direita: cartão limão-ácido com cabeçalho, divisor, valor da moeda, controle de intervalo, divisor, estimativa de financiamento.
O cartão da calculadora é aproximadamente quadrado e não deve se tornar mais largo que 650px.

4.9 FAQ

Seção de oliva escura de largura total.
Coluna esquerda: título limão e resumo.
Coluna direita: quatro linhas de acordeão.
Uma resposta está aberta por vez.
As linhas separadoras são extremamente sutis.
Mais se transforma em menos sem girar todo o contêiner do ícone.

4.10 Depoimento

Cartão fotográfico de largura total diretamente abaixo do FAQ.
Grande retrato/still de vídeo.
Primeiro plano desfocado na parte inferior da imagem faz parte da fotografia, não um desfoque de interface.
Citação e atribuição ficam sobre um gradiente inferior esquerdo mais escuro.
Dois pequenos pontos/botões de paginação no canto inferior direito.
Trate como um carrossel estruturalmente, mesmo que apenas uma transição de slide seja visível na gravação.

4.11 Artigos

Seção branca com título à esquerda e pequena ação "Mostrar tudo" à direita.
Três cartões iguais.
Cada cartão usa uma imagem 16:9 ou ligeiramente mais alta com um gradiente escuro inferior e título de artigo branco.
Os títulos são curtos e ancorados no canto inferior esquerdo.

4.12 CTA

Conteúdo centralizado em uma seção alta.
Fundo transita de branco no topo para limão muito pálido na parte inferior.
Cabeçalho: duas linhas, largura máxima em torno de 520–620px.
Pequeno cluster de avatar de especialista e pílula primária escura.
Mantenha aproximadamente 120–180px de espaço de respiro superior e inferior.

4.13 Rodapé

O fundo do CTA continua atrás do rodapé.
O rodapé em si é um retângulo arredondado oliva escuro embutido com margem externa de 24–32px.
Marca no canto superior esquerdo, navegação no canto superior direito, área inferior de contato/localização/idiomas, círculos sociais no canto inferior esquerdo.
O rodapé deve parecer um painel de dashboard compacto, não um rodapé legal tradicional de ponta a ponta.

5. Comportamento responsivo

A captura não mostra estados responsivos. Implemente o seguinte para preservar a intenção.

5.1 Breakpoints

// tailwind.config.ts
screens: {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px',
}

5.2 Desktop ≥ 1200px

Mantenha a casca de 90vw e todas as composições de várias colunas.
Use 56–64px de preenchimento horizontal interno.
Her

Perguntar na sua IA favorita

Documentação