# UI style guidelines

## 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)

## Color palette

* First color is for UI
* Second color is for AI
* Third color is for neutral/story
* Fourth color is for highlight

http://paletton.com/#uid=63s0i0kcJwV44YO8FN3hmo6l-eV


```
*** Primary color:

   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)

*** Secondary color (1):

   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)

*** Secondary color (2):

   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)

*** Complement color:

   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)
```