[New UI] Design Guidelines #156
Description
Alright, about these 'backgrounds':
These are the most used resource in the new UI I'm designing, so ima break it down how it works so y'all can add it:
Color: #000000 (Alpha 48%)
Noise:
Noise size: 1.8
Density: 100%
Color: #000000 (Alpha 6%)
Background Blur:
Type: Uniform
Blur: 11.2
These divisions are essentially the same as above without the BG Blur and Noise + a 29% alpha 2px weight stroke.
The padding I use all around menus is 30px, in panels 15px, and as separation between sidebars and main content, 50px
Top/bottom panels and the main content should always have a 10px padding, same as in open chat in-game or essentially any GUI stuff that are close to each other:
The corner radius I use around all the UI is 9px
Texts uses a stroke weight of 1px, icons use 2px
(The strokes are always #000000 with 29% alpha)
Titles use a linear gradient of #FFFFFF - #FFFF8C (Including the icons)
(Tho we could just make them white if you want, I don't really know how possible/easy is that to code D:)
Font sizes:
Titles: 22px
Main: 16px
Subtitles: 11px
Hmmmm, what am I missing now?
Oh yeah, the buttons
There's two types of buttons: text+icons ones and icon-only ones.
Fill: #000000 (16% Alpha)
Stroke: #000000 (29% Alpha) (I guess you can notice I'm not quite good at color palettes am I?)
The padding and shape is different depending on the kind of button:
- Text+icon ones:
20px horizontally, 10px vertically, 10px between the text and icon, shape: capsule - Icon ones:
10px all around the icon, shape: circle
About hyperlinks:
They're just #000000 (16% alpha) with a corner radius of 9px
About Icon sizes:
Titles / Side Bars Buttons: 28px
Normal buttons / Main size: 12px
Color Palette(?):
Text:
Main (White): #FFFFFF
Titles / Message Author / Server Message: #FFFF8C
Subtitles: #52ABFF
Hints: #FFFFFF (29% alpha)
Icons:
Red: #F05B5B
Orange: #FFA500
Green: #6DF05B
Yellow: #FFD13B (Not quite sure if I should use the same yellow as in texts for consistence... it just doesn't fit)
Misc:
Mention in chat (background): #F05B5B (18% Alpha)
--- Fonts ---
Main font: DejaVu Sans - Book
Title font: DejaVu Condensed - Bold
System Messages font: DejaVu Sans Mono
Idrk if I missed something else, but if that's the case please tell me (Preferably on Discord for a faster response)