John Rafael

I was handed an early glass concept. I turned it into a design system.

In-house at Ivím, 2026. Design system.

Ivím’s brand team drew a new glass look for the platform, which Ivím calls Liquid Glass. I built the components it lacked, gave it a real light mode, and rebuilt the library around it.

The story in four pictures

Dark

Light

The concept as I got it, cropped from its own reference screens. The light version was drawn, but the glass values were the same in both.

Dark

Light

The first components with real Light and Dark values, built from the same tokens.

The old kit

Glass

Buttons restyled for glass, in the shared file, with the old kit’s names still beside the new ones.

Dark

Light

One of 17 Ready components in v2, both modes from one set of names. Dark is what the app ships today.

Problem

Ivím was redesigning its whole product platform to feel clinical and trustworthy, and the new look came as a concept from our brand team.

It was a Figma file of glass components with no documentation and another library’s names. The glass only worked on a dark background, so Light was a copy of Dark.

My first review found 9 components, 5 of them with defects, and no inputs, cards, list rows or sheets. The redesign needed all of those.

What I built

I built the missing components as the redesign’s screens needed them: Select, Input field, Switch, Status pill, Stat, Source mark, and the purchase cards.

The redesign’s main page uses my Input field 9 times.

Then a real light mode. I gave 121 color tokens their own Light and Dark values and added 16 text styles and five documentation pages.

The judgment moment

I built all of it beside Ivím’s older UI kit, because other teams work from that file.

Two weeks in, that was the problem. Nothing could be deleted, so the file carried two vocabularies, and every token audit ended in “hide, don’t delete”.

So I froze the old file for the teams that use it and forked a copy, v2, where glass replaces the old kit and every name follows one grammar Ivím owns. The token picker went from 1,024 tokens to 199, and the file from 117 pages to 25.

The first page of v2. One grammar, and the Figma name is the code path.

The shared file, 117 pages

End of 117 pages

v2, 25 pages

End of 25 pages

The two files’ page lists, scrolled at the same speed. v2 is done in under a second.

Deleting was the one step I couldn’t undo, so I held it until I had gone through the old kit’s example screens myself. Then I approved removing 104 pages, 558 tokens and 720 styles.

Proof

Nothing broke.

1,848 tokens and styles were renamed, and the 21 check frames didn’t move. Before the deletion, every page that stayed was scanned for anything still pointing at what was going, and nothing was. Then 66 frames captured before and after matched to the pixel.

v2 has 17 components marked Ready, each reviewed in Light and Dark.

Constraints

AI agents did most of the writing into Figma, from specs I approved, and screenshots in both modes were checked after each step.

The calls were mine, and some of the work was by hand: I reworked the delete buttons’ focus rings myself, and the build scripts then followed my version.

Developers read tokens in Figma and write the app’s theme by hand, so each v2 name is also its code path, ready for when they switch over.

The app ships the glass look in Dark, and the journal, Purchases and Orders I designed on it are live. v2 isn’t published yet, and Light exists only in Figma.

Next

Next I’m preparing v2 for Code Connect, which ties each Figma component to its code.

It will then be used for an internal prototyping tool at Ivím. The screens themselves are their own case study.

Want to know why I forked the file instead of adding to it?

Ask JohnLM about this project