2018-03-15 23:42:49 +00:00
|
|
|
# UI style guidelines
|
|
|
|
|
2018-03-20 22:06:39 +00:00
|
|
|
## Shapes
|
|
|
|
|
|
|
|
Main UI shapes are:
|
|
|
|
|
|
|
|
* long hexagon
|
|
|
|
* rectangles, optionally with left and/or right side tilted (if both are tilted, it should be symmetrical)
|
|
|
|
|
|
|
|
Buttons should be lit by a pure white line in top-left corner (~75% of the border length)
|
|
|
|
|
2018-03-15 23:42:49 +00:00
|
|
|
## Color palette
|
|
|
|
|
2018-04-16 18:12:26 +00:00
|
|
|
* First color is for UI
|
2018-03-21 17:48:30 +00:00
|
|
|
* Second color is for AI
|
2018-04-16 18:12:26 +00:00
|
|
|
* Third color is for neutral/story
|
|
|
|
* Fourth color is for highlight
|
2018-03-21 17:48:30 +00:00
|
|
|
|
2018-04-16 18:12:26 +00:00
|
|
|
http://paletton.com/#uid=63s0i0kcJwV44YO8FN3hmo6l-eV
|
2018-03-15 23:42:49 +00:00
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
*** Primary color:
|
|
|
|
|
2018-04-16 18:12:26 +00:00
|
|
|
shade 0 = #6690A4 = rgb(102,144,164) = rgba(102,144,164,1) = rgb0(0.4,0.565,0.643)
|
|
|
|
shade 1 = #DBEFF9 = rgb(219,239,249) = rgba(219,239,249,1) = rgb0(0.859,0.937,0.976)
|
|
|
|
shade 2 = #9FC4D6 = rgb(159,196,214) = rgba(159,196,214,1) = rgb0(0.624,0.769,0.839)
|
|
|
|
shade 3 = #3A6479 = rgb( 58,100,121) = rgba( 58,100,121,1) = rgb0(0.227,0.392,0.475)
|
|
|
|
shade 4 = #1B3B4B = rgb( 27, 59, 75) = rgba( 27, 59, 75,1) = rgb0(0.106,0.231,0.294)
|
2018-03-15 23:42:49 +00:00
|
|
|
|
|
|
|
*** Secondary color (1):
|
|
|
|
|
2018-04-16 18:12:26 +00:00
|
|
|
shade 0 = #6F83AC = rgb(111,131,172) = rgba(111,131,172,1) = rgb0(0.435,0.514,0.675)
|
|
|
|
shade 1 = #DDE6F9 = rgb(221,230,249) = rgba(221,230,249,1) = rgb0(0.867,0.902,0.976)
|
|
|
|
shade 2 = #A5B7DA = rgb(165,183,218) = rgba(165,183,218,1) = rgb0(0.647,0.718,0.855)
|
|
|
|
shade 3 = #425780 = rgb( 66, 87,128) = rgba( 66, 87,128,1) = rgb0(0.259,0.341,0.502)
|
|
|
|
shade 4 = #1F2F4F = rgb( 31, 47, 79) = rgba( 31, 47, 79,1) = rgb0(0.122,0.184,0.31)
|
2018-03-15 23:42:49 +00:00
|
|
|
|
|
|
|
*** Secondary color (2):
|
|
|
|
|
2018-04-16 18:12:26 +00:00
|
|
|
shade 0 = #65A898 = rgb(101,168,152) = rgba(101,168,152,1) = rgb0(0.396,0.659,0.596)
|
|
|
|
shade 1 = #D9F9F1 = rgb(217,249,241) = rgba(217,249,241,1) = rgb0(0.851,0.976,0.945)
|
|
|
|
shade 2 = #9ED8C9 = rgb(158,216,201) = rgba(158,216,201,1) = rgb0(0.62,0.847,0.788)
|
|
|
|
shade 3 = #397D6C = rgb( 57,125,108) = rgba( 57,125,108,1) = rgb0(0.224,0.49,0.424)
|
|
|
|
shade 4 = #194D40 = rgb( 25, 77, 64) = rgba( 25, 77, 64,1) = rgb0(0.098,0.302,0.251)
|
2018-03-15 23:42:49 +00:00
|
|
|
|
|
|
|
*** Complement color:
|
|
|
|
|
2018-04-16 18:12:26 +00:00
|
|
|
shade 0 = #FFD09A = rgb(255,208,154) = rgba(255,208,154,1) = rgb0(1,0.816,0.604)
|
|
|
|
shade 1 = #FFF0DF = rgb(255,240,223) = rgba(255,240,223,1) = rgb0(1,0.941,0.875)
|
|
|
|
shade 2 = #FFDFBA = rgb(255,223,186) = rgba(255,223,186,1) = rgb0(1,0.875,0.729)
|
|
|
|
shade 3 = #C09058 = rgb(192,144, 88) = rgba(192,144, 88,1) = rgb0(0.753,0.565,0.345)
|
|
|
|
shade 4 = #775227 = rgb(119, 82, 39) = rgba(119, 82, 39,1) = rgb0(0.467,0.322,0.153)
|
2018-03-15 23:42:49 +00:00
|
|
|
```
|