design tokens
colors
color palette synced from figma variables for ios.
primitive ramps
grey shade
5#7b7b7b
25#717171
200#4a4a4a
250#404040
300#363636
400#232323
425#1f1f1f
475#1d1d1d
500#191919
900#0f0f0f
black shade
25#747474
100#606060
150#575757
250#434343
300#393939
400#262626
425#1c1c1c
475#161616
500#121212
900#080808
black tint
5#fdfdfd
25#f4f4f4
100#e0e0e0
200#cccccc
400#a5a5a5
450#9b9b9b
900#888888
grey tint
25#fbfbfb
50#f1f1f1
100#e7e7e7
150#dddddd
350#b6b6b6
450#a2a2a2
900#8f8f8f
primary
300#659075
400#496a56
500#2e4537
600#25392d
700#1c2b22
950#191f1b
red
500#984144
600#793235
800#461a1b
900#2c0e0f
yellow
500#c4a56a
semantic tokens (dark)
primary Surface (11)
primarySurfaceBG#121212
primarySurfaceHeadline#fdfdfd
primarySurfaceSubtitle1#606060
primarySurfaceSubtitle2#575757
primarySurfaceText1#929292
primarySurfaceText2#747474
primarySurfaceText3#eaeaea
primarySurfaceText4#7e7e7e
primarySurfaceText5#c3c3c3
primarySurfaceProgressBar#e0e0e0
primarySurfaceProgressBar2#2f2f2f
secondary Surface (2)
secondarySurfaceBG#080808
secondarySurfaceBottomSheet#434343
main (1)
mainH1#fdfdfd
primary Text (2)
primaryText#f4f4f4
primaryTextInactive#606060
black Tint (1)
blackTint5#fdfdfd
primary Icon (5)
primaryIconBG#1c1c1c
primaryIconIcon#fbfbfb
primaryIconIconInactive#404040
primaryIconPending#c4a56a
primaryIconWarning#984144
primary Big Element (6)
primaryBigElementBigText#fbfbfb
primaryBigElementBigText2#d3d3d3
primaryBigElementBigText3#659075
primaryBigElementSubtext#676767
primaryBigElementSubtext2#2e4537
primaryBigElementSubtitle#606060
button Primary (9)
buttonPrimaryBG#2e4537
buttonPrimaryBGPressed#25392d
buttonPrimaryBGInactive#1c2b22
buttonPrimaryBG2#659075
buttonPrimary2BG#191f1b
buttonPrimaryTextIcon#fdfdfd
buttonPrimaryTextIcon2#83bb97
buttonPrimaryTextIconInactive#9b9b9b
buttonPrimaryTextIconPressed#fdfdfd
button Secondary (6)
buttonSecondaryBG#e0e0e0
buttonSecondaryBGPressed#cccccc
buttonSecondaryBGInactive#888888
buttonSecondaryTextIcon#121212
buttonSecondaryTextIconInactive#434343
buttonSecondaryTextIconPressed#121212
button Optional (6)
buttonOptionalBG#232323
buttonOptionalBGPressed#1d1d1d
buttonOptionalBGInactive#191919
buttonOptionalTextIcon#fbfbfb
buttonOptionalTextIconInactive#747474
buttonOptionalTextIconPressed#fbfbfb
button Optional2 (6)
buttonOptional2BG#2f2f2f
buttonOptional2BGPressed#1c1c1c
buttonOptional2BGInactive#161616
buttonOptional2TextIcon#fbfbfb
buttonOptional2TextIconInactive#747474
buttonOptional2TextIconPressed#e0e0e0
button Optional3 (2)
buttonOptional3BG#1d1d1d
buttonOptional3TextIcon#cacaca
button Optional4 (5)
buttonOptional4BG#1c1c1c
buttonOptional4Outline#262626
buttonOptional4Text#fbfbfb
buttonOptional4Icon#acacac
buttonOptional4Icon2#d6d6d6
button Optional5 (2)
buttonOptional5BG#121212
buttonOptional5Icon#e0e0e0
button Issue (3)
buttonIssueBG#984144
buttonIssueBGPressed#793235
buttonIssueBGInactive#461a1b
pill Button (9)
pillButtonBG#dddddd
pillButtonBG2#1c1c1c
pillButtonBG3#262626
pillButtonName#d3d3d3
pillButtonName2#717171
pillButtonName3#dddddd
pillButtonNameSelected#191919
pillButtonOutline#2d2d2d
pillButtonOutlineSelected#b6b6b6
button Text Score (6)
buttonTextScoreBG#1f1f1f
buttonTextScoreBG2#191919
buttonTextScoreTitle#717171
buttonTextScoreTitle2#545454
buttonTextScoreNumber#d3d3d3
buttonTextScoreNumber2#c0c0c0
card (17)
cardBG1#1f1f1f
cardBG1Pressed#1a1a1a
cardBG2#0f0f0f
cardBG3#232323
cardAvatarBG#232323
cardAvatarBG2#1c1c1c
cardAvatarName#a2a2a2
cardHeadlineIcon1#fbfbfb
cardHeadlineIcon2#e7e7e7
cardHeadlineIcon3#dddddd
cardIllustration#dddddd
cardText1#676767
cardText2#5e5e5e
cardText3#888888
cardPrimaryTextIcon#496a56
cardPending#acacac
cardFailed#c5565a
primary Card (6)
primaryCardBG#191919
primaryCardOutline#2f2f2f
primaryCardAcceptBG#1c2b22
primaryCardAcceptIcon#ccf4db
primaryCardDeclineBG#612628
primaryCardDeclineIcon#f6ebeb
input (4)
inputBG#191919
inputOutline#717171
inputText#f1f1f1
inputTitle#7b7b7b
list Item (15)
listItemBG#0f0f0f
listItemTitle#fbfbfb
listItemTitleInactive#4a4a4a
listItemText#888888
listItemText2#9b9b9b
listItemText3#888888
listItemTextInactive#393939
listItemTextIcon#ffffff
listItemTextIconInactive#747474
listItemButtonIcon#fbfbfb
listItemButtonIconInactive#404040
listItemIconAvatarBG#1c1c1c
listItemIconAvatarBGInactive#161616
listItemIconAvatarIcon#a5a5a5
listItemIconAvatarIconInactive#393939
menu Item (2)
menuItemTitleIcon#888888
menuItemTitleIconSelected#f4f4f4
checkbox (4)
checkboxBG#191919
checkboxBGSelected#fbfbfb
checkboxIcon#191919
checkboxOutline#2d2d2d
toggle (3)
toggleBG#2d2d2d
toggleBGSelected#659075
toggleCircle#fbfbfb
tab (5)
tabBG#080808
tabSurfaceBG#191919
tabMainText#acacac
tabMainTextSelected#e7e7e7
tabOptText#7b7b7b
toast Message (2)
toastMessageBG#eaeaea
toastMessageText#262626
status (7)
statusBG#1c1c1c
statusLine#262626
statusText#a5a5a5
statusText2#d6d6d6
statusError#984144
statusSuccess#2e4537
statusSuccess2#25392d
success Surface (2)
successSurfaceBG#121c16
successSurfaceIcon#659075
destructive (1)
destructive#ff5c5c
overlay (2)
overlayBlackShade200rgba(77, 77, 77, 0.3)
overlayBlackShade900rgba(8, 8, 8, 0.5)
calendar (11)
calendarBG#f4f4f4
calendarButtonBG#191919
calendarButtonTitle#e7e7e7
calendarButtonText#e7e7e7
calendarText#a5a5a5
calendarText2#161616
calendarTextInactive#393939
dailyCalendarCardBG#121212
dailyCalendarCardHeadline#eaeaea
dailyCalendarCardTime#6a6a6a
dailyCalendarCardStateSuccessful#496a56
primary Calendar (4)
primaryCalendarOutline2#262626
primaryCalendarTitle#f4f4f4
primaryCalendarTitle2#a5a5a5
primaryCalendarTitle3#606060
picker (4)
pickerBG#161616
pickerTextList#545454
pickerTextListSelected#fbfbfb
pickerTimeFormat#6a6a6a
multi Selector (6)
multiSelectorBG#121212
multiSelectorBGSelected#e0e0e0
multiSelectorText#676767
multiSelectorTextSelected#8f8f8f
multiSelectorTitle#f1f1f1
multiSelectorTitleSelected#191919
value Slider (5)
valueSliderBG#191919
valueSliderCircle#0f0f0f
valueSliderFilled#f1f1f1
valueSliderH1#fbfbfb
valueSliderValue#acacac
link (1)
linkText#d6d6d6
more (2)
moreIcon#8f8f8f
moreListItem#fbfbfb
