Hub
Welcome to Windows 98

Windows 98

A clean retro UI inspired by the classic Windows 95/98 desktop. Ideal for developer tools, documentation sites, and nostalgic landing pages that want structure over spectacle.

README.txt My Projects Display Settings
Ready
640x480
16-bit
Style Properties
  • Windows 98 Style
    • Beveled borders (outset + inset)
    • Title bar gradient (#000080 to #1084d0)
    • Menu bar with hover states
    • Status bar at window bottom
    • Typography
      • Tahoma / MS Sans Serif
      • 12-13px body, system font sizing
    • Color System
      • #c0c0c0 - Window background
      • #000080 - Highlight / Title bar
      • #008080 - Desktop teal
      • #ffffff / #000000 - Bevel light/dark

No border-radius. No transitions. No blur. Just bevels.

C:\PROMPT\generate.bat

AI Request Prompt

Design a landing page in Windows 98 style — a clean retro UI inspired by Windows 95/98 with beveled chrome surfaces and teal desktop background.

COLOR TOKENS:
--bg: #c0c0c0
--border-out-light: #ffffff
--border-out-dark: #000000
--border-in-light: #dfdfdf
--border-in-dark: #808080
--title-bg: #000080
--title-gradient-end: #1084d0
--window-body: #ffffff
--highlight: #000080
--highlight-text: #ffffff
--desktop-teal: #008080
No other colors.

TYPOGRAPHY:
Body & Headings: "Tahoma", "MS Sans Serif", Arial, sans-serif.
Body size: 13px. Headings: 1.6rem bold, color: #000080.
Menu/status bar: 12px. Tree view: 12px.
No decorative fonts. No text-shadow.

WINDOW COMPONENT:
Frame: background #c0c0c0, padding: 3px, 4-side beveled borders.
Title bar: linear-gradient(90deg, #000080, #1084d0), 12px bold white text, with 16x14px minimize/maximize/close buttons.
Menu bar: horizontal buttons with hover bevel, transparent border by default.
Window body: background #fff, inset beveled borders, padding: 16px.
Status bar: 1-3 fields at bottom, inset borders, 11px font.
Buttons: background #c0c0c0, padding: 6px 20px, beveled borders that invert on :active, dotted outline on :focus-visible.

BEVEL SYSTEM (critical):
Outset (raised): border-top/left 2px solid #ffffff, border-bottom/right 2px solid #000000.
Inset (sunken): border-top/left 2px solid #000000, border-bottom/right 2px solid #ffffff.
Inner depth: box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf.
Window drop shadow: 4px 4px 0 rgba(0,0,0,0.35).

ADDITIONAL COMPONENTS:
Desktop icons: 32px SVG + 11px label, background: #000080 + white text on hover/focus.
Tree view: nested ul with folder/file icons via ::before pseudo-elements, inset container.
Tab bar: beveled tabs, active tab merges with body via matching border-bottom.
Horizontal rule: 1px solid #808080 top + 1px solid #dfdfdf bottom.

LAYOUT:
Page container: width: min(860px, 94vw), margin: 0 auto.
Desktop background: solid #008080.
Windows stack vertically with margin-bottom: 30px.

RESPONSIVE:
<=600px: heading 1.2rem, icons smaller gap, button group stacks vertically.

FORBIDDEN:
- border-radius on any element
- Modern gradients, glassmorphism, blur effects
- Decorative fonts (Impact, Comic Sans, etc.)
- CSS transitions or ease curves
- Soft box-shadows (only hard-edge offsets)
- text-shadow, marquee, or animated text

OUTPUT:
1) CSS custom properties for all bevel and color tokens
2) Window component (title bar + menu bar + body + status bar + buttons)
3) Desktop icons, tree view, tab components
4) Single-file HTML/CSS with responsive support
Prompt loaded
UTF-8