CodePen Samples

I use CodePen as an open-source playground for front-end projects. The environment frees me up from setting routine tasks to preview the code result. I use it to showcase ideas through code to my colleagues.

Below are few examples from my CodePen profile.

Color scale using chroma.js

In 2019 at Terumo, we started efforts to bring all Terumo medical GUI under one design system. We wanted to expand existing color pallette to include more hues.

While working on this mini-project, I came across chroma.js library which had lots of handy utilities that helped me demonstrate lightness and hue corrected pallette.

See the Pen Chroma basic scale by Swanand Kalugade (@skalugade) on CodePen.

Protocol configuration layout test

In a recent project, I wanted to showcase to team how cards can appear / scale based on the strings inside. This quick mockup was helpful to discuss localization issues, string wrapping, layout with team. Sometimes this can take more time through design tools.

See the Pen Configuration by Swanand Kalugade (@skalugade) on CodePen.