Skip to the collection
Trova
Browse Virtual Desktop / In-Browser OSCompare with another family →

Style sheet · 4 references

Virtual Desktop / In-Browser OS

Draggable canvas desktop window manager running simulated apps, paint tools, and retro file systems in JavaScript.

Copy CSS :root tokens

Synthesized CSS custom properties derived from this family's dominant surface polarity, highest-contrast WCAG pair, and open-source font stand-ins.

/* Synthesized from Trova family: Virtual Desktop / In-Browser OS (virtual-desktop-web) */
/* Evidence base: 4 curated reference(s) · Primary contrast 16.5:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #f3f4ef;
  --surface-elevated: #2f80ed;
  --text-primary: #151515;
  --accent-primary: #f54e00;
  --border-hairline: color-mix(in srgb, #151515 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "IBM Plex Mono", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}
Copy as DESIGN.md

The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.

# Virtual Desktop / In-Browser OS — style sheet

> Draggable canvas desktop window manager running simulated apps, paint tools, and retro file systems in JavaScript.

Derived from 4 curated reference(s) in the `virtual-desktop-web` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- IBM Plex Mono — 4/4
- IBM Plex Sans — 3/4
- Chicago — 1/4
- Geneva — 1/4

## Color

- `#151515` dark neutral — 4/4
- `#f3f4ef` light neutral — 4/4
- `#f54e00` chromatic — 3/4
- `#2f80ed` chromatic — 2/4
- `#4b5563` mid neutral — 1/4
- `#1d4aff` chromatic — 1/4
- `#e05a47` chromatic — 1/4
- `#f6e6d4` light neutral — 1/4

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#151515` / `#f3f4ef` — 16.5:1
- `#151515` / `#f54e00` — 5.2:1
- `#151515` / `#2f80ed` — 4.7:1
- `#151515` / `#f6e6d4` — 14.9:1

## Moves

### component pattern

- Every marketing section opens inside a focusable, draggable window frame with `1px solid #151515` borders, classic `[—] [□] [×]` titlebar controls, and z-index elevation on click. — 169-posthog-website-os-draggable-multi-window-product-workspace-dock
- Render per-product usage sliders inside a spreadsheet-style OS window where dragging monthly event volume updates a live itemized receipt column in real time with zero hidden enterprise tiers. — 170-posthog-pricing-window-interactive-event-volume-slider-inside-os-frame
- Code snippets include a header bar formatted like a terminal sub-window with language selector tabs (`Node.js`, `Python`, `cURL`) and a one-click copy button. — 171-posthog-docs-explorer-split-tree-file-manager-markdown-reader-window

### grid/layout

- Replace the standard SaaS marketing hero with a full-viewport desktop surface (`100vw × 100vh`) featuring a left-hand column of 64×64px double-clickable desktop icons (`Product OS`, `Pricing.calc`, `Docs.md`) and a persistent top menu bar. — 169-posthog-website-os-draggable-multi-window-product-workspace-dock
- Three-pane file-explorer layout: a 220px collapsible folder tree on the left, a 65ch technical documentation viewport in the center, and an interactive 'On this page' table-of-contents inspector on the right. — 171-posthog-docs-explorer-split-tree-file-manager-markdown-reader-window

### copywriting

- Include an explicit 'Free tier included' badge on the first notch of every slider so self-serve developers immediately see their $0/mo runway before scaling. — 170-posthog-pricing-window-interactive-event-volume-slider-inside-os-frame

### texture/material

- Combine a warm `#f6e6d4` dithered desktop wallpaper pattern with 1px horizontal striped classic titlebars and crisp 2px hard-offset window shadows (`2px 2px 0 #1c1917`). — 172-poolsuite-fm-retro-macintosh-leisure-desktop-playlist-window

### motion/interaction

- Launching an app from the desktop icon grid triggers a classic zoom-rect wireframe animation before mounting the audio player or lookbook window. — 172-poolsuite-fm-retro-macintosh-leisure-desktop-playlist-window

## References

- 169-posthog-website-os-draggable-multi-window-product-workspace-dock — PostHog Website OS — Draggable Multi-Window Product Workspace & Dock (exemplar)
- 170-posthog-pricing-window-interactive-event-volume-slider-inside-os-frame — PostHog Pricing Window — Interactive Event Volume Slider Inside OS Frame
- 171-posthog-docs-explorer-split-tree-file-manager-markdown-reader-window — PostHog Docs Explorer — Split-Tree File Manager & Markdown Reader Window
- 172-poolsuite-fm-retro-macintosh-leisure-desktop-playlist-window — Poolsuite FM — Retro Macintosh Leisure Desktop & Playlist Window

Type

Loadable Open-Source Stand-Ins

  • Chicago (macOS only) → ChicagoFLF (free clone, self-host)
  • Geneva (macOS only) → Inter

Color

Pairs that read

  • Steal this.#151515 on #f3f4ef · 16.5:1
  • Steal this.#151515 on #f54e00 · 5.2:1
  • Steal this.#151515 on #2f80ed · 4.7:1
  • Steal this.#151515 on #f6e6d4 · 14.9:1

Moves

component pattern

grid/layout

copywriting

texture/material

motion/interaction

References