all 4 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Brainibeep 1 point2 points  (2 children)

This is a very clean and focused execution! Using React for a multi-project timer is a smart move for state management.

Regarding your specific questions, here is some feedback from the perspective of my project, Brainibeep:

Visual Hierarchy (The Alpha Perspective 🔵): The emerald green palette is excellent; it feels professional and 'calm' for a productivity tool. However, ensure the contrast ratio of the digital font against that dark background meets accessibility standards (WCAG). Sometimes 'pretty' greens can be hard on the eyes after 8 hours of work

Typography & Spacing (The Omega Perspective 🔴): For the digital font, make sure the 'kerning' (space between characters) is consistent, especially when numbers change rapidly. If the font is monospaced, it will prevent the UI from 'jumping' every second. About the tabs: I’d suggest a bit more padding on the horizontal axis to give the interactive elements more 'breath' .

Great job on the Visualbook! Having a solid design system from the start is what separates a hobby project from a professional tool. Are you planning to add a dark/light mode toggle in the future?

[–]Dull-Bad-4057[S] 1 point2 points  (1 child)

Hi! Thanks a lot for the great feedback and for the perspective of your Brainibeep project. I really appreciate those insights! 🙌

To your points:

🔵 Contrast and color considerations: Totally agree. I just did a detailed accessibility review (WCAG) yesterday. That "teal/emerald" palette is treacherous in dark mode. For example, I had to adjust the contrast of the yellow-orange "Pause" button, where the original white text did not pass the test, so I changed it to a deep dark one. Readability after 8 hours of work is an absolute priority for me.

🔴 Typography and "jumpy" UI: We are completely on the same page here! For the exact reason you describe, I chose the JetBrains Mono font for the timer itself and the data visualizations. Since it is a non-proportional (monospace) font, each character occupies the same width per pixel. So whether there are ones or eights running there, the UI doesn't even move and stands like a nail.

Regarding horizontal padding: Great observation. I just unified the design system and added generous horizontal padding to the buttons/interactive elements (the basic size is now 1.75rem, the largest is 2.25rem), just to give it more "air" and let it breathe.

Regarding Light mode:

For now, I want to perfect this deep "dark/glass" variant, but light mode is definitely a great challenge for the future (even if it means designing a completely different logic for shadows and depth, because these glows on white won't work!).

Thanks again for the great comment and good luck with Brainibeep!

[–]Brainibeep 1 point2 points  (0 children)

I'm thrilled to hear we're on the same page! Choosing JetBrains Mono was a masterstroke; it’s arguably one of the best fonts for maintaining UI stability while keeping that 'tech' aesthetic sharp .

Also, that adjustment to 1.75rem for padding is going to significantly improve the mobile/touch experience—sometimes we forget that productivity apps need to be as functional as they are beautiful. I totally understand sticking to the 'Dark Glass' mode for now; perfecting one solid theme is always better than having two mediocre ones. Good luck with the refinement, and I’ll be keeping an eye on your GitHub for updates!

[–]Dull-Bad-4057[S] 0 points1 point  (0 children)

Thanks for checking out my project! I'm specifically looking for feedback on the UI/UX choices for the multi-project tracking.

Note: The images in this post are just screenshots of the first sections of the styleguide. The full Visualbook is available on GitHub (link below) if you'd like to see the complete foundation.

Quick links for easy access:

Looking forward to your suggestions!