# Midnight SaaS

Também chamado de: estilo Linear, SaaS escuro, landing de desenvolvedor em dark mode, UI de produto escura, visual Raycast  
Era: 2019 em diante (Linear 2019, Raycast 2020, Vercel dark 2021)  
Página: https://designforai.dev/pt/style/midnight-saas

## Traços

- página quase preta (#08090a a #0f1115), nunca #000 puro
- texto em três cinzas: branco para títulos, cinza claro para o corpo, cinza apagado para meta
- um acento frio (índigo, violeta ou ciano) usado em brilhos, links e um botão
- bordas de 1px a 6-10% de branco em vez de sombras; as superfícies são só um pouco mais claras que a página
- screenshots do produto em molduras sutis com bisel e um leve brilho gradiente atrás
- tamanhos de tipo pequenos, tracking apertado, muito texto de UI a 13-14px
- movimento: fade-up no scroll, 400-600ms, escalonado em 60ms

Paleta: #08090a página, #131416 superfície, rgba(255,255,255,0.08) borda, #f7f8f8 título, #b4bcd0 corpo, #62666d atenuado, #5e6ad2 acento

Tipografia: Geist ou IBM Plex Sans para UI, JetBrains Mono para código; h1 600 a 56-64px com -0.03em, corpo 400 a 16px, texto de UI 13-14px

## Faça

- construa uma escala de 3 cinzas para o texto e use-a com rigor: título, corpo, meta
- use bordas a 8% de branco e superfícies 3-5% mais claras que a página em vez de sombras projetadas
- coloque um único brilho radial suave (acento a 20% de alpha, blur 120px) atrás do screenshot do hero

## Evite

- não use preto puro nem branco puro em lugar nenhum
- não adicione várias cores de acento; um índigo é o estilo
- não exagere no brilho; um brilho por tela, nada de neon

Conhecido por: Linear, Raycast, Vercel, Resend

## Semente CSS

```css
:root{--bg:#08090a; --surface:#131416; --line:rgba(255,255,255,0.08); --fg:#f7f8f8; --body:#b4bcd0; --muted:#62666d; --accent:#5e6ad2; --radius:8px; --font:'Geist',sans-serif}
```

## Prompt

Construa o site em estilo midnight SaaS escuro (à la Linear). Página #08090a, superfícies #131416, bordas 1px rgba(255,255,255,0.08), títulos #f7f8f8, corpo #b4bcd0, meta #62666d, acento único #5e6ad2. Fonte Geist: h1 600 a 60px com -0.03em e line-height 1.05, h2 600 a 32px, corpo 400 a 16px, labels de UI 13px 500. Border-radius 8px em cards e botões, 12px em molduras de screenshot. Sem sombras projetadas; a profundidade vem das bordas e de um destaque inset de 1px rgba(255,255,255,0.04) no topo dos cards. Hero: manchete centralizada, subtítulo de uma linha, botão primário sólido #5e6ad2 com texto branco, botão secundário transparente com borda. Abaixo, um screenshot do produto numa moldura com borda e um brilho radial atrás (rgba(94,106,210,0.25), blur 120px). Lista de recursos em três colunas com ícones de 16px em #b4bcd0. Movimento: as seções sobem 16px com fade em 500ms no scroll, escalonadas em 60ms; o hover nos botões clareia 6%.