Visual overhaul

[RustoMCSpit]

https://coolors.co/palette/f1dac4-a69cac-474973-161b33-0d0c1d

[RustoMCSpit]

fonts have been added via PR

[kmturley]

Thanks for the suggestion. Will look into it as an enhancement. I would need to make sure the fonts/colors looks good across all pages etc. And check the font license.

Currently I am using Google Fonts Roboto. I agree this is not the ideal choice for open-source: https://github.com/studiorack/studiorack-site/blob/main/components/layout.tsx#L21

[RustoMCSpit]

fonts have been added via PR

thoughts on these fonts? im not sure of their legal status btw

[RustoMCSpit]

this is just a quick bucket fill job with a random-ish color palette, hence why the text is so messed up. im thinking that this websites current color scheme is awful and that it needs to be changed, and on top of that it also needs a light mode. the padding on the top of the boxes is too big, and there is no padding currently at the bottom. i also still believe the fonts need an overhaul

[RustoMCSpit]

the color palette i added is just an example to lay out different zones more clearly

[RustoMCSpit]

versus

the padding on the top of the boxes is too big, and there is no padding currently at the bottom

top one has a nicer shape, i shouldve made the top even smaller tbh

[RustoMCSpit]

also these would look nicer

[RustoMCSpit]

the images on display also need to have some sort of standardisation, it should be a logo honestly. after clicking on it there should then be a set of images of the gui

[RustoMCSpit]

[RustoMCSpit]

adding a transparent white grunge effect too?

[RustoMCSpit]

potential future things: new download logo, resized download button size (might rework it all so that the horizontal and vertical distance to the edge is equal), might round off edges differently, slightly re-adjust placement of tag icon, cut a bit off the top of the button, better / different type of grunge / vintage texture (and better applied) (possibly leather?)

[kmturley]

Hey Thanks for the suggestions:

• Fonts: I would like to find an open-source font to replace Google Fonts
• Images: Not all plugins have logos, screenshot of the plugin UI is the most common approach which is why I used the same.
• Styling: Your ideas are good, but different color scheme appeal to different people.

I am not going to do a full design overhaul right now, would prefer to spend my limited time on features. However I like the idea of being more flexible with styling/colors/fonts.

I propose we could turn this feature request into Custom themes Allow creation of custom themes, with different fonts and colors and a way to switch theme. What do you think?

[RustoMCSpit]

Fonts: I would like to find an open-source font to replace Google Fonts

https://www.fontshare.com/fonts/red-hat-display

Images: Not all plugins have logos, screenshot of the plugin UI is the most common approach which is why I used the same.

if a plugin doesnt have a logo we can default to this i guess

Styling: Your ideas are good, but different color scheme appeal to different people.

the color schemes are examples for now

Custom themes Allow creation of custom themes, with different fonts and colors and a way to switch theme. What do you think?

so have a settings page where you input hex codes for different ui elements or use a preset which auto-fills hex codes? that fixes color scheme issues but it doesnt fix layout issues, such as the plugin box. this would split this issue into two issues, layout and color scheme. layouts could also be customised (e.g. vlc player) or their elements (e.g. apple ios letting you change app icons / widgets) but thatd be a nightmare.

[kmturley]

The majority of users would not likely want to fiddle around with hex codes. I think a theme switcher with built -in themselves and a way for users to submit new themes or install custom themes

[RustoMCSpit]

okay but how do they submit new themes without hex code inputs?

[RustoMCSpit]

also can we do a quick color scheme shift of the website as it would take ten minutes and then work on more complex solutions

[kmturley]

No because all the branding uses the color scheme. I order to support themes and you can customize how you like.

[RustoMCSpit]

No because all the branding uses the color scheme. I order to support themes and you can customize how you like.

can the top banner at least be made the color of the boxes?

[RustoMCSpit]

potential future things: new download logo, resized download button size (might rework it all so that the horizontal and vertical distance to the edge is equal), might round off edges differently, slightly re-adjust placement of tag icon, cut a bit off the top of the button, better / different type of grunge / vintage texture (and better applied) (possibly leather?)

also what about this?

[RustoMCSpit]

i think we need a visual overhaul tag for everything related to visuals

e.g. https://github.com/studiorack/studiorack-site/issues/29

[RustoMCSpit]

theming for colour blindness too