Design foundations and the engineering handoff

Give engineers a reference by the next morning

Engineers needed a component reference by the following morning so they could build their own workflow screens without asking me to adjust each element.

I made a standalone HTML reference that opened directly and printed to PDF. Labels, state variants, and style references sat beside the components, followed by workflow examples. That met the agreed format without adding Storybook or another application route under the deadline.

On July 2, one engineer reported integrating my shared UI package into the budgeting work. Another confirmed receiving the UI-element reference and using it in his own environment. I explained the shared styles and the cards specific to each workflow. Backend connections were separate from this UI integration.

Shared HTML references could lose their linked assets. Teams also worked in different environments and needed components they could reuse in code. I began collecting styles, tokens, components, assets, and guidance into a separate system, and raised the need for engineering support.

Specify component states as well as appearance

The foundations covered color balance, typography, spacing, grids, elevation, iconography, and voice. For dense application screens, I worked through small-text legibility and the treatment of status, hover, and focus.

Fields needed labels, helper text, and validation. Cards needed different levels of emphasis. AI workflows needed states for queued work, progress, failure, sources, and decisions requiring a person. I worked on what those states meant as well as how they looked.

Evidence planning reused the study-governance code's definition of routine steps and human decisions. That gave the two workflows a shared model for those steps.

Define when a component is ready to share

A component needed an owner, documented states, shared style mappings, accessibility requirements, and verification before it could become a shared control. Product-specific examples could remain references until they met those requirements. The charter named me as the local design-system lead. The broader governance roles were still unstaffed.

The defect record documents keyboard repairs to custom radio controls. Tab entered the group once, arrow keys moved between choices, and Home and End reached the endpoints. The recorded component checks covered those behaviors; one integration received only source inspection because dependencies were missing. Overall accessibility remained unverified.

Check where shared tokens are used

A later documentation prototype applied a generated card-background token from the shared styles. Other parts still used local values. Its code confirmed partial reuse.

The earlier token design named JSON as its source. The later generator read base values from CSS and produced CSS, JSON, and Tailwind outputs. Builders needed guidance for the version they were using.

Check the exported presentation

The system included title, section, comparison, process, and content layouts for the presentations produced by the medical-content workflow. Exports needed to retain typography, spacing, color, and sources. The export tooling generated its color map from the shared tokens.

In July, images and the wordmark appeared in the browser preview but disappeared from PowerPoint. The exporter was not drawing them. The issue records the repair and a comparison in PowerPoint that also caught incorrect closing-slide text.

The downloaded file needed its own checks for layout, editability, sources, and accessibility. The archive also contains a brand linter and guidance for coding agents. Their presence does not show that every delivery team used them.

Identify the version being handed over

At the July handoff, the local HTML demo, React application, and backend automation were separate pieces. The team needed to agree which UI version to show alongside the backend demonstration.

Later, stakeholders saw a version missing source-review controls from my shared prototype. We traced the mismatch to version integration. The handoff needed to specify which behaviors worked and which connections were still missing.

The expanded package separated core controls, product-specific examples, slide components, supporting code, and design guidance. It supplied source for integration, not a runnable application. Engineers still needed to set up library tooling, integrate the components, and restore tests tied to the original environment. July's confirmed receipt does not establish receipt or adoption of this later package.

The prompts carried the constraints

Several later prototype explorations were built and revised in Figma Make. I treated each request as a small specification: it named the accessibility rule, the design-system token, or the exact control state a change had to respect. The panels below record three of those exchanges, request and response together.