Why and how we created a custom syntax highlighting to match the new CodeSandbox's branding, a thread (🧵)

When we started redesigning the CodeSandbox, we noticed that the most prominent part of the UI is the code. And the product is where our users spend most of the time. So to make a cohesive branding experience, we need to customize the syntax theme.

The hard part is that a good syntax highlighter uses a lot of colors; the goal is to facilitate discoverability, so how can we keep the utility with only a few brand colors?

Me and @marcovincit started exploring some possibilities and decided to create a range of shades from the brand colors and use them in blocks on code.

A good example is in CSS, where the number is using purple and the unit a light-purple; it is recognizable as a single block in a fast scan but in isolation has its nuances.

The hard part is that mocking colors in Figma is far from productive and flawless, limiting us to seeing all variations and edge cases. So with @JasperDeMoor's help, we created a tool with a color picker to fast iterate and look at the range of all languages.

In this process, we realize that each language is read/scanned differently. So why not optimize the syntax for each language?

Using VS Code Developer Inspector to identify the tokens, we start adding some optimizing rules for HTML, CSS, React, Markdown...

And here is the recipe for @codesandbox new branding syntax highlight:

· Color blocks optimized for bird's eye-view reading but with slight variations viewed in detail
· Dim repeated chars that don't add to the story of the code
· Use the unique colors from our new branding 😎

If you want to know more about the new branding, keep an eye out!

https://twitter.com/codesandbox/status/1494325776874815492

Branding Syntax Highlighting

How about using sound in software to create an atmosphere around your actions?

for example, code an epic task in a fantasy adventure or meditate in a buddhist mountain while fixing a bug:

→ https://code-sound.vercel.app/ 🔈🔈 

This is part of some different brainstorms we are doing at @codesandbox. We pick the last day of the month to imagine unusual scenarios. It's called "What if Day." No commitment in been incorporated in the product, only to explore possibilities.

Hey @zenorocha what do you think to create some sound effects for dracula?

Sound effects + software is one that we did a couple of months ago. It was fun day with @marcovincit and @DannyRuchtie.

They even dusted off their electronic keyboards: 

and created some custom sound effects for our online editor: 

This kind of activity is so healthy for the team: it opens the eyes to innovation and provides the product an opportunity to incorporate the best findings.

If you want to take it for a spin:
- Create a function
- type useState or useEffect
- open html tags (div, h1) 
- create variables (const, let)
- change file
- have fun

→ https://code-sound.vercel.app/

Experiment: Code Sound 

Recently I've been seeing a lot of spatial interfaces. In the beginning of the year at @codesandbox we played around with this idea too.

A shared room for developers, designers and PM to work together and iterate in the product. 

What I think is pretty cool is to be able to give different tools for different roles. A designer can use knobs to manipulate code, a PM can annotate ideas and whiteboard while the developer tweaks the code. 

Some nice details we added in this spatial paradigm are:

- Shortcuts to navigate spatially
- Command palette
- Auto organize to remove the window management burden
- Multiple previews 
- Keep the text programing instead of node programming

Some people that I showed this demo to, called it 
"Miro for development" and I liked it. 

What do you think? Drop your ideas :)

By the way, the live environment was made using the Sandpack library. It is the @CodeSandbox open source bundler. 

https://github.com/codesandbox/sandpack

Best stack to quickly prototype:
- knobs from @pmndrs 
- components from @radix_ui 
- Monaco editor from @code