# 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 neutral interface and ships
* Second color is for AI
* Third color is for story / menu / options
* Fourth color is for enemy

http://paletton.com/#uid=63D0c0kcBwN43YM8AMYhnnWlyeQ


```
*** Primary color:

   shade 0 = #6C87A9 = rgb(108,135,169) = rgba(108,135,169,1) = rgb0(0.424,0.529,0.663)
   shade 1 = #DCE9F9 = rgb(220,233,249) = rgba(220,233,249,1) = rgb0(0.863,0.914,0.976)
   shade 2 = #A3BBD9 = rgb(163,187,217) = rgba(163,187,217,1) = rgb0(0.639,0.733,0.851)
   shade 3 = #3F5A7D = rgb( 63, 90,125) = rgba( 63, 90,125,1) = rgb0(0.247,0.353,0.49)
   shade 4 = #1E334E = rgb( 30, 51, 78) = rgba( 30, 51, 78,1) = rgb0(0.118,0.2,0.306)

*** Secondary color (1):

   shade 0 = #7280AF = rgb(114,128,175) = rgba(114,128,175,1) = rgb0(0.447,0.502,0.686)
   shade 1 = #DDE4F9 = rgb(221,228,249) = rgba(221,228,249,1) = rgb0(0.867,0.894,0.976)
   shade 2 = #A7B3DB = rgb(167,179,219) = rgba(167,179,219,1) = rgb0(0.655,0.702,0.859)
   shade 3 = #435281 = rgb( 67, 82,129) = rgba( 67, 82,129,1) = rgb0(0.263,0.322,0.506)
   shade 4 = #202B50 = rgb( 32, 43, 80) = rgba( 32, 43, 80,1) = rgb0(0.125,0.169,0.314)

*** Secondary color (2):

   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)

*** Complement color:

   shade 0 = #FFD99B = rgb(255,217,155) = rgba(255,217,155,1) = rgb0(1,0.851,0.608)
   shade 1 = #FFF3DF = rgb(255,243,223) = rgba(255,243,223,1) = rgb0(1,0.953,0.875)
   shade 2 = #FFE5BB = rgb(255,229,187) = rgba(255,229,187,1) = rgb0(1,0.898,0.733)
   shade 3 = #BF9757 = rgb(191,151, 87) = rgba(191,151, 87,1) = rgb0(0.749,0.592,0.341)
   shade 4 = #765827 = rgb(118, 88, 39) = rgba(118, 88, 39,1) = rgb0(0.463,0.345,0.153)
```