@baysidepoc/tokens
Version:
Design Tokens
1,112 lines • 23.3 kB
JSON
{
"tokenSetOrder": {
"0": {
"value": "zoox_brand",
"type": "other"
},
"1": {
"value": "ops_base",
"type": "other"
},
"2": {
"value": "ops_clearTheme",
"type": "other"
},
"3": {
"value": "ops_midnightTheme",
"type": "other"
},
"4": {
"value": "ops_darkTheme",
"type": "other"
}
},
"theme": {
"primary": {
"value": "#262628",
"type": "color"
},
"secondary": {
"value": "#121212",
"type": "color"
},
"background": {
"value": "#0B0B0B",
"type": "color"
},
"line": {
"value": "#575757",
"type": "color"
},
"text": {
"value": "#ffffff",
"type": "color"
}
},
"ops": {
"status1": {
"value": "#33ffc7",
"type": "color"
},
"status2": {
"value": "#f68e2e",
"type": "color"
},
"status3": {
"value": "#d9331f",
"type": "color"
},
"status4": {
"value": "#ed91db",
"type": "color"
},
"base1": {
"value": "#ffffff",
"type": "color"
},
"base2": {
"value": "#000000",
"type": "color"
},
"base3": {
"value": "#f5f5f5",
"type": "color"
},
"base4": {
"value": "#595959",
"type": "color"
},
"action1": {
"default": {
"value": "#2969ff",
"type": "color"
},
"dark": {
"value": "#002dd9",
"type": "color"
},
"light": {
"value": "#97a8fe",
"type": "color"
},
"bg": {
"value": "#e7eaff",
"type": "color"
}
},
"action2": {
"default": {
"value": "#3f66ad",
"type": "color"
},
"dark": {
"value": "#33488d",
"type": "color"
},
"light": {
"value": "#9cc9f0",
"type": "color"
},
"bg": {
"value": "#e5f2fb",
"type": "color"
}
},
"action3": {
"default": {
"value": "#c4cce2",
"type": "color"
},
"dark": {
"value": "#4f71bc",
"type": "color"
},
"light": {
"value": "#c4cce2",
"type": "color"
},
"bg": {
"value": "#e8ebf3",
"type": "color"
}
},
"action4": {
"default": {
"value": "#8d58fe",
"type": "color"
},
"dark": {
"value": "#5427ec",
"type": "color"
},
"light": {
"value": "#bfa2fe",
"type": "color"
},
"bg": {
"value": "#f1e8ff",
"type": "color"
}
},
"rawColors": {
"indigo": {
"50": {
"value": "#e7eaff",
"type": "color"
},
"100": {
"value": "#c3cafe",
"type": "color"
},
"200": {
"value": "#97a8fe",
"type": "color"
},
"300": {
"value": "#6386ff",
"type": "color"
},
"400": {
"value": "#2969ff",
"type": "color"
},
"500": {
"value": "#004dfc",
"type": "color"
},
"600": {
"value": "#0044f0",
"type": "color"
},
"700": {
"value": "#0039e4",
"type": "color"
},
"800": {
"value": "#002dd9",
"type": "color"
},
"900": {
"value": "#0015c1",
"type": "color"
}
},
"blue": {
"50": {
"value": "#e5f2fb",
"type": "color"
},
"100": {
"value": "#c1def6",
"type": "color"
},
"200": {
"value": "#9cc9f0",
"type": "color"
},
"300": {
"value": "#7ab4e9",
"type": "color"
},
"400": {
"value": "#64a4e5",
"type": "color"
},
"500": {
"value": "#5596e0",
"type": "color"
},
"600": {
"value": "#4e88d2",
"type": "color"
},
"700": {
"value": "#4676bf",
"type": "color"
},
"800": {
"value": "#3f66ad",
"type": "color"
},
"900": {
"value": "#33488d",
"type": "color"
}
},
"silver": {
"50": {
"value": "#e8ebf3",
"type": "color"
},
"100": {
"value": "#c4cce2",
"type": "color"
},
"200": {
"value": "#9cabd2",
"type": "color"
},
"300": {
"value": "#728bc5",
"type": "color"
},
"400": {
"value": "#4f71bc",
"type": "color"
},
"500": {
"value": "#2459b3",
"type": "color"
},
"600": {
"value": "#1c51a9",
"type": "color"
},
"700": {
"value": "#0d479d",
"type": "color"
},
"800": {
"value": "#003d91",
"type": "color"
},
"900": {
"value": "#002c7d",
"type": "color"
}
},
"purple": {
"50": {
"value": "#f1e8ff",
"type": "color"
},
"100": {
"value": "#d9c7fe",
"type": "color"
},
"200": {
"value": "#bfa2fe",
"type": "color"
},
"300": {
"value": "#a479ff",
"type": "color"
},
"400": {
"value": "#8d58fe",
"type": "color"
},
"500": {
"value": "#7335fc",
"type": "color"
},
"600": {
"value": "#6630f5",
"type": "color"
},
"700": {
"value": "#5427ec",
"type": "color"
},
"800": {
"value": "#3f20e7",
"type": "color"
},
"900": {
"value": "#1312d8",
"type": "color"
}
}
}
},
"brand": {
"primary": {
"zoox": {
"value": "#33ffc0",
"type": "color"
},
"black": {
"value": "#000000",
"type": "color"
},
"forest": {
"value": "#5e8479",
"type": "color"
},
"acqua": {
"value": "#338f82",
"type": "color"
},
"haze": {
"value": "#f5f5f5",
"type": "color"
},
"smoke": {
"value": "#595959",
"type": "color"
}
},
"secondary": {
"pink": {
"value": "#ed91db",
"type": "color"
},
"magenta": {
"value": "#d84289",
"type": "color"
},
"night": {
"value": "#1e263d",
"type": "color"
},
"shark": {
"value": "#59597c",
"type": "color"
},
"passion": {
"value": "#d9331f",
"type": "color"
},
"sun": {
"value": "#f68e2e",
"type": "color"
},
"deep": {
"value": "#3f66ad",
"type": "color"
},
"water": {
"value": "#569edd",
"type": "color"
},
"sky": {
"value": "#a8dbff",
"type": "color"
},
"salmon": {
"value": "#e2a5a3",
"type": "color"
},
"coral": {
"value": "#b26d60",
"type": "color"
},
"mango": {
"value": "#ffd600",
"type": "color"
},
"electric": {
"value": "#4438a5",
"type": "color"
},
"vapor": {
"value": "#c4cce2",
"type": "color"
},
"sand": {
"value": "#c4a572",
"type": "color"
}
},
"status": {
"red": {
"value": "#ff0000",
"type": "color"
},
"orange": {
"value": "#ff9900",
"type": "color"
},
"yellow": {
"value": "#ffff00",
"type": "color"
},
"green": {
"value": "#33ffc7",
"type": "color"
},
"blue": {
"value": "#73bcff",
"type": "color"
},
"purple": {
"value": "#a468ff",
"type": "color"
}
}
},
"fontFamilies": {
"rogan": {
"value": "Rogan",
"type": "fontFamilies"
},
"roboto": {
"value": "Roboto",
"type": "fontFamilies"
}
},
"lineHeights": {
"0": {
"value": 76,
"type": "lineHeights"
},
"1": {
"value": 64,
"type": "lineHeights"
},
"2": {
"value": 52,
"type": "lineHeights"
},
"3": {
"value": 44,
"type": "lineHeights"
},
"4": {
"value": 40,
"type": "lineHeights"
},
"5": {
"value": 36,
"type": "lineHeights"
},
"6": {
"value": 32,
"type": "lineHeights"
},
"7": {
"value": 28,
"type": "lineHeights"
},
"8": {
"value": 24,
"type": "lineHeights"
},
"9": {
"value": 20,
"type": "lineHeights"
},
"10": {
"value": 16,
"type": "lineHeights"
}
},
"fontWeights": {
"rogan-0": {
"value": "SemiBold",
"type": "fontWeights"
},
"roboto-1": {
"value": "SemiBold",
"type": "fontWeights"
},
"roboto-2": {
"value": "Medium",
"type": "fontWeights"
},
"roboto-3": {
"value": "Regular",
"type": "fontWeights"
}
},
"fontSize": {
"0": {
"value": 11,
"type": "fontSizes"
},
"1": {
"value": 12,
"type": "fontSizes"
},
"2": {
"value": 14,
"type": "fontSizes"
},
"3": {
"value": 16,
"type": "fontSizes"
},
"4": {
"value": 18,
"type": "fontSizes"
},
"5": {
"value": 22,
"type": "fontSizes"
},
"6": {
"value": 24,
"type": "fontSizes"
},
"7": {
"value": 28,
"type": "fontSizes"
},
"8": {
"value": 32,
"type": "fontSizes"
},
"9": {
"value": 36,
"type": "fontSizes"
},
"10": {
"value": 45,
"type": "fontSizes"
},
"11": {
"value": 57,
"type": "fontSizes"
},
"12": {
"value": 64,
"type": "fontSizes"
}
},
"letterSpacing": {
"0": {
"value": -0.5,
"type": "letterSpacing"
},
"1": {
"value": -0.25,
"type": "letterSpacing"
},
"2": {
"value": "0%",
"type": "letterSpacing"
},
"3": {
"value": 0.1,
"type": "letterSpacing"
},
"4": {
"value": 0.5,
"type": "letterSpacing"
},
"5": {
"value": 0.25,
"type": "letterSpacing"
},
"6": {
"value": 0.4,
"type": "letterSpacing"
}
},
"paragraphSpacing": {
"0": {
"value": 0,
"type": "paragraphSpacing"
}
},
"primary": {
"display1": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 76,
"fontSize": 64,
"letterSpacing": -0.5,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"display2": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 64,
"fontSize": 57,
"letterSpacing": -0.25,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"display3": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 52,
"fontSize": 45,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"headline1": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 44,
"fontSize": 36,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"headline2": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 40,
"fontSize": 32,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"headline3": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 36,
"fontSize": 28,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"headline4": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 32,
"fontSize": 24,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"headline5": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 28,
"fontSize": 22,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"headline6": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 24,
"fontSize": 18,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"subhead1": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 24,
"fontSize": 16,
"letterSpacing": 0.1,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"subhead2": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 20,
"fontSize": 14,
"letterSpacing": 0.1,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"button": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 20,
"fontSize": 14,
"letterSpacing": 0.1,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"body1": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 24,
"fontSize": 16,
"letterSpacing": 0.5,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"body2": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 20,
"fontSize": 14,
"letterSpacing": 0.25,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"caption": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 16,
"fontSize": 12,
"letterSpacing": 0.4,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"overlay": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 16,
"fontSize": 12,
"letterSpacing": 0.5,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"labelLarge": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 20,
"fontSize": 14,
"letterSpacing": 0.1,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"labelMedium": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 16,
"fontSize": 12,
"letterSpacing": 0.5,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"labelSmall": {
"value": {
"fontFamily": "Rogan",
"fontWeight": "SemiBold",
"lineHeight": 16,
"fontSize": 11,
"letterSpacing": 0.5,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
}
},
"secondary": {
"display1": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "SemiBold",
"lineHeight": 76,
"fontSize": 64,
"letterSpacing": -0.5,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"display2": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "SemiBold",
"lineHeight": 64,
"fontSize": 57,
"letterSpacing": -0.25,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"display3": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "SemiBold",
"lineHeight": 52,
"fontSize": 45,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"headline1": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "SemiBold",
"lineHeight": 44,
"fontSize": 36,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"headline2": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "SemiBold",
"lineHeight": 40,
"fontSize": 32,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"headline3": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "SemiBold",
"lineHeight": 36,
"fontSize": 28,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"headline4": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "SemiBold",
"lineHeight": 32,
"fontSize": 24,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"headline5": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "SemiBold",
"lineHeight": 28,
"fontSize": 22,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"headline6": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "SemiBold",
"lineHeight": 24,
"fontSize": 18,
"letterSpacing": "0%",
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"subhead1": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "Medium",
"lineHeight": 24,
"fontSize": 16,
"letterSpacing": 0.1,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"subhead2": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "Medium",
"lineHeight": 20,
"fontSize": 14,
"letterSpacing": 0.1,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"button": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "Medium",
"lineHeight": 20,
"fontSize": 14,
"letterSpacing": 0.1,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"body1": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "Regular",
"lineHeight": 24,
"fontSize": 16,
"letterSpacing": 0.5,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"body2": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "Regular",
"lineHeight": 20,
"fontSize": 14,
"letterSpacing": 0.25,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"caption": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "Regular",
"lineHeight": 16,
"fontSize": 12,
"letterSpacing": 0.4,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"overlay": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "Medium",
"lineHeight": 16,
"fontSize": 12,
"letterSpacing": 0.5,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"labelSmall": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "Medium",
"lineHeight": 16,
"fontSize": 11,
"letterSpacing": 0.5,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"labelMedium": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "Medium",
"lineHeight": 16,
"fontSize": 12,
"letterSpacing": 0.5,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"labelLarge": {
"value": {
"fontFamily": "Roboto",
"fontWeight": "Medium",
"lineHeight": 20,
"fontSize": 14,
"letterSpacing": 0.1,
"paragraphSpacing": 0,
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
}
},
"textCase": {
"none": {
"value": "none",
"type": "textCase"
}
},
"textDecoration": {
"none": {
"value": "none",
"type": "textDecoration"
}
}
}