Design systems de fintech
Sistemas de design extraídos de sites de fintechs e finanças: pagamentos, bancos, investimentos, cripto e cobrança. Confiança é a premissa, então espere um uso cuidadoso de cor, tipografia clara para números e formulários e botões pensados para transmitir segurança na hora do clique.
3 exemplos de DESIGN.md nesta categoria, de Klarna, PayPal e Stripe. Extraídos das páginas públicas de cada site. Não são diretrizes oficiais de marca. Ainda não conhece o formato? Leia o que é um DESIGN.md.
Klarna
O sistema de design da Klarna apresenta um azul-marinho escuro sofisticado como cor primária (#0b051d), com cores de destaque vibrantes, incluindo o rosa característico da marca (#ffa8cd). O sistema usa fontes próprias da Klarna junto com fontes do sistema, enfatiza cantos arredondados (32px é o mais comum) e mantém alto contraste para acessibilidade. O design equilibra profissionalismo e acessibilidade por meio de espaçamentos generosos e uma hierarquia tipográfica clara.
PayPal
A homepage holandesa da PayPal usa um design ousado e voltado ao consumidor, ancorado em uma seção hero em azul-céu vibrante (#60cdff) com títulos em preto ultra-pesado (PayPal Pro w900). A navegação é branca, com texto preto e dois botões de CTA bem distintos: um "Inloggen" com contorno e um "Rekening openen" preenchido em preto. Um banner de anúncio em azul-marinho escuro fica no topo. A linguagem geral é de alto contraste, com cantos muito arredondados em formato de pílula e forte dependência da tipografia da marca, transmitindo confiança e acessibilidade para um amplo público de serviços financeiros ao consumidor.
Stripe
A página inicial de marketing da Stripe usa um sistema de design rigorosamente controlado (HDS — Stripe Design System), construído em torno da fonte variável "sohne-var" em pesos leves (300–400), uma paleta de marca que vai do azul-marinho profundo ao índigo, ancorada por #533afd (Stripe Indigo), e um hero com gradiente espectral de largura total, característico da marca. Os componentes têm raio baixo (4–6px), sombras planas ou mínimas e se organizam em uma grade de espaçamento base de 8px. O tom geral é autoritário, mas acessível: infraestrutura financeira comunicada por meio de uma tipografia segura e um uso contido da cor.
Não encontrou o site que procura?
Cole qualquer URL para gerar o DESIGN.md de qualquer site. Cores, tipografia, espaçamento e tokens, prontos para o seu fluxo de trabalho com IA.