<?xml version="1.0" encoding="utf-8"?>
Open full project

For this brief, I've made two pages from a mock mediation app called Syth Sound. This also served as a refresher on Figma.

Below is my login page and it's dark mode alternate.

Dark Mode 1

Dark Mode 2

The "for you" page uses artwork I made from a previous project. It did help me overall understand how to implement dark mode correctly and not to let the image contrast with the text.

Dark Mode 3

Dark Mode 4

Tools used

Figma

From brief

Share

Share your insights — leave a project review and help others grow their skills

Reviews

2 reviews


Shemar, I’d say you nailed this dark mode implementation 🫡 there’s a subtle but still noticeable change in the shades of purple when it switches into dark mode. There are a few things you could improve, mainly around spacing, hierarchy, and rounded corners but what really caught my eye was the special border on the login with Google button. It doesn’t really stand out in light mode, but in dark mode, oh, that’s something! Why is it only applied to the Google button and not the rest of the fields on the login page? That’s just something to contemplate, you don’t have to answer 😄

This next point I’m not entirely sure about, but I wanted to mention it: if you keep the dark color for the audio tracker “1h 56m” in dark mode, will it actually improve legibility? The current one isn’t very scannable. There are many ways to experiment with this, including changing your original artwork so the geometrical lines don’t strike through the white text. Perhaps you could try different artwork covers to see if this is specific to the artwork or a color edge case.


Hey Shemar! Really liking the overall look of your dark mode design, it feels modern and clean. Just had a few thoughts that might help take it even further:

  • I noticed that the input fields and placeholder text could use a bit more contrast. Boosting that contrast could really help with legibility.
  • Also, the “Or" and "Continue with Google” section blends in a bit, maybe giving it a more distinct background would help it stand out better and feel more like a separate action.
  • In terms of layout, playing with the spacing between cards and creating a clearer hierarchy between the text elements would bring more balance to the overall composition. It would make everything easier to scan at a glance.
  • One suggestion on simplifying the interface: there are quite a few buttons shown at once. It might be worth applying Hick’s Law here—maybe tuck the less-used actions into a three-dot menu and highlight just the two key actions, like “Listen” and “Like.” That way, users don’t have to think too much about what to do next.

You’ve done a great job with the visual side, just a few tweaks around contrast, clarity, and accessibility could make it feel even more polished and user-friendly. Keep up the great work!


6 Claps
Average 3.0 by 2 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>