Properti design system

When I joined Properti there was no design system. There was a brand guidelines doc in a Notion page. There were Figma files with components that had drifted from the shipped code. There was ad hoc Tailwind being written freshly on every new page, which is how you end up with three different shades of the same teal in production at the same time.

I built the design system across nine months in parallel with Agent Grader, the internal quoting system, and the website 2.0 rebuild. Not as a standalone project. As the connective tissue that let those three things ship at speed without looking like they came from four different teams.

Twenty-two pages of interactive documentation. Each page a live React component with props controls, copy-pasteable code samples, and the canonical usage of that element. Think Storybook, but authored in the same repository as the product code.

Foundations. Colour tokens, typography scale, spacing system, corner radii, shadows, elevation.

Components. Buttons, inputs, forms, modals, popovers, tooltips, tables, cards, KPI tiles, badges, pills.

Patterns. Page layouts, dashboard grids, form flows, empty states, loading states, error states.

Motion. The Puppeteer-to-ffmpeg pipeline for conference screens and social ads, documented alongside the motion timing specs.

Brand. Logo usage, the two-teal rule, the scribble elements, HouseElement, AgentGraderIcon.

Each component in the system is the same component shipping in the product. The design system is not a copy. It is the production components, shown in a wrapper that renders them across their prop space side by side.

Design systems fail when the documentation is separate from the code. Figma files drift. Static Storybook drifts. Anyone who has worked on a design system at scale has watched this happen at least once.

My approach was to make it structurally impossible for the system to drift. The design system pages and the production pages render from the same component code. If I change a button’s default padding tomorrow, every page in the design system reflects the new padding the next time it is viewed. The documentation cannot be wrong because it is the same code.

This is a small architectural move with outsized consequences. Adoption goes up because the system is trustworthy. Drift goes down because it is mechanically impossible. Time-to-consistency for new engineers goes down because there is one source of truth instead of three competing ones.

This system was built by one person. The speed came from the AI Operating System and the cursor rules, not from heroic effort. Every new component added to the system was generated inside an AI session that had the brand rules, design system rules, and dashboard rules auto-injected. The AI wrote components that were already on-brand by default because the context rules enforced it. The human work was the judgement calls, the edge cases, and the spec writing.

This is the payoff of the codified context thesis, made material. A design system being built solo by a design manager at a small scale-up is either going to be thin and shipped late, or it is going to be built in a way that AI can do most of the component scaffolding while the human does the judgement calls. We did the second, and it is the reason this system got to twenty-two pages instead of the six it would have been otherwise.

Design systems at small companies tend to fail in two directions. Too thin to be useful, or too ambitious to finish. The one I built at Properti is a specific take on the tradeoff: lean structurally, deep per component, implemented in a way that makes it mechanically impossible for design and code to drift, and built solo at a speed that was only possible because of the context layer underneath it.

The claim is not that this is the world’s greatest design system. I know design systems are table stakes at this level. The claim is narrower: building one this way, at this scale, solo, with this adoption pattern across four shipping products, is one data point on what a design leader with engineering judgement can reach for in the current tool environment.

That is the thing that generalises beyond this specific system.