Mastodawn

Roman Nurik Aug 31, 2023

Another design detail for Project IDX (http://idx.dev) is the custom light and dark color themes… a lot of work went into these themes last year. The themes were 🔬 hand-crafted to balance foreground/background contrast with adjacent-token contrast in the editor…

Project IDX

Project IDX is an entirely web-based workspace for full-stack application development, complete with the latest generative AI from Gemini, and full-fidelity app previews, powered by cloud emulators.

Show thread

Roman Nurik Aug 31, 2023

A key goal was to come up with a core color palette that simultaneously felt:

💜 Bold enough for our unique visual identity and marketing content (http://idx.dev)

👩‍💻 Yet restrained enough for extensive, sustained use (hours per day) in a core editor experience…

Project IDX

Project IDX is an entirely web-based workspace for full-stack application development, complete with the latest generative AI from Gemini, and full-fidelity app previews, powered by cloud emulators.

Show thread

Roman Nurik Aug 31, 2023

To build and fine-tune the palette, I built a ⚙️ custom palette editor in React, inspired by some great work from Stripe [1], and powered by Material's new HCT color system [2] for 👁️ perceptive analysis and interpolation.

[1] https://stripe.com/blog/accessible-color-systems
[2] https://material.io/blog/science-of-color-design

Designing accessible color systems

How we designed a color system with hand-picked, vibrant colors that also met standards for accessibility and contrast.

Show thread

Roman Nurik

The result is a palette unique to Project IDX that covers all our needs, from 📝 syntax highlighting to ✅ SCM badges (added, modified, removed files) to 💜 product and feature logos (IDX AI) to 🎬 YouTube videos* and beyond!

* https://youtube.com/watch?v=-wlZY4tfGMY

Project IDX: Full-stack application development with generative AI

YouTube