Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingLightnostalgicwittygeeky
DDisquete

Disquete.

90s operating system: teal desktop, windows with blue title bars, beveled buttons, pixel-art icons and a taskbar. Nostalgic and fun.

Type
Landing page
Theme
Light
Headings
Pixelify Sans
Body
VT323

ForAdults 25-45 who grew up with 90s computers and video games, and the geek crowd in general

Get access · from R$49or every design for R$297 a year
Open full screen Use with AI
/preview/disquete

Page sections01/05Tudo que você jogava. Funcionando._

All the copy lives in content.ts and the colors in tokens.css.
Concept

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.

From DESIGN.md, which is in Portuguese for now.

ForAdults 25-45 who grew up with 90s computers and video games, and the geek crowd in general

Palette

The four colors that define the design and every variable in tokens.css. Click to copy.

Typography

Pixelify Sans for headings, VT323 for body text.

HeadingsPixelify Sans

Aag!

Disquete in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyVT323

The reading font carries long paragraphs without tiring the eye.

Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.

0123456789 · $1,234.56 · Sep 25, 7:30 PM

Who it's for

What the AI compares with your client to pick the design.

Great for
  • brand with humor and pop-culture references
  • store with a product catalog by category
  • technical service (repair, maintenance)
  • audience that values nostalgia
Avoid for
  • healthcare, law or serious finance
  • luxury and beauty
  • audience that didn't live through or doesn't like the 90s look
  • long texts (the pixel font gets tiring)
Niches
game storeretro gamesesportsgeek storecollectiblescreative agencygeek eventcoding schoolrecord storepodcastnewslettertech repair shop

Tone

nostalgicwittygeekylaid-back

What makes it Disquete

The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.

  1. 01

    Relevo de 2 camadas em tudo: .disquete-alto (saltado), .disquete-fundo (afundado), .disquete-botao (afunda ao clicar).

  2. 02

    Janela com ícone, nome de arquivo e os três botões de minimizar, maximizar e fechar (componente Janela).

  3. 03

    Palavra de destaque do título "selecionada": fundo marinho e texto branco, seguida de cursor _ piscando.

  4. 04

    Ícones em pixel art feitos em SVG pelo componente Pixel (mapa de letras → pixels). Ícone novo = novo mapa em mapas.

  5. 05

    Barra de progresso em blocos que enche aos saltos (.disquete-blocos + .disquete-carrega).

  6. 06

    Janelas "abrem" em degraus na entrada (.disquete-abre).

  7. 07

    Barra de tarefas fixa com botão Iniciar (disquete, nunca logo de sistema real) e relógio.

  8. 08

    Botão padrão do diálogo com contorno preto extra (.disquete-padrao).

House rules

Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.

View DESIGN.md

Identidade

  • Área de trabalho verde-azulada #008080 com 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.
How to use

Two files.
One prompt.

Disquete becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.

Prompt for the agent Use with AI

Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.

  1. 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
  2. 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
  3. 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
  4. 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.

Similar

Landings that share a tone or niche with Disquete.

Browse catalog
LandingLightView design

Rótulo

LandingLightView design

Lente

LandingLightView design

Navalha

LandingLightView design

Retícula