In this blog, I will be talking about how I managed to use Vocabulary ( Creative Commons’s Design Library ) efficiently in our Open Source website.

What is Vocabulary?

Vocabulary is a cohesive design system to unite the web-facing Creative Commons. In essence Vocabulary is a component library that uses and extends Bulma CSS library. Vocabulary makes it easier to develop Creative Commons apps while ensuring a consistently familiar experience. This project is still under development.

Why Vocabulary?

Vocabulary is used to describe the overall visual design of our digital products. At first glance, it appears to be: an amalgamation of component designs with a…


Well in my previous blog, I demonstrated what was my Outreachy project about. Here I will talk about my progress in the past 7 weeks.

The Set-Up -

The Creative Commons Open Source website is built using Lektor. I was not very familiar with Lektor, so I started by going through the documentation and the official website code. I learned how awesome it is and can also be used by non-coders. I got familiar with the jinja templates and working of themes in a Lektor app. For integrating new styles from Vocabulary, I replaced templates/ folder with a theme/ folder.


This blog demonstrates the project I am working on during the course of my Outreachy internship. My project involves redesigning and reimplementing one of the web products of the CC network using our new cohesive design library — Vocabulary. After completion of my internship, the Creative Commons Open Source website will have a completely different looking interface that will extensively use Vocabulary components.

I will start by explaining the problem -
There exists a large variety of web products across the Creative Commons network. These products serve different purposes for the network and so do they vary in the way of…


In this article, I will be talking about the next step of the UX design cycle and that is Design Alternative.

This article is inspired by a Coursera course, Introduction to User Experience.

At this point in the design cycle, we have enough knowledge of the problem space as we have completed the first step — Resource Gathering. By problem space, I mean we have enough knowledge about the user, the task, the current way of accomplishment, and other relevant data. Now, the goal of the next step is to use the data and come up with a better design…


Photo by Dan Dimmock on Unsplash

I will be describing the UX design cycle with a series of articles and this article is about describing the first step of the design cycle which is Resource Gathering.

As an outreachy intern, I am handling the integration of Creative Commons design library — Vocabulary with one of our web products — CC OS. I have been working the design library for 3–4 months now and I have enjoyed the experience the library caters and I am trying to achieve the same experience in the Open source website. To understand UX in-depth, I have been reading different resources and…


“Sky at night” by Rychu92 is licensed under CC BY-SA 2.0

First let me introduce myself because of course I am not a very famous blogger or writer.

I am Dhruvi. I am a third-year undergrad student. I am a designer/developer and also a FOSS enthusiast. I started my opensource journey a year ago (that is around Feb ’19) and now here I am starting my Outreachy internship with this blog (not literally of course). I am consistent, curious, and creative, and below I will tell you how these three C’s have helped me through my journey.

Below are the four things that I think might be the ‘takeaways’ from my…


why? why? why?

I wrote this article while prepping for my Outreachy internship. I was trying to find out why Lektor is being used for the project and found out really convincing reasons for the same.

Let’s start with basic types of website -

  1. Static website: Here the webpages are pre-loaded to the server and when the request is made, these pages are served to the client as it is. These webpages can use HTML, CSS, and Javascript. By static, it does not mean that these webpages are devoid of user interactivity. …

Dhruvi Butti

Designer/Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store