Arla Foods — Safety Heatmap

Arla Foods needed a safety heatmap for one of its plants: a view that maps recorded incidents onto the site by zone, so safety leads can see where accidents cluster and drill into the detail behind each marker.

I built the frontend, through the agency, working from the project’s Figma design system. The brief was focused — translate that system into a working, faithful Angular implementation.

I implemented the design system on the frontend as a reusable component set — buttons, modal and forms — and wired them into the heatmap’s flows. The incident form pairs a map position picker with validated fields and image upload; the modals cover area switching, incident detail with CSV export, and the per-position incident list.

The work was about fidelity: matching the tokens, states and spacing of the Figma system so the implemented UI reads as the same product the designers drew, not an approximation of it.

Turning a design system into components is exactly where AI earns its place in my workflow — drafting the component boilerplate from the specs and validating each state against the Figma source — so I spend my time on the details that matter rather than on the repetitive scaffolding.

From the Figma frame to a merged pull request: the same path on every project.