Climaty AI - design system
Agentic is chat-first, fast-moving, and grows new surfaces constantly. This is how I built a foundation solid enough to keep every new screen feeling like it belongs.
I own and evolve the Climaty AI design system, keeping Agentic consistent and easy to use as it scales.
Bold and Natural
Climaty is a carbon platform, so green had to feel earned, not decorative. Be Vietnam Pro carries the typeface. Green is the brand color, Neutral runs the UI, and Success, Warning, Error, and Info cover status states across the product.
The original file had two color ramps and eight tokens, all for buttons and icons. No text styles existed anywhere. I audited it and rebuilt the foundation from scratch.
I refreshed colors, typography, spacing, and shadows into one consistent system, with Light and Dark built in from the start. This turned a handful of scattered values into a system the product could actually rely on.
Button colors existed, but no real Button component did. I built out a full library, Button, Table, Modal, Alert, Badge, Avatar, and more, all on the new foundation.
Every surface in Agentic, from chat flows to dashboards like this one, now pulls from the same tokens and components. Change one, everything updates, no separate version to maintain.
The real fix wasn't the components, it was giving colors a job (Text, Border, Status) instead of just a name. Once that was in place, everything else got easier to build and easier to scale as Agentic grew.