← All UI styles
Mac Classic
One-bit black and white: hard 1px outlines, dotted fills, no grey at all.
OutlineretroCreative toolsNostalgia productsPrint-adjacent apps
Construction · Outline
Nothing is filled. Every element is described by a stroke and the page shows straight through it.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Mac Classic style. Strictly one-bit — pure black on pure white, 1px outlines, and dotted patterns doing the work grey would do. Nothing is anti-aliased. Build every surface the Outline way:
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- one-bit black and white
- 1px outlines
- dotted fills instead of grey
- no anti-aliasing
What this style refuses
- grey fills
- color
- soft shadows
- large radii
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#ffffff#000000Surface
#ffffff#000000Border
#000000#ffffffText
#000000#ffffffMuted text
#3f3f3f#c0c0c0Accent
#000000#ffffffOn accent
#ffffff#000000Shape and type
Radius0 / 4 / 4 px
Border1px solid
Shadownone
Displaysystem-ui
Bodysystem-ui
Monoui-monospace
Type scale10 · 11 · 12 · 14 · 18 · 24 px
Weights400 / 700 / 700
Line height1.35
Tracking0em
Spacing4px grid · compact
Surfacegrain
Accentoutline
Separatorhairline
Labelssentence case
Blurnone
Measured contrast — body 21:1 light, 21:1 dark; secondary text 10.53:1 and 11.54:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Mac Classic
*
* One-bit black and white: hard 1px outlines, dotted fills, no grey at all.
*
* One complete product screen, rendered from the token object below —