Opening the vault…
Opening the vault…
Style sheet · 2 references
1990s workstation ergonomics: bevelled titlebars, proportional bitmap system type, warm parchment desktop tones, subtle relief insets, NeXTSTEP and Copland window geometry without kitsch.
The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.
# Warm Retro-OS / Workstation — style sheet
> 1990s workstation ergonomics: bevelled titlebars, proportional bitmap system type, warm parchment desktop tones, subtle relief insets, NeXTSTEP and Copland window geometry without kitsch.
Derived from 2 curated reference(s) in the `warm-retro-os` 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
- Courier — 1/2
- Helvetica — 1/2
## Color
- `#070c14` dark neutral — 1/2
- `#2c2c2b` dark neutral — 1/2
- `#4a4a48` mid neutral — 1/2
- `#b72ad9` chromatic — 1/2
- `#2d80fb` chromatic — 1/2
- `#8c8c88` mid neutral — 1/2
- `#839b5c` chromatic — 1/2
- `#ea9d29` chromatic — 1/2
- `#d1d8c2` light neutral — 1/2
- `#f5f3ec` light neutral — 1/2
Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#070c14` / `#f5f3ec` — 17.6:1
- `#070c14` / `#d1d8c2` — 13.4:1
- `#2c2c2b` / `#f5f3ec` — 12.6:1
- `#2c2c2b` / `#d1d8c2` — 9.5:1
## Moves
### component pattern
- Subtle 2-pixel inner shadow bevel on form inputs giving tactile depth without modern drop-shadow blur. — 35-nextstep-interface-guidelines
- [model draft] Signup sits in a card beside the headline: "Set up [logo] for free", three checkmarked lines ("97% of users pay us $0", "No credit card required", "Setup wizard installs PostHog for you"), then an orange "Get started" and an outlined "Install with AI", both with a thick bottom edge like a pressed key. Steal a hero signup card that answers the price objection as a checklist directly above the buttons. — 79-posthog-homepage-hero
### typography
- Proportional system serif used for body copy flanked by monospace system status metrics in the margin. — 35-nextstep-interface-guidelines
- [model draft] Copy is marked up like a read document: "context layer" in the headline sits on a pale blue highlight, "analytics, errors, replays, and business data" carries a yellow highlighter swipe, and "agents" is underlined. Steal highlighter marks on the two or three phrases a skimmer must catch, applied inside the sentence instead of pulling them out into bullets. — 79-posthog-homepage-hero
### grid/layout
- [model draft] The page is a desktop: a grass wallpaper, a column of labeled icons down each edge (Home, Pricing, Docs, Demo, Talk to a human on the left; About us, Changelog, Store, Careers, Trash on the right), and the homepage inside a window with its own maximize and close controls. Steal top-level pages as desktop icons around a content window, which puts each one click away without a mega-menu. — 79-posthog-homepage-hero
## References
- 79-posthog-homepage-hero — PostHog — homepage hero
- 35-nextstep-interface-guidelines — NeXTSTEP Interface GuidelinesSubtle 2-pixel inner shadow bevel on form inputs giving tactile depth without modern drop-shadow blur.
Signup sits in a card beside the headline: "Set up [logo] for free", three checkmarked lines ("97% of users pay us $0", "No credit card required", "Setup wizard installs PostHog for you"), then an orange "Get started" and an outlined "Install with AI", both with a thick bottom edge like a pressed key. Steal a hero signup card that answers the price objection as a checklist directly above the buttons.
PostHog — homepage hero · model draft
Proportional system serif used for body copy flanked by monospace system status metrics in the margin.
Copy is marked up like a read document: "context layer" in the headline sits on a pale blue highlight, "analytics, errors, replays, and business data" carries a yellow highlighter swipe, and "agents" is underlined. Steal highlighter marks on the two or three phrases a skimmer must catch, applied inside the sentence instead of pulling them out into bullets.
PostHog — homepage hero · model draft
The page is a desktop: a grass wallpaper, a column of labeled icons down each edge (Home, Pricing, Docs, Demo, Talk to a human on the left; About us, Changelog, Store, Careers, Trash on the right), and the homepage inside a window with its own maximize and close controls. Steal top-level pages as desktop icons around a content window, which puts each one click away without a mega-menu.
PostHog — homepage hero · model draft