# Design Questions

## Colors:

| Name | Code | Usage |
| -------- | -------- | -------- |
|colorWhite| #FFFFFF|page backgrounds, white buttons, icons|
|colorWhiteNotSoTransparent| #BFFFFFFF|payment card disabled overlay|
|colorWhiteHalfTransparent| #7FFFFFFF|centered subtitle on approval page|
|colorWhiteSemiTransparent| #33FFFFFF|generated avatar background (approval), approve button backround (approval), disabled state on white buttons, reject button background|
|colorWhiteGrey| #F7FBFE|toll cards, signature background, company approvers background, login inputfields background|
|colorWhiteGreyTransparent| #7FF7FBFE|toll card disabled|
|colorDividerGrey| #D8DFE6|swipe to refresh indicator, bottom sheet drag sign, mileage input chain icon, company page dividers|
|colorItemInactive| #B2B9BF|bottom navigation inactive icons|
|colorPlaceholderGrey| #858F99|form hint color, avatar background, section titles, hints, descriptions|
|colorDarkGrey| #667380|Error dialogs' content, Simulated Android notifications' content|
|colorCloseButtonGrey| #7F000000|Inbox/Location banner close icon|
|colorBlack| #000000|Camera page background, Simulated notification title, Google button|
|colorBlackSemiTransparent| #33000000|Google button ripple|
|colorWhiteGreen| #E6FFF7|ripple on form|
|colorBrandGreen| #00E699|lots of places, icons, buttons, etc.|
|colorBrandGreenNotSoTransparent| #4000E699|accuracy circle background on map|
|colorBrandGreenSemiTransparent| #2200E699|buttons ripple and disabled colors|
|colorTextLinkGreen| #00B377|lots of places, titles, action icons, map route edge, etc.|
|colorTextLinkGreenSemiTransparent| #2200B377|ripple color|
|colorTextGreen| #003322|lots of places for text|
|colorBlue| #006BFF|purple-blue gradient blue side, blue buttons caption, blue icons on approval page|
|colorBlueSemiTransparent| #22006BFF|ripple color|
|colorRed| #E73B5C|delete button on form, photo and signature, coaching pill and rectangle on camera|
|colorRedSemiTransparent| #22E73B5C|delete button ripple|
|colorPinkRed| #FB1C58|Negative buttons, addons, location, input field error stroke, addon error icon, setup inbox gradient side|
|colorPinkRedSemiTransparent| #33FB1C58|button ripple|
|colorOrange| #FD5021|Inbox banner button color|
|colorOrangeSemiTransparent| #22FD5021|inbox banner button ripple color|
|colorPurple| #4D0099|Approve gradient side|
|colorDarkBlue| #002C69|Approval summary page title color|
|colorOrangeLight| #FF7000|Inbox banner gradient side|
|colorBlueGradientStart| #2550FF|location banner gradient side|
|colorBlueGradientEnd| #04AAFF|location banner gradient side|

- Ripple colors are semi-transparent versions of original colors having inconsitent alpha, question: 22 **OR** 33

- *#FFFFFF* and *#F7FBFE* are almost visually indistinguishable especially on lower quality displays or low brightness, this raises question as we usually use those colors on top of each other
We even have half transparent version of F7FBFE which is the disabled version of the toll cards on mileage page which essentially is white.

- We have lots of colors with only 1-2 usages do we need them?
- colorWhiteHalfTransparent
- colorWhiteNotSoTransparent
- colorWhiteGreyTransparent
- colorItemInactive
- colorDarkGrey
- colorCloseButtonGrey
- colorWhiteGreen
- colorBrandGreenNotSoTransparent

- We should use transparent color instead of solid colors for ripples (eg for form)

- We have quite a few brand link green buttons (green background white text or white background and green text) also lately we introduced lots of textlinkgreen buttons. Maybe we should aim for only having 1 of those?

- colorRed and colorPinkRed is pretty similar, shouldn't we use just one of those?

- colorOrange and colorOrangeLight is pretty similar, shouldn't we use just one of those?

- colorBlueGradientStart and colorBlueGradient are pretty similar, shouldn't we use just one of those?

## Fonts:

| Name | Size | Usage |
| -------- | -------- | -------- |
|font_s|13sp|approver item subtitle, , lot of places, subtitles, inline error messages, version number, button captions, form headers|
|font_s_alt|14sp|form action buttons (exceptions)|
|font_m_alt|15sp| settings buttons' captions,logout button, login buttons' captions, lot of things, form hint, form edittext, form datetime status, place selector fields, approval summary content, hints, titles, etc.|
|font_m_alt_alt|16sp| |
|font_m|17sp|hint on register (same size as input on the register),magic link, forgotten, addon description, lot of things, form titles, dialog title, addon error message, location page description, login pages input, error page content, buttons, camera coaching|
|font_ml|24sp|approval details title, error message title|
|font_l|36sp|form big number input|
|font_xl|48sp|centered amount on inbox / group pages|

- Lot of categories appear in multiple font sizes: button captions, hints, descriptions, page contents, titles
- 14, 16 fontsize should/could be removed and changed to either 13, 15 or 17
- We should have several styles with size and weight and use them consistently
- e.g. Header1: 36sp Museo500, Header2: 24sp Museo700, etc.

TL;DR: We should have a limited color and font style palette and should use it **EVERYWHERE** throughout the app maybe with some rare and explained exceptions (eg.: purple in gradient, huge font for amount, etc.)