Gus de Souza - Portfolio

Design Documentation

AI Visual Guidelines

A shared visual language for AI across the product

Tools: Figma and Research

Context

AI features were multiplying across ecoPortal at once: the smart assistant, generated summaries, smart form fields, language translation. Nothing tied them together visually. Each one was free to express AI its own way, with its own colours, its own icons, and its own idea of when to announce that AI was involved at all.

The problem

Inconsistency here is not a tidiness problem, it is a trust problem. If AI looks different everywhere it appears, a user cannot tell at a glance when they are reading a generated answer and when they are reading their own data, which is exactly when they most need to know whether to check it. The opposite failure was just as real: signalling AI on everything it touches turns the marker into noise and it stops meaning anything.

My role

I set the rule for when AI is visible at all: the visuals apply when a feature is powered or enhanced by AI, and are left off standard elements and actions even when AI is working behind them. That one distinction removed most of the over-signalling. Then I built the system rather than a style, covering gradient construction, icon design principles, naming conventions for AI features in copy, and a full component library for web and mobile. The audience was internal, so the documentation itself was the deliverable, and every rule carries the reasoning behind it.

Business impact

AI now reads consistently wherever it appears, giving users a clear signal that a result may need their attention or verification. For the product team, the system turned AI into a repeatable pattern: designers and developers can build new features from documented components instead of redefining colour, iconography, and naming each time. Because every rule includes the reasoning behind it, edge cases can be resolved without coming back to design, keeping the system useful as AI continues to spread across the product.

ecoPortal is a configurable enterprise software company that provides a centralized platform to support workplace health, safety, and environmental risk management.

Showcase Case study

ecoPortal is a configurable enterprise software company that provides a centralized platform to support workplace health, safety, and environmental risk management.