GuileSwiftUIiOS surfaces154 components

design system

tokens, components, and the implementation details that actually matter. everything here should match figma and what's on device.

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