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