Design for AIEstilo Midnight SaaS: prompt de design de UI
Paleta, regras de tipografia e um prompt pronto para colar de midnight saas. Também chamado de estilo Linear, SaaS escuro, landing de desenvolvedor em dark mode, UI de produto escura, visual Raycast. 2019 em diante (Linear 2019, Raycast 2020, Vercel dark 2021).
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
: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%.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
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%.
## Tokens
: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 }
Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.