Insight Investment

Insight Investment is a global asset manager overseeing hundreds of billions in assets. The product estate spans a public-facing marketing and content site alongside a secure client portal used by institutional investors. Both surfaces had accumulated significant design inconsistency over time, with no shared component library, no token system, and design files that had drifted far from what was in production.

The brief was to bring order to that: establish a proper token-driven design system in Figma, reduce the debt that had built up across both products, and streamline the design process so that two separate teams could move faster without diverging further.

The Design System

The system was built in Figma using variables throughout. Primitive tokens (colour, type, spacing, radius) form the base layer. Semantic aliases map those primitives to purpose (surface, text, border, interactive states), and component tokens allow targeted overrides where a component has specific needs. Figma variables bind every component to this token layer, so a change at the semantic level cascades through the entire library automatically.

Light and dark mode support was built in from the start using Figma's variable modes, allowing any screen to switch themes without manual intervention. This also made theming discussions with the marketing team significantly faster: a proposed palette change could be previewed across the entire design in seconds.

Design & Tech Debt

Before the new system could land, existing Figma files were audited in detail. Duplicate components were identified and consolidated. Detached instances were rebuilt against the new library. Hardcoded fills and text styles were replaced with variable-bound properties. On the engineering side, the token naming structure was aligned with how the front-end was consuming design values, removing the translation layer that had been causing discrepancies between design and build.

Two Teams, One System

The marketing team and the client portal team had different, and occasionally competing, requirements. Marketing needed editorial freedom, campaign flexibility, and strong brand expression. The portal team needed high-density data layouts, complex table structures, status and permission states, and interaction patterns suited to a financial tool used by sophisticated investors.

The solution was a layered library structure: a shared core (tokens, base components, typography) consumed by both teams, with separate extension libraries for each product's specialist components. Neither team could break the other's work, and brand changes rolled through both surfaces from a single update to the core.

AI Prototyping

Several flows in the client portal involve conditional logic, permissioned states, and multi-step processes that are cumbersome to represent accurately in Figma. AI was used to rapidly produce browser-based prototypes of these flows, giving stakeholders something interactive to review before any significant Figma component work was committed to. The prototypes were never intended as a development specification; they served as a fast feedback mechanism, surfacing structural issues and missing states early when changes were still cheap.

Outcomes