Tokens before pixels. I built the token layer first, in three tiers and bound every value as a two-mode variable. Components reference intent (action.primary), never a raw hex, so dark mode is a flip of a toggle, not a rebuild.

Compose with slots. Slots did the structural heavy lifting. One Table Cell with a content slot swaps between text, an avatar, a badge, progress or actions. One Input Shell serves text, search, number and select. One Icon wrapper swaps the glyph. Build once, reuse everywhere, which is the difference between a week and a month.

Accessibility from scratch. Every behaviour was hand-built to the WAI-ARIA practices: focus management, keyboard navigation, the combobox and menu patterns, grid navigation for the calendar, and a reduced-motion path for every interaction. Colour is never the only signal.

Motion as a system. I used Claude and Figma Make to define a small motion foundation, a handful of duration and easing tokens and documented the product's key interactions against it i.e. the button hover, the collapsible onboarding cards, the navigation and search expand and collapse and the light-to-dark theme switch.

One source of truth and an honest reconciliation. This is the part that makes Grove more than a library. The compiled component library was treated as the single source of truth for every value and the golden screens as composition reference only.

Due to the pace of the project, there was inevitably so minor Figma tech debt, such as hardcoded pixel values and mixed paddings. A delivery report was made that catalogued every place design and code diverged, grouped into what had to be created, what was fixed from a wrong token family, what the screens hardcoded and what may have been missed from the initial brief. Nothing was silently absorbed.

Documentation as a deliverable. Every component is documented against a consistent structure, with accessibility written in plain language and the slot content spelled out, then populated into the Figma library itself.