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.
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.
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!