Disquete.
Système d'exploitation des années 90 : bureau vert sarcelle, fenêtres avec barre de titre bleue, boutons en relief, icônes en pixel art et barre des tâches. Nostalgique et amusant.
- Type
- Landing page
- Thème
- Clair
- Titres
- Pixelify Sans
- Texte
- VT323
PourAdultes de 25 à 45 ans qui ont grandi avec les ordinateurs et jeux vidéo des années 90, et le public geek en général
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourAdultes de 25 à 45 ans qui ont grandi avec les ordinateurs et jeux vidéo des années 90, et le public geek en général
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Pixelify Sans pour les titres, VT323 pour le texte.
TitresPixelify Sans
Aag!
Disquete en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteVT323
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- marque avec humour et références de culture pop
- boutique avec catalogue de produits par catégorie
- service technique (réparation, révision)
- public sensible à la nostalgie
- santé, droit ou finance sérieuse
- luxe et beauté
- public qui n'a pas connu ou n'aime pas l'esthétique des années 90
- longs textes (la police pixel fatigue)
Ton
Ce qui fait Disquete
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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).
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Disquete devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Disquete.