System 95 Back to creator
Design preset

Four border colours and a two-pixel bevel

That is the whole interface language of the era, and it is a real affordance: the bevel tells you what is pressable without using colour at all. White on the top and left, grey on the bottom and right, inverted the moment you press.

contrast.txt — Notepad_□×

Black on the chassis11.54:1
Link blue, as text4.72:1
White on the link blue8.59:1
Grey #808080, as text2.17:1
Pure red, as text2.20:1
2pxBevel
4Border colours
2.17:1Grey body text
0Rounded corners
What the preset decides

Three rules

rule_01

No greys for body text

The specification says it outright and the measurement agrees: fifty per cent grey on the silver chassis is 2.17 to one. Black is the only body colour, and the grey exists for the bevel's dark edge.

rule_02

The bevel is an affordance

Lit on the top and left, shadowed on the bottom and right, inverted on press. It says "pressable" without colour, which is more than most modern buttons manage.

rule_03

Red is for panels, not pages

Pure red on the silver is 2.20 to one. On the white and yellow panels it is fine, which is exactly where this era actually used it.

Pricing, as this preset renders it

Three tiers

starter.exe

Starter

$0

per month

  • One project
  • Community support
  • Core components
Choose

studio.exe — recommended

Studio

$24

per month

  • Ten projects
  • Priority support
  • Every component
  • Design export
Choose

agency.exe

Agency

$72

per month

  • Unlimited projects
  • Shared libraries
  • Client handover
Choose

Placeholder figures — not an offer

Questions

Frequently asked

Is this a mock-up or the real thing?
A specimen, hand-built to the preset's specification so the style can be seen whole rather than as a thumbnail. The preset itself is a set of WordPress Theme Settings, and a generated site carries the silver chassis, black body text, the link blue, the navy band, the yellow panel, zero radius and the bevel with its inverted press state. The window chrome — title bars, minimise and close boxes — is markup, so a section that wants it still asks.
Why is the button on the navy band silver rather than blue?
Two reasons that happen to agree. A blue control on a navy ground separates from it at 2.44 to one, which is below the three-to-one a non-text boundary needs; and the authentic control of this era was always the silver face with black text. Being faithful and being legible point the same way here.
Isn't the body text too small in this era's style?
The originals often were, and that is the one thing not worth reproducing. Body stays at sixteen pixels. Everything else — the bevels, the pure hues, the title bars — is period accurate.

creator.exe_□×

Build a site in this preset.

Describe the business and your own AI agent builds it on WordPress with Unyson+ — real page-builder pages, with this design system applied site-wide.

Open the creator

Preview only Specimen page