workbuddy_skills/open-design/design-systems/stripe/DESIGN-pt-br.md

# 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

| Papel | Fonte | Tamanho | Peso | Altura de Linha | Espaçamento de Letra | Recursos | Notas |
|-------|-------|---------|------|-----------------|----------------------|----------|-------|
| Display Hero | sohne-var | 56px (3.50rem) | 300 | 1.03 (estreito) | -1.4px | ss01 | Tamanho máximo, autoridade sussurrada |
| Display Grande | sohne-var | 48px (3.00rem) | 300 | 1.15 (estreito) | -0.96px | ss01 | Títulos hero secundários |
| Título de Seção | sohne-var | 32px (2.00rem) | 300 | 1.10 (estreito) | -0.64px | ss01 | Títulos de seção de funcionalidades |
| Subtítulo Grande | sohne-var | 26px (1.63rem) | 300 | 1.12 (estreito) | -0.26px | ss01 | Títulos de cartão, subseções |
| Subtítulo | sohne-var | 22px (1.38rem) | 300 | 1.10 (estreito) | -0.22px | ss01 | Títulos de seção menores |
| Corpo Grande | sohne-var | 18px (1.13rem) | 300 | 1.40 | normal | ss01 | Descrições de funcionalidades, texto de introdução |
| Corpo | sohne-var | 16px (1.00rem) | 300-400 | 1.40 | normal | ss01 | Texto de leitura padrão |
| Botão | sohne-var | 16px (1.00rem) | 400 | 1.00 (estreito) | normal | ss01 | Texto de botão primário |
| Botão Pequeno | sohne-var | 14px (0.88rem) | 400 | 1.00 (estreito) | normal | ss01 | Botões secundários/compactos |
| Link | sohne-var | 14px (0.88rem) | 400 | 1.00 (estreito) | normal | ss01 | Links de navegação |
| Legenda | sohne-var | 13px (0.81rem) | 400 | normal | normal | ss01 | Rótulos pequenos, metadados |
| Legenda Pequena | sohne-var | 12px (0.75rem) | 300-400 | 1.33-1.45 | normal | ss01 | Letras miúdas, timestamps |
| Legenda Tabular | sohne-var | 12px (0.75rem) | 300-400 | 1.33 | -0.36px | tnum | Dados financeiros, números |
| Micro | sohne-var | 10px (0.63rem) | 300 | 1.15 (estreito) | 0.1px | ss01 | Rótulos minúsculos, marcadores de eixo |
| Micro Tabular | sohne-var | 10px (0.63rem) | 300 | 1.15 (estreito) | -0.3px | tnum | Dados de gráficos, números pequenos |
| Nano | sohne-var | 8px (0.50rem) | 300 | 1.07 (estreito) | normal | ss01 | Rótulos menores possíveis |
| Código Corpo | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (espaçado) | normal | -- | Blocos de código, sintaxe |
| Código Negrito | SourceCodePro | 12px (0.75rem) | 700 | 2.00 (espaçado) | normal | -- | Código em negrito, palavras-chave |
| Rótulo de Código | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (espaçado) | normal | maiúsculas | Rótulos técnicos |
| Micro de Código | SourceCodePro | 9px (0.56rem) | 500 | 1.00 (estreito) | normal | ss01 | Anotações de código minúsculas |

### 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

| Nível | Tratamento | Uso |
|-------|------------|-----|
| Plano (Nível 0) | Sem sombra | Fundo da página, texto inline |
| Ambiente (Nível 1) | `rgba(23,23,23,0.06) 0px 3px 6px` | Leve elevação de cartão, dicas de hover |
| Padrão (Nível 2) | `rgba(23,23,23,0.08) 0px 15px 35px` | Cartões padrão, painéis de conteúdo |
| Elevado (Nível 3) | `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` | Cartões em destaque, dropdowns, popovers |
| Profundo (Nível 4) | `rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px` | Modais, painéis flutuantes |
| Anel (Acessibilidade) | contorno `2px solid #533afd` | Anel de foco por teclado |

**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
| Nome | Largura | Mudanças Principais |
|------|---------|---------------------|
| Mobile | <640px | Coluna única, tamanhos de título reduzidos, cartões empilhados |
| Tablet | 640-1024px | Grades de 2 colunas, padding moderado |
| Desktop | 1024-1280px | Layout completo, grades de 3 colunas para funcionalidades |
| Desktop Grande | >1280px | Conteúdo centralizado com margens generosas |

### 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)