Sankey chart UI — light & dark modes. Which version would you use?

Sankey chart UI — light & dark modes. Which version would you use?Sankey chart UI — light & dark modes. Which version would you use?

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Taste Test

Create your own

Ahmad Nazirov | Product Design & Framer

pro

• Oct 27

Sankey chart UI — light & dark modes.

Which version would you use?

Figma chart

6 voted

46%

7 voted

54%

13 votes

Closed

Sagar Nawaz

• Oct 27

Light mode for me! ✨ Clean and easier to read the revenue flow.

But dark mode looks premium too - both versions are super clean, great work!

Ahmad Nazirov | Product Design & Framer

pro

• 2d

Thanks, Sagar! Really appreciate it! I’m still exploring both styles, so it’s great to hear different perspectives 🙌

Sagar Nawaz

• 1d

Anytime Ahmad! Love seeing your explorations, keep it up! 🚀✨

Ahmad Nazirov | Product Design & Framer

pro

• 1d

Thank you so much🙌

Shahriar Jubayer Eshat

• 2d

Light

Ahmad Nazirov | Product Design & Framer

pro

• 2d

Thank you🙌

Samson T.

pro

• 2d

Dark for me. The flow colors carry the whole chart and they read brighter against it. Did you check how the thin low-value flows hold up in light mode? That’s usually where sankeys fall apart.

Ahmad Nazirov | Product Design & Framer

pro

• 2d

Not 100% yet, I’m still exploring different styles and variations. I’ll definitely check how the thinner flows look in light mode. Good point, thanks for bringing it up!

Samson T.

pro

• 2d

Gotcha! and glad you saw it too.

Ahmad Nazirov | Product Design & Framer

pro

• 2d

🙌

Mykola Malyhin

pro

• 1d

The light and dark modes preserve the chart’s visual hierarchy.

Ahmad Nazirov | Product Design & Framer

pro

• 9h

Thank you🙌

Adil Syed

• 1d

Dark mode wins this one for me. The flow colors read brighter against it and the chart feels easier to follow.

Ahmad Nazirov | Product Design & Framer

pro

• 9h

Thank you for feedback🙌

Vara Creative

pro

• 1d

Light mode takes the vote for data clarity. When hovering over a single source does the chart dim all other paths and highlight only that flow across to the outcomes.

Ahmad Nazirov | Product Design & Framer

pro

• 9h

Thanks! Yes, when hovering, the opacity of other elements decreases slightly, shifting the focus to the main information. Here, I have emphasized the visual aspect.