Disquete.
Sistema operativo de los 90: escritorio verde azulado, ventanas con barra de título azul, botones en relieve, íconos en pixel art y barra de tareas. Nostálgico y divertido.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Pixelify Sans
- Texto
- VT323
ParaAdultos de 25 a 45 que crecieron con computadoras y videojuegos de los 90, y el público geek en general
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaAdultos de 25 a 45 que crecieron con computadoras y videojuegos de los 90, y el público geek en general
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Pixelify Sans en los títulos, VT323 en el texto.
TítulosPixelify Sans
Aag!
Disquete en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoVT323
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- marca con humor y referencias de cultura pop
- tienda con catálogo de productos por categoría
- servicio técnico (reparación, revisión)
- público que valora la nostalgia
- salud, abogacía o finanzas serias
- lujo y belleza
- público que no vivió o no disfruta la estética de los 90
- textos largos (la fuente pixel cansa)
Tono
Lo que lo hace Disquete
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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).
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Disquete se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Disquete.
