Tutorial
How a Preen widget is laid out, colored, and wired up to your Mac.
Where it draws · 1 of 4
.preen-screen
The entire screen, edge to edge — even behind the notch, on displays that have one. Anything you center here sits in the middle of the whole display.
Where it draws · 2 of 4
.preen-safe
The safe zone, clear of the notch or status bar and the rounded corners. Keep important content in here so nothing gets clipped.
Where it draws · 3 of 4
.preen-display
The safe zone plus a matching strip along the bottom.
Where it draws · 4 of 4
.preen-unsafe-*
The bands .preen-display leaves over: .preen-unsafe-top is the top inset band (the notch, on phones) above, .preen-unsafe-bottom the matching strip below — plus slim side bands (-left/-right) in landscape. Put decoration here, never content.
Color with our built-in palette and your widget adapts to light & dark automatically. Here's the flock — --preen-bird is this display's own color.
--preen-crimson
--preen-sunset
--preen-yellow
--preen-green
--preen-navy
--preen-violet
Make your own
Describe it to your AI agent of choice in plain language. The bundled CLI and MCP make the hard parts easy.
Tap to continue