Design System Inspirado no Stripe

Category: Fintech & Cripto Infraestrutura de pagamentos. Gradientes roxos característicos, elegância com peso 300.

1. Tema Visual & Atmosfera

O site do Stripe é o padrão ouro do design fintech — um sistema que consegue parecer simultaneamente técnico e luxuoso, preciso e acolhedor. A página abre em uma tela branca limpa (#ffffff) com títulos em azul-marinho profundo (#061b31) e um roxo característico (#533afd) que funciona tanto como âncora da marca quanto como destaque interativo. Esse não é o roxo frio e clínico do software corporativo; é um violeta rico e saturado que transmite confiança e sofisticação. A impressão geral é a de uma instituição financeira redesenhada por uma tipografia de classe mundial.

A fonte variável personalizada sohne-var é o elemento definidor da identidade visual do Stripe. Cada elemento de texto habilita o conjunto estilístico OpenType "ss01", que modifica as formas dos caracteres para uma sensação distintamente geométrica e moderna. Em tamanhos de exibição (48px–56px), a sohne-var usa peso 300 — um peso extraordinariamente leve para títulos que cria uma autoridade etérea, quase sussurrada. Isso é o oposto da convenção do “título em negrito no hero”; os títulos do Stripe parecem não precisar gritar. O espaçamento negativo entre letras (-1,4px em 56px, -0,96px em 48px) aperta o texto em blocos densos e engenheirados. Em tamanhos menores, o sistema também usa peso 300 com tracking proporcionalmente reduzido, e numerais tabulares via "tnum" para exibição de dados financeiros.

O que realmente distingue o Stripe é seu sistema de sombras. Em vez da abordagem plana ou de camada única da maioria dos sites, o Stripe usa sombras de múltiplas camadas com tons azulados: a característica rgba(50,50,93,0.25) combinada com rgba(0,0,0,0.1) cria sombras com uma profundidade fria, quase atmosférica — como se os elementos estivessem flutuando em um céu ao entardecer. O subtom azul-acinzentado da cor primária de sombra (50,50,93) se conecta diretamente à paleta da marca em azul-marinho e roxo, fazendo com que até mesmo a elevação pareça parte da marca.

Características Principais:

• sohne-var com "ss01" OpenType em todos os textos — um conjunto estilístico personalizado que define as formas das letras da marca
• Peso 300 como o peso característico dos títulos — leve, confiante, anticonvencional
• Espaçamento negativo entre letras em tamanhos de exibição (-1,4px em 56px, relaxamento progressivo para baixo)
• Sombras de múltiplas camadas com tom azulado usando rgba(50,50,93,0.25) — elevação que parece colorida pela marca
• Títulos em azul-marinho profundo (#061b31) em vez de preto — acolhedor, sofisticado, de nível financeiro
• Border-radius conservador (4px–8px) — nada em formato de pílula, nada agressivo
• Destaques rubi (#ea2261) e magenta (#f96bee) para gradientes e elementos decorativos
• SourceCodePro como fonte monoespaçada complementar para código e rótulos técnicos

2. Paleta de Cores & Papéis

Primária

• Roxo Stripe (#533afd): Cor primária da marca, fundos de CTA, texto de link, destaques interativos. Um azul-violeta saturado que ancora todo o sistema.
• Azul-Marinho Profundo (#061b31): --hds-color-heading-solid. Cor primária de título. Não é preto, não é cinza — um azul muito escuro que adiciona calor e profundidade ao texto.
• Branco Puro (#ffffff): Fundo da página, superfícies de cartão, texto de botão em fundos escuros.

Marca & Escuro

• Marca Escuro (#1c1e54): --hds-color-util-brand-900. Índigo profundo para seções escuras, fundos de rodapé e momentos imersivos da marca.
• Azul-Marinho Escuro (#0d253d): --hds-color-core-neutral-975. O neutro mais escuro — quase preto com subtom azul para profundidade máxima sem agressividade.

Cores de Destaque

• Rubi (#ea2261): --hds-color-accentColorMode-ruby-icon-solid. Rosa-vermelho quente para ícones, alertas e elementos de destaque.
• Magenta (#f96bee): --hds-color-accentColorMode-magenta-icon-gradientMiddle. Rosa-roxo vibrante para gradientes e destaques decorativos.
• Magenta Claro (#ffd7ef): --hds-color-util-accent-magenta-100. Superfície tingida para cartões e emblemas com tema magenta.

Interativo

• Roxo Primário (#533afd): Cor primária de link, estados ativos, elementos selecionados.
• Roxo Hover (#4434d4): Roxo mais escuro para estados de hover em elementos primários.
• Roxo Profundo (#2e2b8c): --hds-color-button-ui-iconHover. Roxo escuro para estados de hover em ícones.
• Roxo Claro (#b9b9f9): --hds-color-action-bg-subduedHover. Lavanda suave para fundos de hover discretos.
• Roxo Médio (#665efd): --hds-color-input-selector-text-range. Cor de seletor de intervalo e destaque de input.

Escala Neutra

• Título (#061b31): Títulos primários, texto de navegação, rótulos em destaque.
• Rótulo (#273951): --hds-color-input-text-label. Rótulos de formulário, títulos secundários.
• Corpo (#64748d): Texto secundário, descrições, legendas.
• Verde de Sucesso (#15be53): Emblemas de status, indicadores de sucesso (com alfa 0,2–0,4 para fundos/bordas).
• Texto de Sucesso (#108c3d): Cor do texto do emblema de sucesso.
• Limão (#9b6829): --hds-color-core-lemon-500. Destaque de aviso e realce.

Superfície & Bordas

• Borda Padrão (#e5edf5): Cor de borda padrão para cartões, divisórias e contêineres.
• Borda Roxa (#b9b9f9): Bordas de estado ativo/selecionado em botões e inputs.
• Borda Roxa Suave (#d6d9fc): Bordas sutis com tom roxo para elementos secundários.
• Borda Magenta (#ffd7ef): Bordas com tom rosado para elementos com tema magenta.
• Borda Tracejada (#362baa): Bordas tracejadas para zonas de soltar e elementos de espaço reservado.

Cores de Sombra

• Sombra Azul (rgba(50,50,93,0.25)): A característica — cor primária de sombra com tom azulado.
• Sombra Azul Escuro (rgba(3,3,39,0.25)): Sombra azul mais profunda para elementos elevados.
• Sombra Preta (rgba(0,0,0,0.1)): Camada secundária de sombra para reforço de profundidade.
• Sombra Ambiente (rgba(23,23,23,0.08)): Sombra ambiente suave para elevação sutil.
• Sombra Leve (rgba(23,23,23,0.06)): Sombra ambiente mínima para leve flutuação.

3. Regras Tipográficas

Família de Fontes

• Primária: sohne-var, com fallback: SF Pro Display
• Monoespaçada: SourceCodePro, com fallback: SFMono-Regular
• Recursos OpenType: "ss01" habilitado globalmente em todo texto sohne-var; "tnum" para números tabulares em dados financeiros e legendas.

Hierarquia

Princípios

• Peso leve como assinatura: O peso 300 em tamanhos de exibição é a escolha tipográfica mais distintiva do Stripe. Onde outros usam 600–700 para chamar atenção, o Stripe usa a leveza como luxo — o texto é tão confiante que não precisa de peso para ser autoritativo.
• ss01 em todo lugar: O conjunto estilístico "ss01" é inegociável. Ele modifica glifos específicos (provavelmente formas alternativas de a, g, l) para criar uma sensação mais geométrica e contemporânea em todo texto sohne-var.
• Dois modos OpenType: "ss01" para texto de exibição/corpo, "tnum" para numerais tabulares em dados financeiros. Esses nunca se sobrepõem — um número em um parágrafo usa ss01, um número em uma tabela de dados usa tnum.
• Tracking progressivo: O espaçamento entre letras se aperta proporcionalmente ao tamanho: -1,4px em 56px, -0,96px em 48px, -0,64px em 32px, -0,26px em 26px, normal em 16px e abaixo.
• Simplicidade de dois pesos: Principalmente 300 (corpo e títulos) e 400 (UI/botões). Sem negrito (700) na fonte primária — o SourceCodePro usa 500/700 para contraste de código.

4. Estilizações de Componentes

Botões

Roxo Primário

• Fundo: #533afd
• Texto: #ffffff
• Padding: 8px 16px
• Radius: 4px
• Fonte: 16px sohne-var peso 400, "ss01"
• Hover: fundo #4434d4
• Uso: CTA primário (“Start now”, “Contact sales”)

Ghost / Delineado

• Fundo: transparente
• Texto: #533afd
• Padding: 8px 16px
• Radius: 4px
• Borda: 1px solid #b9b9f9
• Fonte: 16px sohne-var peso 400, "ss01"
• Hover: fundo muda para rgba(83,58,253,0.05)
• Uso: Ações secundárias

Info Transparente

• Fundo: transparente
• Texto: #2874ad
• Padding: 8px 16px
• Radius: 4px
• Borda: 1px solid rgba(43,145,223,0.2)
• Uso: Ações terciárias/de nível informativo

Ghost Neutro

• Fundo: transparente (rgba(255,255,255,0))
• Texto: rgba(16,16,16,0.3)
• Padding: 8px 16px
• Radius: 4px
• Contorno: 1px solid rgb(212,222,233)
• Uso: Ações desativadas ou silenciadas

Cartões & Contêineres

• Fundo: #ffffff
• Borda: 1px solid #e5edf5 (padrão) ou 1px solid #061b31 (destaque escuro)
• Radius: 4px (estreito), 5px (padrão), 6px (confortável), 8px (destaque)
• Sombra (padrão): rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px
• Sombra (ambiente): rgba(23,23,23,0.08) 0px 15px 35px 0px
• Hover: sombra se intensifica, geralmente adicionando a camada com tom azulado

Emblemas / Tags / Pílulas

Pílula Neutra

• Fundo: #ffffff
• Texto: #000000
• Padding: 0px 6px
• Radius: 4px
• Borda: 1px solid #f6f9fc
• Fonte: 11px peso 400

Emblema de Sucesso

• Fundo: rgba(21,190,83,0.2)
• Texto: #108c3d
• Padding: 1px 6px
• Radius: 4px
• Borda: 1px solid rgba(21,190,83,0.4)
• Fonte: 10px peso 300

Inputs & Formulários

• Borda: 1px solid #e5edf5
• Radius: 4px
• Foco: 1px solid #533afd ou anel roxo
• Rótulo: #273951, 14px sohne-var
• Texto: #061b31
• Placeholder: #64748d

Navegação

• Navegação horizontal limpa sobre fundo branco, fixa com desfoque de fundo
• Logotipo da marca alinhado à esquerda
• Links: sohne-var 14px peso 400, texto #061b31 com "ss01"
• Radius: 6px no contêiner de navegação
• CTA: botão roxo alinhado à direita (“Sign in”, “Start now”)
• Mobile: alternância com hambúrguer com radius de 6px

Elementos Decorativos

Bordas Tracejadas

• 1px dashed #362baa (roxo) para zonas de espaço reservado/soltar
• 1px dashed #ffd7ef (magenta) para bordas decorativas com tema magenta

Destaques de Gradiente

• Gradientes de rubi a magenta (#ea2261 a #f96bee) para decorações de hero
• Seções escuras da marca usam fundos #1c1e54 com texto branco

5. Princípios de Layout

Sistema de Espaçamento

• Unidade base: 8px
• Escala: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px
• Notável: A escala é densa na parte pequena (a cada 2px de 4–12), refletindo a UI orientada à precisão do Stripe para dados financeiros

Grade & Contêiner

• Largura máxima do conteúdo: aproximadamente 1080px
• Hero: coluna única centralizada com padding generoso, títulos leves
• Seções de funcionalidades: grades de 2–3 colunas para cartões de funcionalidades
• Seções escuras de largura total com fundo #1c1e54 para imersão na marca
• Pré-visualizações de código/painel como cartões contidos com sombras com tom azulado

Filosofia de Espaço em Branco

• Espaçamento de precisão: Ao contrário do vasto vazio dos sistemas minimalistas, o Stripe usa espaço em branco medido e proposital. Cada espaço é uma escolha tipográfica deliberada.
• Dados densos, cromo generoso: As exibições de dados financeiros (tabelas, gráficos) são compactamente organizadas, mas o cromo da UI ao redor delas é generosamente espaçado. Isso cria uma sensação de densidade controlada — como uma planilha bem organizada em uma moldura bonita.
• Ritmo de seção: Seções brancas se alternam com seções escuras da marca (#1c1e54), criando uma cadência dramática de claro/escuro que evita a monotonia sem introduzir cores arbitrárias.

Escala de Border-Radius

• Micro (1px): Elementos de granulação fina, arredondamento sutil
• Padrão (4px): Botões, inputs, emblemas, cartões — o que mais se usa
• Confortável (5px): Contêineres de cartão padrão
• Relaxado (6px): Navegação, elementos interativos maiores
• Grande (8px): Cartões em destaque, elementos de hero
• Composto: 0px 0px 6px 6px para contêineres com arredondamento inferior (painéis de abas, rodapés de dropdown)

6. Profundidade & Elevação

Filosofia de Sombra: O sistema de sombras do Stripe é construído sobre o princípio da profundidade cromática. Onde a maioria dos sistemas de design usa sombras cinza neutro ou preto, a cor primária de sombra do Stripe (rgba(50,50,93,0.25)) é um azul-acinzentado profundo que ecoa a paleta azul-marinho da marca. Isso cria sombras que não apenas adicionam profundidade — elas adicionam atmosfera da marca. A abordagem de múltiplas camadas combina essa sombra com tom azulado com uma camada secundária em preto puro (rgba(0,0,0,0.1)) em um deslocamento diferente, criando uma profundidade semelhante a um paralaxe, onde a sombra da marca fica mais longe do elemento e a sombra neutra fica mais próxima. Os valores negativos de espalhamento (-30px, -18px) garantem que as sombras não se estendam além do contorno horizontal do elemento, mantendo a elevação vertical e controlada.

Profundidade Decorativa

• Seções escuras da marca (#1c1e54) criam profundidade imersiva através do contraste de cor de fundo
• Sobreposições de gradiente com transições de rubi a magenta para decorações de hero
• Cor de sombra rgba(0,55,112,0.08) (--hds-color-shadow-sm-top) para sombras na borda superior de elementos fixos

7. O Que Fazer e O Que Evitar

O Que Fazer

• Usar sohne-var com "ss01" em cada elemento de texto — o conjunto estilístico É a marca
• Usar peso 300 para todos os títulos e texto de corpo — a leveza é a assinatura
• Aplicar sombras com tom azulado (rgba(50,50,93,0.25)) para todos os elementos elevados
• Usar #061b31 (azul-marinho profundo) para títulos em vez de #000000 — o calor importa
• Manter o border-radius entre 4px–8px — o arredondamento conservador é intencional
• Usar "tnum" para qualquer exibição de número tabular/financeiro
• Camadas de sombra: azulado distante + neutro próximo para paralaxe de profundidade
• Usar o roxo #533afd como a cor interativa/CTA primária

O Que Evitar

• Não usar peso 600–700 para títulos sohne-var — o peso 300 é a voz da marca
• Não usar border-radius grande (12px+, formatos de pílula) em cartões ou botões — o Stripe é conservador
• Não usar sombras cinza neutro — sempre tingir com azul (rgba(50,50,93,...))
• Não omitir "ss01" em nenhum texto sohne-var — os glifos alternativos definem a personalidade
• Não usar preto puro (#000000) para títulos — sempre usar #061b31 azul-marinho profundo
• Não usar cores de destaque quentes (laranja, amarelo) para elementos interativos — o roxo é o primário
• Não aplicar espaçamento positivo entre letras em tamanhos de exibição — o Stripe usa tracking estreito
• Não usar os destaques magenta/rubi em botões ou links — eles são apenas decorativos/gradientes

8. Comportamento Responsivo

Breakpoints

Alvos de Toque

• Botões usam padding confortável (8px–16px vertical)
• Links de navegação em 14px com espaçamento adequado
• Emblemas têm padding horizontal mínimo de 6px para alvos de toque
• Alternância de navegação mobile com botão de radius 6px

Estratégia de Colapso

• Hero: display de 56px -> 32px no mobile, peso 300 mantido
• Navegação: links horizontais + CTAs -> alternância com hambúrguer
• Cartões de funcionalidades: 3 colunas -> 2 colunas -> coluna única empilhada
• Seções escuras da marca: manter tratamento de largura total, reduzir padding interno
• Tabelas de dados financeiros: rolagem horizontal no mobile
• Espaçamento de seção: 64px+ -> 40px no mobile
• A escala tipográfica se comprime: tamanhos de hero de 56px -> 48px -> 32px entre os breakpoints

Comportamento de Imagens

• Capturas de tela de painel/produto mantêm sombra com tom azulado em todos os tamanhos
• Decorações de gradiente do hero se simplificam no mobile
• Blocos de código mantêm o tratamento SourceCodePro, podem rolar horizontalmente
• Imagens de cartão mantêm border-radius consistente de 4px–6px

9. Guia de Prompts para Agente

Referência Rápida de Cores

• CTA primário: Roxo Stripe (#533afd)
• Hover do CTA: Roxo Escuro (#4434d4)
• Fundo: Branco Puro (#ffffff)
• Texto de título: Azul-Marinho Profundo (#061b31)
• Texto de corpo: Ardósia (#64748d)
• Texto de rótulo: Ardósia Escura (#273951)
• Borda: Azul Suave (#e5edf5)
• Link: Roxo Stripe (#533afd)
• Seção escura: Marca Escuro (#1c1e54)
• Sucesso: Verde (#15be53)
• Decorativo de destaque: Rubi (#ea2261), Magenta (#f96bee)

Exemplos de Prompts de Componentes

• “Crie uma seção hero em fundo branco. Título em 48px sohne-var peso 300, line-height 1.15, letter-spacing -0.96px, cor #061b31, font-feature-settings ‘ss01’. Subtítulo em 18px peso 300, line-height 1.40, cor #64748d. Botão CTA roxo (#533afd, radius 4px, padding 8px 16px, texto branco) e botão ghost (transparente, 1px solid #b9b9f9, texto #533afd, radius 4px).”
• “Projete um cartão: fundo branco, borda 1px solid #e5edf5, radius 6px. Sombra: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. Título em 22px sohne-var peso 300, letter-spacing -0.22px, cor #061b31, ‘ss01’. Corpo em 16px peso 300, #64748d.”
• “Construa um emblema de sucesso: fundo rgba(21,190,83,0.2), texto #108c3d, radius 4px, padding 1px 6px, 10px sohne-var peso 300, borda 1px solid rgba(21,190,83,0.4).”
• “Crie navegação: cabeçalho fixo branco com backdrop-filter blur(12px). sohne-var 14px peso 400 para links, texto #061b31, ‘ss01’. CTA roxo ‘Start now’ alinhado à direita (fundo #533afd, texto branco, radius 4px). Contêiner de nav com radius 6px.”
• “Projete uma seção escura da marca: fundo #1c1e54, texto branco. Título 32px sohne-var peso 300, letter-spacing -0.64px, ‘ss01’. Corpo 16px peso 300, rgba(255,255,255,0.7). Cartões internos usam borda rgba(255,255,255,0.1) com radius 6px.”

Guia de Iteração

1. Sempre habilitar font-feature-settings: "ss01" em texto sohne-var — este é o DNA tipográfico da marca
2. Peso 300 é o padrão; usar 400 apenas para botões/links/navegação
3. Fórmula de sombra: rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2 onde Y1/B1 são maiores (sombra distante) e Y2/B2 são menores (sombra próxima)
4. Cor de título é #061b31 (azul-marinho profundo), corpo é #64748d (ardósia), rótulos são #273951 (ardósia escura)
5. O border-radius permanece na faixa de 4px–8px — nunca usar formatos de pílula ou arredondamento grande
6. Usar "tnum" para quaisquer números em tabelas, gráficos ou exibições financeiras
7. Seções escuras usam #1c1e54 — não preto, não cinza, mas um índigo profundo da marca
8. SourceCodePro para código em 12px/500 com line-height 2.00 (muito generoso para legibilidade)