themx
← Back to themes

Retro Desktop

playful Visual style

Classic desktop windows with beveled controls and clear status

Reference year: 2026

Compare this theme

Best for

Portfolio, Developer tools, Games & entertainment

Less suitable for

  • Large business dashboards that need dense tables and modern navigation conventions.

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Retro Desktop preview

Color Palette

Primary #000080
Secondary #008080
Accent #FFFF00
Background #C0C0C0
Text #111111

Typography

Heading: IBM Plex Sans
Body: IBM Plex Sans

Key Characteristics

  • Gray window surfaces and navy title bars
  • Light and dark bevels on buttons and panels
  • Square corners and inset white inputs
  • Explicit menu labels and compact status text

Tags

retro desktop windows bevel nostalgia

Retro Desktop uses the window surfaces, borders, and controls associated with classic desktop interfaces. It suits portfolios, small developer tools, and interactive projects where the visual reference supports the content.

Key Visual Elements

Use gray panels, navy title bars, square corners, and contrasting bevels. Inputs should look inset. Label navigation and actions clearly. Window decorations should not imply unsupported dragging, closing, or resizing.

Layout and Interaction

Keep windows in the normal document flow. Stack them on small screens instead of overlapping them. Use real buttons, readable text, and visible keyboard focus. A pressed button should have an inset border, while its selected state remains clear after focus moves.

Typography

IBM Plex Sans keeps small labels and longer descriptions readable. Use bold text for title bars and panel headings. Keep bitmap lettering limited to optional decorative labels.

Export style

Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.

:root {
  --tx-surface-bg: #C0C0C0;
  --tx-font-heading: "IBM Plex Sans", sans-serif;
  --tx-font-body: "IBM Plex Sans", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #C0C0C0;
  --tx-card-border: #808080;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0;
  --tx-card-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #404040, 2px 2px 0 #808080;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #404040;
  --tx-card-shadow-hover: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #404040, 2px 2px 0 #808080;
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: #404040;
  --tx-text-subtle: #505050;
  --tx-link-color: #000080;
  --tx-button-radius: 0;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #404040;
  --tx-text: #111111;
  --tx-primary: #000080;
  --tx-secondary: #008080;
  --tx-accent: #FFFF00;
  --tx-media-filter: none;
}

Prompt Builder

Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.

Example projects:

Use your own components with the exported CSS variables.

Components

Changing the page purpose selects suggested components. You can adjust them below.

Optional design layers

Apply a layout, then a surface effect, then a color mode. Fonts stay with the base theme. The output contains one final token set.

Retro Desktop

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Optional skills

Include skill references and installation instructions for your coding agent. Selecting a skill here does not install it.

Choose daisyUI or shadcn/ui to include its official skill.

Copy this prompt into your coding assistant. The task mode applies to the UI prompt.

Generated prompt

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Portfolio
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Retro Desktop (visual-style)
- Gray window surfaces and navy title bars
- Light and dark bevels on buttons and panels
- Square corners and inset white inputs
- Explicit menu labels and compact status text

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #000080, secondary #008080, accent #FFFF00, background #C0C0C0, text #111111
Typography: IBM Plex Sans for headings, IBM Plex Sans for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #C0C0C0;
  --tx-font-heading: "IBM Plex Sans", sans-serif;
  --tx-font-body: "IBM Plex Sans", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #C0C0C0;
  --tx-card-border: #808080;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0;
  --tx-card-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #404040, 2px 2px 0 #808080;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #404040;
  --tx-card-shadow-hover: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #404040, 2px 2px 0 #808080;
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: #404040;
  --tx-text-subtle: #505050;
  --tx-link-color: #000080;
  --tx-button-radius: 0;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #404040;
  --tx-text: #111111;
  --tx-primary: #000080;
  --tx-secondary: #008080;
  --tx-accent: #FFFF00;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Group content into rectangular windows with navy title bars, inset panels, and visible status labels.
- Use a predictable page order. Stack windows on mobile and keep all controls at least 44px tall.

## Interaction
- Use inset shadows for pressed buttons, explicit selected states, and visible keyboard focus.
- Keep window decorations separate from real controls. Do not show close or minimize buttons that have no action.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Retro Desktop: Large business dashboards that need dense tables and modern navigation conventions.

## Components
Generate the following components in this style:
- Hero
- Navbar
- Cards
- Footer

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.