This week we open sourced two gorgeous Studio styles: Emerald and Winter Wonderland. I decided to grab one of these styles and make it my own.

I opened up Emerald’s repository, forked it to my Github account, and cloned it to my local machine. Next, I opened up the style in Studio.

I wanted to play off the style’s name Emerald and make the design literal. Think shades of green and a little bit of bling. To start, I changed the font family for all the labels to HolmenOT. I opened up the Labels style sheet and updated the font variables with the new font family.

changing the font family

To really capture the emerald vibe I decided to change up the rail station icons. I found the SVG Emerald-City by Christine Komatsu from the Noun Project. I saved the emerald SVG to my project’s icon folder and then swapped out the rail station icon path for the emerald.

adding the emerald icon

Since the emerald is an SVG, I can style it with CartoCSS. I lightened it up with marker-fill: #333. I also updated the attribution in the Settings panel to credit the icon’s artist.

For my last step, I added an emerald glow. I tried tweaking the color variables, but I wasn’t getting the right effect, so I turned to a pattern. I found Green Dust & Scratches by Atle Mo on Subtle Patterns. I added the pattern to the Map and #water elements.

And here’s the glowing map:

Every time I made a significant change to my style I committed it in Git. This was helpful for when I didn’t love a change, so I could easily revert it. We wrote up a guide with best practices for pushing Studio styles to Github.

I hope this post inspires you to grab one of our open source styles and make it your own!