Disquete.
Sistema operacional dos anos 90: área de trabalho verde-azulada, janelas com barra de título azul, botões em relevo, ícones em pixel art e barra de tarefas. Nostálgico e divertido.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Pixelify Sans
- Texto
- VT323
ParaAdultos 25-45 que cresceram com computador e videogame dos anos 90, e público geek em geral
Seções da página01/05Tudo que você jogava. Funcionando._
Um sistema operacional dos anos 90 virou landing page. A página inteira é uma área de trabalho: cada seção é uma janela, a chamada final é um alerta e o rodapé é um bloco de notas. É piada visual, então precisa ser bem executada para não parecer desleixo.
ParaAdultos 25-45 que cresceram com computador e videogame dos anos 90, e público geek em geral
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Pixelify Sans nos títulos, VT323 no texto.
TítulosPixelify Sans
Aag!
Disquete em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoVT323
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- marca com humor e referência de cultura pop
- loja com catálogo de produtos por categoria
- serviço técnico (conserto, revisão)
- público que valoriza nostalgia
- saúde, advocacia ou finanças sérias
- luxo e beleza
- público que não viveu ou não curte a estética dos anos 90
- textos longos (a fonte pixel cansa)
Tom
O que faz ser Disquete
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Relevo de 2 camadas em tudo:
.disquete-alto(saltado),.disquete-fundo(afundado),.disquete-botao(afunda ao clicar). - 02
Janela com ícone, nome de arquivo e os três botões de minimizar, maximizar e fechar (componente
Janela). - 03
Palavra de destaque do título "selecionada": fundo marinho e texto branco, seguida de cursor
_piscando. - 04
Ícones em pixel art feitos em SVG pelo componente
Pixel(mapa de letras → pixels). Ícone novo = novo mapa emmapas. - 05
Barra de progresso em blocos que enche aos saltos (
.disquete-blocos+.disquete-carrega). - 06
Janelas "abrem" em degraus na entrada (
.disquete-abre). - 07
Barra de tarefas fixa com botão Iniciar (disquete, nunca logo de sistema real) e relógio.
- 08
Botão padrão do diálogo com contorno preto extra (
.disquete-padrao).
Regras do jogo
Direto do DESIGN.md.
Identidade
- Área de trabalho verde-azulada
#008080com xadrez de 2px quase invisível (.disquete-mesa). - Janelas cinza
#c0c0c0, campos e listas em branco afundado. - Barra de título em gradiente azul
#000080 → #1084d0. Janela secundária usa a versão cinza (.disquete-titulo-inativa). - Primária azul-marinho
#000080: seleção de texto, destaque do título, preço. - Destaque amarelo de bilhete adesivo
#fff27a, só no bilhete torto da área de trabalho. - Fontes: Pixelify Sans para títulos e nomes de janela; VT323 para todo o resto, sempre com 18px ou mais (o corpo base é 20px).
Regras
- Zero canto arredondado, zero sombra desfocada. Sombra só a sólida do bilhete.
- Nada de logo, nome ou som de sistema operacional real. É uma homenagem ao estilo, não uma cópia de marca.
- Texto corrido curto: no máximo 2 ou 3 linhas por bloco. VT323 cansa em parágrafo longo.
- Títulos das janelas com cara de arquivo (
bem-vindo.exe,C:\ACERVO,LEIAME.TXT). - Um botão padrão por diálogo. O resto é botão comum.
- Animação só nos degraus (steps): nada suave, que quebra a ilusão.
Adaptar à marca do cliente
- Troque o verde da área de trabalho (
--d-bg) pela cor da marca, desde que continue escura o bastante para o texto branco dos ícones. - A barra de título aceita outra dupla de gradiente (ex.: vinho
#800020 → #d04060) se a marca pedir. - Ícones: redesenhe os mapas com o produto do cliente (disco, livro, camiseta) em 12×12.
- Podcast/newsletter: troque "Acervo" por episódios ou edições e o assistente por planos de assinatura.
Dois arquivos.
Um prompt.
O Disquete vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Disquete.