Develop better visual language (style guide)

[skorphil]

This is large task and should be decomposed

Problem

At the moment app has a generic and low quality visual language. Current appearance does not communicate app unique strengths and focus on providing good UX. Project doesn't have style guide, which leads to mess in terms of visual communication

Expected outcome

Project has style guide which includes:

• Color and typography choices logic
• Illustartion style logic
• App logo
• Illustartions for in-app screens
• UI colors and screen example

Endeavors so far

App logo

I was trying to design logo, following ideas:

• Somehow combine savings and notepad in design
• Make it single color to make it future-proof and probably adapt to adaptive icons format
  Ended up with stylized S for SavNote and $ for finance associations. I also tried to implement pen in design to communicate notepad or journal but didn't like how the overall shape become too complex. Maybe final logo is not too bad, but i think it looks too generic

Illustartions

I tried to generate some illustrations with ai. I aimed for doodle-style single color illustrations, like Notion once had. I wanted illustrations to be "secondary", do not standing out in front of productivity vibe of an app. I tried to use people in illustrations to empower more human-oriented vibe. Some nice illustration library i found was https://www.transhumans.xyz/

It would be nice to have better illustrations in terms of style. Also it would be great to make them inclusive.

UI colors

At the moment app uses standard blue colors. Maybe we can achieve more individual look. I thought about discarding colors in ui at all making app pure black/white/grey with some color touches in illustrations

Product colors

I started with generic green-finance vibe. IDK, maybe there is a better way. Also the exact colors are undefined