× alcantara.design · 2026

Da landing page
ao design system.

Case de product design para a Gyroo — SaaS white label que permite a correspondentes bancários venderem empréstimo no cartão de crédito com a própria marca.

navegue com ↓ ↑ ou espaço

O cliente

A engrenagem é da Gyroo.
A marca é do parceiro.

A Gyroo entrega tecnologia, operacional e infraestrutura financeira. O parceiro vende com a própria marca, atende os próprios clientes e recebe a comissão na hora — operação formalizada via CCB, em conformidade com o Banco Central.

10

anos de mercado

+R$ 1 bi

emprestados no cartão

+320 mil

clientes atendidos

+8.000

parceiros no Brasil

O desafio

O escopo começou numa página.
Cresceu com a confiança.

A LP de captação tinha excesso de informação e não contava uma história. O trabalho começou por ela — e se estendeu para as telas do produto e para o sistema que sustenta tudo.

ENTREGA 01

Landing page

Refeita do wireframe ao hi-fi, com storytelling enxuto: oito seções, cada uma com um objetivo só.

ENTREGA 02

Telas de cadastro

Cadastro de parceiro e acesso redesenhados como protótipos funcionais — a especificação que o time de dev implementa.

ENTREGA 03

Design system

A fonte de verdade visual que costura LP e produto, com ponte direta para a stack do app (shadcn/ui).

Entrega 01 · Landing page

Oito seções.
Uma história.

Cada seção responde a uma pergunta do correspondente — na ordem em que ele a faria. Informação que não empurra a história para frente ficou de fora.

“Nós somos a engrenagem.
Você é a marca.”

— o posicionamento que organiza a página inteira

Hero— tenha sua própria operação de crédito
Barra de valor— a infraestrutura é nossa; marca e comissão, suas
Posicionamento— montar operação é caro; com a Gyroo, não
Como funciona— quatro passos, do CNPJ à comissão
Tudo pronto para vender— canais, suporte, diferenciais
Painel do parceiro— tudo o que move o giro, num só lugar
Indique e ganhe— renda recorrente sobre indicados
Prova & segurança— números, depoimentos, CCB

Entrega 01 · Landing page

Não é mockup. É a página.

card.gyroo.com.br

protótipo navegável — role dentro da molduralp.html

Entrega 02 · Cadastro de parceiro

O melhor campo é o que não se preenche.

Um CNPJ consulta a Receita Federal e traz razão social e endereço prontos: 16 campos digitados viraram 6. E as restrições jurídicas viraram design — não nota de rodapé.

→ só o sócio administrador aceita os termos → dado da Receita não se edita → erro diz o que houve + como resolver → “cadastro”, nunca “conta” — a Gyroo é SaaS, não banco

/register-master

consulta real à Receita (BrasilAPI)register-master.html

Entrega 02 · Acesso

White label até no login.

A plataforma leva a marca do parceiro — então a tela de acesso não estampa a logo da Gyroo: ela assina discreta, como fornecedora. O login é por CPF e serve para parceiro e vendedor; por isso não existe “criar conta” nessa porta.

→ jornada completa: login, esqueci e redefinição → assinatura “Powered by Gyroo” → CPF em JetBrains Mono — dígito não treme

/sign-in

quatro telas clicáveis num arquivosign-in.html

Entrega 03 · Design system

Toda decisão visual nasce — ou é registrada — aqui.

Nove seções renderizadas: marca, cor, tipografia, escalas, componentes, formulário, superfícies, motion e padrões. Se um padrão não aparece lá funcionando, ele não existe. Contraste medido, não estimado: verde-marca sobre papel 5.07:1, texto 15.69:1 — AA em toda a paleta.

--brand-deep

--brand

--green

--lime

--bg

--text

--brand-grad · uso decorativo e pontual

Poppins fala com gente.

JetBrains Mono carrega o dado:
R$ 1.240,00 · 53.535.398/0001-27

A mono nunca entra em parágrafo — ela marca CPF, CNPJ, valores, juros e métricas, e estabiliza máscaras: dígito de largura fixa não treme enquanto se digita.

Do design ao código

Um arquivo CSS veste o app inteiro.

O app da Gyroo roda Next.js + Tailwind + shadcn/ui. O design system foi mapeado no contrato de tokens do shadcn, em OKLCH: o time cola o bloco no globals.css e o produto vira Gyroo — sem tocar em componente.

claro + escuro OKLCH AA verificado nos dois temas

/* gyroo-shadcn-theme.css — cola no globals.css */
:root {
  --primary: oklch(0.49 0.14 145);
  --background: oklch(0.975 0.007 145);
  --radius: 0.5rem; …
}
.dark {
  --destructive: oklch(0.62 0.15 29); /* #E4685C — o vermelho da marca reprovava em AA no escuro */
}

Fechamento

O protótipo é a especificação.

Nada aqui é imagem estática: LP, cadastro e acesso são HTML funcionais que o time de dev da Gyroo lê, inspeciona e implementa. O design system garante que a próxima tela não reinvente a anterior.

Product design UX writing Design system Protótipo hi-fi em código