Electron-api-demo colors/fonts?


#1

How did you decide the colors/fonts for the electron api demo? It’s just too beautiful. What is the process like to develop such a visually appealing cohesive theme? Are there any books, talks I can try to read/listen? Thanks so much!


#2

There wasn’t really a specific process. More like “keep prototyping/redesigning till you’re happy”. :relaxed:

For example, at the beginning it was a long list that you could collapse/expand. But then some feedback was that it looked “too much like a website” and should feel more like a desktop application. So a left navigation got added instead.

Font
Since it’s a desktop app, the font is set to be the same as the system’s default font. San Francisco on macOS and Segoe UI on Windows. For the code blocks it’s Source Code Pro.

Colors
Can’t really remember where they came from, maybe @jlord still remembers?

Then some point all colors got checked with this tool to make sure they have enough contrast. Here the before/after.

Hope that helps a bit.


#3

Incredible! Thank you so much for the response.


#4

I think colors came about organically also as we tried to figure out how to represent the different categories and the list of categories grew.