foundations
Design Tokens (ios)
Design Tokens are the platform-specific translations of the JSON values that are the result of the agreed-upon base values
Color
| Component | Example |
|---|---|
colorBlackBase | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorBlue10 | UIColor(red: 0.878, green: 0.953, blue: 1.000, alpha: 1) |
colorBlue100 | UIColor(red: 0.000, green: 0.157, blue: 0.239, alpha: 1) |
colorBlue20 | UIColor(red: 0.678, green: 0.886, blue: 0.996, alpha: 1) |
colorBlue30 | UIColor(red: 0.408, green: 0.765, blue: 0.961, alpha: 1) |
colorBlue40 | UIColor(red: 0.176, green: 0.635, blue: 0.890, alpha: 1) |
colorBlue50 | UIColor(red: 0.008, green: 0.502, blue: 0.776, alpha: 1) |
colorBlue60 | UIColor(red: 0.000, green: 0.392, blue: 0.612, alpha: 1) |
colorBlue70 | UIColor(red: 0.000, green: 0.298, blue: 0.459, alpha: 1) |
colorBlue80 | UIColor(red: 0.000, green: 0.224, blue: 0.345, alpha: 1) |
colorBlue90 | UIColor(red: 0.000, green: 0.176, blue: 0.275, alpha: 1) |
colorBlueBase | UIColor(red: 0.008, green: 0.502, blue: 0.776, alpha: 1) |
colorBlueDark | UIColor(red: 0.000, green: 0.392, blue: 0.612, alpha: 1) |
colorBlueLight | UIColor(red: 0.176, green: 0.635, blue: 0.890, alpha: 1) |
colorGreen10 | UIColor(red: 0.878, green: 1.000, blue: 0.878, alpha: 1) |
colorGreen100 | UIColor(red: 0.000, green: 0.212, blue: 0.004, alpha: 1) |
colorGreen20 | UIColor(red: 0.698, green: 0.976, blue: 0.706, alpha: 1) |
colorGreen30 | UIColor(red: 0.455, green: 0.922, blue: 0.463, alpha: 1) |
colorGreen40 | UIColor(red: 0.251, green: 0.827, blue: 0.259, alpha: 1) |
colorGreen50 | UIColor(red: 0.102, green: 0.694, blue: 0.114, alpha: 1) |
colorGreen60 | UIColor(red: 0.016, green: 0.537, blue: 0.027, alpha: 1) |
colorGreen70 | UIColor(red: 0.000, green: 0.392, blue: 0.008, alpha: 1) |
colorGreen80 | UIColor(red: 0.000, green: 0.353, blue: 0.008, alpha: 1) |
colorGreen90 | UIColor(red: 0.000, green: 0.231, blue: 0.004, alpha: 1) |
colorGreenBase | UIColor(red: 0.102, green: 0.694, blue: 0.114, alpha: 1) |
colorGreenDark | UIColor(red: 0.016, green: 0.537, blue: 0.027, alpha: 1) |
colorGreenLight | UIColor(red: 0.251, green: 0.827, blue: 0.259, alpha: 1) |
colorGrey10 | UIColor(red: 0.949, green: 0.949, blue: 0.949, alpha: 1) |
colorGrey100 | UIColor(red: 0.102, green: 0.102, blue: 0.102, alpha: 1) |
colorGrey20 | UIColor(red: 0.902, green: 0.902, blue: 0.902, alpha: 1) |
colorGrey30 | UIColor(red: 0.800, green: 0.800, blue: 0.800, alpha: 1) |
colorGrey40 | UIColor(red: 0.702, green: 0.702, blue: 0.702, alpha: 1) |
colorGrey50 | UIColor(red: 0.600, green: 0.600, blue: 0.600, alpha: 1) |
colorGrey60 | UIColor(red: 0.502, green: 0.502, blue: 0.502, alpha: 1) |
colorGrey70 | UIColor(red: 0.400, green: 0.400, blue: 0.400, alpha: 1) |
colorGrey80 | UIColor(red: 0.302, green: 0.302, blue: 0.302, alpha: 1) |
colorGrey90 | UIColor(red: 0.200, green: 0.200, blue: 0.200, alpha: 1) |
colorGreyBase | UIColor(red: 0.600, green: 0.600, blue: 0.600, alpha: 1) |
colorGreyDark | UIColor(red: 0.502, green: 0.502, blue: 0.502, alpha: 1) |
colorGreyLight | UIColor(red: 0.702, green: 0.702, blue: 0.702, alpha: 1) |
colorMarketing10 | UIColor(red: 1.000, green: 0.984, blue: 0.902, alpha: 1) |
colorMarketing100 | UIColor(red: 0.020, green: 0.016, blue: 0.000, alpha: 1) |
colorMarketing20 | UIColor(red: 0.976, green: 0.933, blue: 0.698, alpha: 1) |
colorMarketing30 | UIColor(red: 0.941, green: 0.875, blue: 0.502, alpha: 1) |
colorMarketing40 | UIColor(red: 0.882, green: 0.800, blue: 0.333, alpha: 1) |
colorMarketing50 | UIColor(red: 0.800, green: 0.710, blue: 0.204, alpha: 1) |
colorMarketing60 | UIColor(red: 0.690, green: 0.604, blue: 0.114, alpha: 1) |
colorMarketing70 | UIColor(red: 0.541, green: 0.467, blue: 0.051, alpha: 1) |
colorMarketing80 | UIColor(red: 0.369, green: 0.318, blue: 0.016, alpha: 1) |
colorMarketing90 | UIColor(red: 0.188, green: 0.161, blue: 0.004, alpha: 1) |
colorMarketingBase | UIColor(red: 0.800, green: 0.710, blue: 0.204, alpha: 1) |
colorMarketingDark | UIColor(red: 0.690, green: 0.604, blue: 0.114, alpha: 1) |
colorMarketingLight | UIColor(red: 0.882, green: 0.800, blue: 0.333, alpha: 1) |
colorOrange10 | UIColor(red: 1.000, green: 0.957, blue: 0.902, alpha: 1) |
colorOrange100 | UIColor(red: 0.302, green: 0.169, blue: 0.000, alpha: 1) |
colorOrange20 | UIColor(red: 1.000, green: 0.914, blue: 0.780, alpha: 1) |
colorOrange30 | UIColor(red: 1.000, green: 0.871, blue: 0.659, alpha: 1) |
colorOrange40 | UIColor(red: 1.000, green: 0.753, blue: 0.400, alpha: 1) |
colorOrange50 | UIColor(red: 1.000, green: 0.627, blue: 0.141, alpha: 1) |
colorOrange60 | UIColor(red: 0.914, green: 0.518, blue: 0.000, alpha: 1) |
colorOrange70 | UIColor(red: 0.800, green: 0.451, blue: 0.000, alpha: 1) |
colorOrange80 | UIColor(red: 0.655, green: 0.369, blue: 0.000, alpha: 1) |
colorOrange90 | UIColor(red: 0.482, green: 0.275, blue: 0.000, alpha: 1) |
colorOrangeBase | UIColor(red: 1.000, green: 0.627, blue: 0.141, alpha: 1) |
colorOrangeDark | UIColor(red: 0.914, green: 0.518, blue: 0.000, alpha: 1) |
colorOrangeLight | UIColor(red: 1.000, green: 0.753, blue: 0.400, alpha: 1) |
colorPrimary10 | UIColor(red: 1.000, green: 0.902, blue: 0.902, alpha: 1) |
colorPrimary100 | UIColor(red: 0.302, green: 0.000, blue: 0.000, alpha: 1) |
colorPrimary20 | UIColor(red: 0.973, green: 0.784, blue: 0.784, alpha: 1) |
colorPrimary30 | UIColor(red: 0.941, green: 0.675, blue: 0.675, alpha: 1) |
colorPrimary40 | UIColor(red: 0.890, green: 0.451, blue: 0.451, alpha: 1) |
colorPrimary50 | UIColor(red: 0.824, green: 0.243, blue: 0.243, alpha: 1) |
colorPrimary60 | UIColor(red: 0.773, green: 0.067, blue: 0.067, alpha: 1) |
colorPrimary70 | UIColor(red: 0.694, green: 0.043, blue: 0.043, alpha: 1) |
colorPrimary80 | UIColor(red: 0.584, green: 0.024, blue: 0.024, alpha: 1) |
colorPrimary90 | UIColor(red: 0.447, green: 0.008, blue: 0.008, alpha: 1) |
colorPrimaryBase | UIColor(red: 0.824, green: 0.243, blue: 0.243, alpha: 1) |
colorPrimaryDark | UIColor(red: 0.773, green: 0.067, blue: 0.067, alpha: 1) |
colorPrimaryLight | UIColor(red: 0.890, green: 0.451, blue: 0.451, alpha: 1) |
colorRed10 | UIColor(red: 1.000, green: 0.922, blue: 0.922, alpha: 1) |
colorRed100 | UIColor(red: 0.529, green: 0.000, blue: 0.008, alpha: 1) |
colorRed20 | UIColor(red: 0.992, green: 0.710, blue: 0.714, alpha: 1) |
colorRed30 | UIColor(red: 0.976, green: 0.478, blue: 0.490, alpha: 1) |
colorRed40 | UIColor(red: 0.949, green: 0.286, blue: 0.298, alpha: 1) |
colorRed50 | UIColor(red: 0.914, green: 0.137, blue: 0.149, alpha: 1) |
colorRed60 | UIColor(red: 0.867, green: 0.027, blue: 0.043, alpha: 1) |
colorRed70 | UIColor(red: 0.804, green: 0.000, blue: 0.012, alpha: 1) |
colorRed80 | UIColor(red: 0.722, green: 0.000, blue: 0.012, alpha: 1) |
colorRed90 | UIColor(red: 0.627, green: 0.000, blue: 0.012, alpha: 1) |
colorRedBase | UIColor(red: 0.914, green: 0.137, blue: 0.149, alpha: 1) |
colorRedDark | UIColor(red: 0.804, green: 0.000, blue: 0.012, alpha: 1) |
colorRedLight | UIColor(red: 0.976, green: 0.478, blue: 0.490, alpha: 1) |
colorSecondary10 | UIColor(red: 0.902, green: 0.953, blue: 1.000, alpha: 1) |
colorSecondary100 | UIColor(red: 0.000, green: 0.129, blue: 0.251, alpha: 1) |
colorSecondary20 | UIColor(red: 0.702, green: 0.847, blue: 0.984, alpha: 1) |
colorSecondary30 | UIColor(red: 0.510, green: 0.737, blue: 0.953, alpha: 1) |
colorSecondary40 | UIColor(red: 0.345, green: 0.635, blue: 0.910, alpha: 1) |
colorSecondary50 | UIColor(red: 0.216, green: 0.541, blue: 0.847, alpha: 1) |
colorSecondary60 | UIColor(red: 0.125, green: 0.455, blue: 0.761, alpha: 1) |
colorSecondary70 | UIColor(red: 0.063, green: 0.365, blue: 0.651, alpha: 1) |
colorSecondary80 | UIColor(red: 0.024, green: 0.278, blue: 0.518, alpha: 1) |
colorSecondary90 | UIColor(red: 0.008, green: 0.200, blue: 0.380, alpha: 1) |
colorSecondaryBase | UIColor(red: 0.125, green: 0.455, blue: 0.761, alpha: 1) |
colorSecondaryDark | UIColor(red: 0.063, green: 0.365, blue: 0.651, alpha: 1) |
colorSecondaryLight | UIColor(red: 0.216, green: 0.541, blue: 0.847, alpha: 1) |
colorTertiary10 | UIColor(red: 0.902, green: 1.000, blue: 0.961, alpha: 1) |
colorTertiary100 | UIColor(red: 0.000, green: 0.251, blue: 0.153, alpha: 1) |
colorTertiary20 | UIColor(red: 0.702, green: 0.984, blue: 0.875, alpha: 1) |
colorTertiary30 | UIColor(red: 0.510, green: 0.953, blue: 0.784, alpha: 1) |
colorTertiary40 | UIColor(red: 0.345, green: 0.910, blue: 0.694, alpha: 1) |
colorTertiary50 | UIColor(red: 0.216, green: 0.847, blue: 0.608, alpha: 1) |
colorTertiary60 | UIColor(red: 0.125, green: 0.761, blue: 0.518, alpha: 1) |
colorTertiary70 | UIColor(red: 0.063, green: 0.651, blue: 0.424, alpha: 1) |
colorTertiary80 | UIColor(red: 0.024, green: 0.518, blue: 0.329, alpha: 1) |
colorTertiary90 | UIColor(red: 0.008, green: 0.380, blue: 0.235, alpha: 1) |
colorTertiaryBase | UIColor(red: 0.216, green: 0.847, blue: 0.608, alpha: 1) |
colorTertiaryDark | UIColor(red: 0.125, green: 0.761, blue: 0.518, alpha: 1) |
colorTertiaryLight | UIColor(red: 0.345, green: 0.910, blue: 0.694, alpha: 1) |
colorText10 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorText100 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorText20 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorText30 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorText40 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorText50 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorText60 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorText70 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorText80 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorText90 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextBlackBase | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextBlue10 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextBlue100 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextBlue20 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextBlue30 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextBlue40 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextBlue50 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextBlue60 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextBlue70 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextBlue80 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextBlue90 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextBlueBase | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextBlueDark | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextBlueLight | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGreen10 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGreen100 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextGreen20 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGreen30 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGreen40 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGreen50 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGreen60 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextGreen70 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextGreen80 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextGreen90 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextGreenBase | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGreenDark | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextGreenLight | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGrey10 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGrey100 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextGrey20 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGrey30 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGrey40 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGrey50 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGrey60 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGrey70 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextGrey80 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextGrey90 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextGreyBase | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGreyDark | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextGreyLight | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextMarketing10 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextMarketing100 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextMarketing20 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextMarketing30 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextMarketing40 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextMarketing50 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextMarketing60 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextMarketing70 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextMarketing80 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextMarketing90 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextMarketingBase | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextMarketingDark | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextMarketingLight | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextOrange10 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextOrange100 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextOrange20 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextOrange30 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextOrange40 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextOrange50 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextOrange60 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextOrange70 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextOrange80 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextOrange90 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextOrangeBase | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextOrangeDark | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextOrangeLight | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextPrimary10 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextPrimary100 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextPrimary20 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextPrimary30 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextPrimary40 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextPrimary50 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextPrimary60 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextPrimary70 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextPrimary80 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextPrimary90 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextPrimaryBase | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextPrimaryDark | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextPrimaryLight | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextRed10 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextRed100 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextRed20 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextRed30 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextRed40 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextRed50 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextRed60 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextRed70 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextRed80 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextRed90 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextRedBase | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextRedDark | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextRedLight | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextSecondary10 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextSecondary100 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextSecondary20 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextSecondary30 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextSecondary40 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextSecondary50 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextSecondary60 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextSecondary70 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextSecondary80 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextSecondary90 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextSecondaryBase | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextSecondaryDark | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextSecondaryLight | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextTertiary10 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextTertiary100 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextTertiary20 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextTertiary30 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextTertiary40 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextTertiary50 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextTertiary60 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextTertiary70 | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextTertiary80 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextTertiary90 | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
colorTextTertiaryBase | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextTertiaryDark | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextTertiaryLight | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorTextWhiteBase | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1) |
colorWhiteBase | UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) |
Space
| Component | Example |
|---|---|
space1 | 2 |
space2 | 4 |
space3 | 8 |
space4 | 12 |
space5 | 16 |
space6 | 24 |
space7 | 32 |
space8 | 40 |
space9 | 48 |
space10 | 64 |
space11 | 96 |
Z-index
| Component | Example |
|---|---|
zIndex100 | tooltip |
zIndex200 | menu |
zIndex300 | popover |
zIndex400 | sticky content |
zIndex500 | sheet |
zIndex600 | modal backdrop |
zIndex700 | modal sheet |
zIndex800 | modal (dialog, alert, page, full screen) |
zIndex900 | toast |
Shadows
| Component | Example |
|---|---|
shadow0 | none |
shadow1 | 0 2px 4px 0 rgba(0,0,0,0.12) |
shadow2 | 0 2px 7px 0 rgba(0,0,0,0.28) |
shadow3 | 0 7px 14px 0 rgba(0,0,0,0.28) |
shadow4 | 0 14px 28px 0 rgba(0,0,0,0.28) |
shadowInset1 | inset 0 1px 10px 0 rgba(0,0,0,0.24) |
shadowInset2 | inset 0 1px 15px 0 rgba(0,0,0,0.28) |
Grid
| Component | Example |
|---|---|
gridBreakpointLarge | 1024 |
gridBreakpointLargeMax | 1319 |
gridBreakpointMedium | 768 |
gridBreakpointMediumMax | 1023 |
gridBreakpointSmall | 375 |
gridBreakpointSmallMax | 767 |
gridBreakpointXLarge | 1320 |
gridBreakpointXSmall | - |
gridBreakpointXSmallMax | 374 |
gridGutter | 16 |
gridWrapFluid | 32 |
gridWrapStatic | 1200 |
Typography
Font-family
| Component | Example |
|---|---|
fontFamilyBrandPrimary | Aa "Regular" |
fontFamilyBrandSecondary | Aa "Regular" |
fontFamilySystem | Aa "Regular" |
Font-weight
| Component | Example |
|---|---|
fontWeightBold | Aa "Bold" |
fontWeightMedium | Aa "Medium" |
fontWeightRegular | Aa "Regular" |
Line-height
| Component | Example |
|---|---|
lineHeight3XLarge use font.heading, font.paragraph, font.caption instead | Aa 44 |
lineHeight4XLarge use font.heading, font.paragraph, font.caption instead | Aa 48 |
lineHeightLarge use font.heading, font.paragraph, font.caption instead | Aa 28 |
lineHeightMedium use font.heading, font.paragraph, font.caption instead | Aa 24 |
lineHeightSmall use font.heading, font.paragraph, font.caption instead | Aa 20 |
lineHeightXLarge use font.heading, font.paragraph, font.caption instead | Aa 32 |
lineHeightXSmall use font.heading, font.paragraph, font.caption instead | Aa 16 |
lineHeightXxLarge use font.heading, font.paragraph, font.caption instead | Aa 40 |
Font-size (type scale)
| Component | Example |
|---|---|
fontSize3XLarge use font.heading, font.paragraph, font.caption instead | Aa 24 |
fontSize4XLarge use font.heading, font.paragraph, font.caption instead | Aa 28 |
fontSize5XLarge use font.heading, font.paragraph, font.caption instead | Aa 32 |
fontSize6XLarge use font.heading, font.paragraph, font.caption instead | Aa 40 |
fontSizeLarge use font.heading, font.paragraph, font.caption instead | Aa 18 |
fontSizeMedium use font.heading, font.paragraph, font.caption instead | Aa 16 |
fontSizeSmall use font.heading, font.paragraph, font.caption instead | Aa 14 |
fontSizeXLarge use font.heading, font.paragraph, font.caption instead | Aa 20 |
fontSizeXSmall use font.heading, font.paragraph, font.caption instead | Aa 12 |
fontSizeXxLarge use font.heading, font.paragraph, font.caption instead | Aa 22 |
Font System
| Component | Example |
|---|---|
fontCaption1LineHeight | 16 |
fontCaption1Size | 14 |
fontCaption2LineHeight | 16 |
fontCaption2Size | 12 |
fontHeading1LargeLineHeight | 52 |
fontHeading1LargeSize | 40 |
fontHeading1LineHeight | 44 |
fontHeading1Size | 32 |
fontHeading1Weight | "Bold" |
fontHeading2LargeLineHeight | 40 |
fontHeading2LargeSize | 32 |
fontHeading2LineHeight | 36 |
fontHeading2Size | 28 |
fontHeading2Weight | "Bold" |
fontHeading3LargeLineHeight | 36 |
fontHeading3LargeSize | 28 |
fontHeading3LineHeight | 32 |
fontHeading3Size | 24 |
fontHeading3Weight | "Bold" |
fontHeading4LargeLineHeight | 28 |
fontHeading4LargeSize | 22 |
fontHeading4LineHeight | 28 |
fontHeading4Size | 22 |
fontHeading4Weight | "Bold" |
fontHeading5LargeLineHeight | 24 |
fontHeading5LargeSize | 18 |
fontHeading5LineHeight | 24 |
fontHeading5Size | 18 |
fontHeading5Weight | "Bold" |
fontHeading6LargeLineHeight | 20 |
fontHeading6LargeSize | 16 |
fontHeading6LineHeight | 20 |
fontHeading6Size | 16 |
fontHeading6Weight | "Bold" |
fontParagraphLargeLineHeight | 28 |
fontParagraphLargeSize | 18 |
fontParagraphLineHeight | 24 |
fontParagraphSize | 16 |
Border Radius
| Component | Example |
|---|---|
borderRadius0 | 0 |
borderRadius1 | 2 |
borderRadius10 | 64 |
borderRadius11 | 96 |
borderRadius2 | 4 |
borderRadius3 | 8 |
borderRadius4 | 12 |
borderRadius5 | 16 |
borderRadius6 | 24 |
borderRadius7 | 32 |
borderRadius8 | 40 |
borderRadius9 | 48 |
borderRadiusFill | 50% |
borderRadiusSides | 9999 |
Overlays
| Component | Example |
|---|---|
overlayFill | UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.33) |
overlayGradientLinearFadeToBottom | linear-gradient(-180deg, rgba(0, 0, 0, 0.33) 0%, rgba(255, 255, 255, 0) 100%) |
overlayGradientLinearFadeToTop | linear-gradient(-180deg, rgba(213, 219, 224, 0) 0%, rgba(0, 0, 0, 0.33) 100%) |
Motion
| Component | Example |
|---|---|
motionDurationFast | Hover me! 200ms |
motionDurationLoop | Hover me! 1200ms |
motionDurationMedium | Hover me! 300ms |
motionDurationSlow | Hover me! 500ms |
Icon
| Component | Example |
|---|---|
iconLarge | 28 |
iconMedium | 24 |
iconSmall | 16 |
iconXLarge | 32 |