Comparar direção visual em Stripe e Apple

O checkout que isola o número do cartão num quadro hospedado mantém a loja no questionário de segurança mais simples da indústria de cartões. A página de produto que se monta ao rolar pode pesar mais de 50 megabytes antes de aparecer por inteiro.

Stripe e Apple pagam esse preço de propósito, e a maioria dos sites paga uma versão dele sem ter decidido nada. A conta chega em duas moedas: a auditoria de segurança da loja e o tempo de carregamento no celular fora do wifi.

Cada traço de design tem uma função, e o mesmo traço vira tique vazio quando um site comum o copia sem entender o motivo.

A Stripe monta o campo do cartão dentro de um quadro isolado (uma janela servida por ela, como um caixa eletrônico embutido na parede da loja). O código do seu site não lê o que a pessoa digita ali, mesmo que tente.

Esse isolamento resolve um problema caro. Quanto mais sistemas seus tocam o número do cartão, maior o questionário anual de segurança que a loja responde à indústria de cartões. Como o dado nunca entra na sua infraestrutura, a loja se qualifica para a versão mais simples desse questionário.

O preço dessa proteção é o controle visual. A loja escolhe cor, fonte e borda do campo, mas não decide onde o quadro corta a tela nem como ele se comporta em cada navegador. Um campo escrito à mão devolve esse controle e cobra o questionário mais caro todo ano, mesmo de um negócio pequeno.

Confirmar o isolamento é rápido: clique com o botão direito sobre o campo do número do cartão e veja o menu que aparece. Menu comum de campo de texto significa que o número passa pelo seu código. Menu diferente, vindo de dentro do quadro, significa que o campo já pertence ao provedor.

O design da Stripe vem de poucas decisões repetidas sem exceção: uma cor de acento, uma família de letra e espaço generoso entre as seções. Cada uma custa disciplina de recusar, e a conta chega na primeira campanha que pede para encher o espaço vazio.

Contar decide se essa disciplina foi seguida. Antes de aprovar uma tela, conte as cores que pedem atenção e as famílias de letra em uso. Sobra uma cor de acento e, no máximo, duas famílias claramente distintas.

A tipografia carrega a personalidade da página. O agente (a IA que escreve o site a partir do seu pedido) lê um roteiro de design antes de desenhar. Na skill frontend-design, esse roteiro pede uma família de letra, ou duas distintas, com escala de tamanhos decidida de propósito e linhas de menos de 80 caracteres.

Ousadia cabe num lugar só: um elemento fica memorável e tudo em volta permanece quieto. Na Stripe, o elemento que ficou é a cor de acento, e o resto é uma família de letra e espaço.

O manual de interface da Apple filtra qualquer elemento por três princípios, nesta ordem. Clareza: o texto legível e o ícone nítido deixam a função óbvia por contraste e tamanho. Deferência: a interface recua e o conteúdo manda. Profundidade: camada e movimento existem para comunicar hierarquia.

A tipografia segue o mesmo princípio. O tamanho de cada texto vira token (o valor guardado com nome, como a etiqueta na lata de tinta). Quando a pessoa aumenta a letra no celular, a escala inteira cresce junto, sem quebrar o layout.

O lado que cobra é a imersão pesada. O produto que gira e se monta enquanto a pessoa rola usa centenas de imagens numeradas, todas baixadas antes de o efeito começar. Numa página real analisada em 2020, a cena tinha cerca de 148 arquivos e 55,8 MB, só para aquele trecho.

Esse peso cai inteiro em quem abre o site no celular, longe do wifi. Parte das pessoas ainda sente mal-estar com esse tipo de movimento, e o sistema deixa isso explícito no ajuste "reduzir movimento". Toda página com esse efeito precisa do caminho sem ele, com a mesma informação parada e completa.

A regra da skill para movimento é a mesma da ousadia: um momento orquestrado rende mais que efeitos espalhados. Entrada que desliza de baixo em cada seção e transição em cada cartão são o padrão genérico, e o leitor reconhece a página gerada por IA nesse detalhe.

O que esses dois sites fazem de propósito vira tique quando um site comum copia sem motivo. A skill nomeia esse chrome de template (a moldura pronta que o modelo repete em qualquer assunto, como a embalagem padrão de presente) em seis traços.

Os seis: rótulo em caixa alta e espaçado acima de cada título, metadados unidos por ponto médio, rótulo de palavra em caixa alta mais traço longo e fragmento. Completam a lista o quase-preto tingido no lugar do preto, a fonte monoespaçada em rótulo de dado e a seta no fim do botão.

Essa moldura tem origem mecânica. O shadcn/ui é a biblioteca de componentes padrão do v0 da Vercel e de parte dos concorrentes. O gerador entrega a mesma embalagem em qualquer assunto, sem ninguém ter escolhido nada.

Na Stripe, a fonte monoespaçada aparece porque o produto é código que o desenvolvedor vai copiar; o rótulo carrega informação. Num site de marmitas, a mesma fonte num preço é enfeite. O critério é este: o traço fica quando diz algo sobre o conteúdo e sai quando só decora.

O botão diz o que acontece quando é tocado. "Pagar R$ 240" no lugar de "Enviar". A ação mantém o mesmo nome no fluxo inteiro: o botão "Publicar" produz o aviso "Publicado", e o cliente aprende o vocabulário do site sem esforço. Voz ativa, da perspectiva de quem usa, é a regra da skill para toda palavra na tela.

Numa loja de roupas com formulário de cartão feito em casa, trocar o campo pelo quadro hospedado do provedor tira o número do alcance do sistema da loja. A auditoria volta ao nível mais simples. O botão "Finalizar" vira "Pagar R$ 189", e a cliente sabe o que vai acontecer antes de tocar.

Antes de aprovar a próxima tela do checkout ou da página de produto, meça o peso da versão mais visual. Abra o painel de rede do navegador, filtre por imagem, recarregue sem cache e some o total baixado até a cena fazer sentido. Esse número vira o teto do próximo pedido ao agente.