One studio, one kit.
Every Properstar landing page and prototype lives here, built on the colors, text styles and components of the PLZ library in Figma. Anything we're proposing is marked, so you always know what's real today. Pick a shell, describe the page to Claude Code, push, and share the link for feedback. When it's approved, send the link to the dev team.
Start here
New to the studio, or to Properstar? These are the questions people ask first. Click one to open it.
Foundations
The colors, type, logo and shapes every page uses, read live from the kit's tokens. Click any swatch to copy its CSS variable.
Components and blocks
Every shared piece as plain HTML on the kit. Pick a variant to see it, then open the snippet to copy it. Website blocks carry the same data-block name the developer uses in WordPress.
Shells
Complete pages to start from, rebuilt from the live site. Copy the command, swap in your name and page name, and you have your own copy to change.
Kit status
Where each piece exists today: in the kit, on the live site, and in the PLZ library in Figma. A tick means we checked it there. An empty dot means nobody has checked yet, so that's the to-do list.
How close is the live site to Figma? See the measured comparison.
Figma coverage
Every public component in the PLZ library, the source of truth. A tick means the kit has it, so you can use it in a page today. Click a name to open it in Figma. Everything without a tick is the to-do list: ask Claude to build it from the Figma link, then add it here.
Properstar Studio · tokens from the Puzzle Design System and the PLZ library · open the gallery