Skip to content

Instantly share code, notes, and snippets.

@spjpgrd

spjpgrd/forLight.json Secret

Created April 13, 2023 22:18
Show Gist options
  • Save spjpgrd/1dd97fb471f19e1c39b6218b70d977ae to your computer and use it in GitHub Desktop.
Save spjpgrd/1dd97fb471f19e1c39b6218b70d977ae to your computer and use it in GitHub Desktop.
Download ZIP
Raw
forLight.json
{
"forLight": {
"description": "Color theme tokens at lightness of 99%, contrast of 99%",
"background": {
"value": "#fbfbfb",
"type": "color",
"description": "UI background color. All color contrasts evaluated and generated against this color."
},
"pink": {
"50": {
"value": "#fff2f5",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.05:1 against background #fbfbfb"
},
"100": {
"value": "#ffeaf0",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.1:1 against background #fbfbfb"
},
"200": {
"value": "#ffdde7",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.2:1 against background #fbfbfb"
},
"300": {
"value": "#ffb5cc",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.59:1 against background #fbfbfb"
},
"400": {
"value": "#fd679a",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #fbfbfb"
},
"500": {
"value": "#ca0d67",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.36:1 against background #fbfbfb"
},
"600": {
"value": "#ad0054",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.94:1 against background #fbfbfb"
},
"700": {
"value": "#900044",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 8.92:1 against background #fbfbfb"
},
"800": {
"value": "#780036",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 10.9:1 against background #fbfbfb"
},
"900": {
"value": "#500022",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 14.86:1 against background #fbfbfb"
}
},
"red": {
"50": {
"value": "#fff3f1",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.05:1 against background #fbfbfb"
},
"100": {
"value": "#ffebe8",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.1:1 against background #fbfbfb"
},
"200": {
"value": "#ffdfda",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.2:1 against background #fbfbfb"
},
"300": {
"value": "#ffb8af",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.59:1 against background #fbfbfb"
},
"400": {
"value": "#f57469",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #fbfbfb"
},
"500": {
"value": "#cb2123",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.36:1 against background #fbfbfb"
},
"600": {
"value": "#b3000f",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.94:1 against background #fbfbfb"
},
"700": {
"value": "#940000",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 8.92:1 against background #fbfbfb"
},
"800": {
"value": "#7c0000",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 10.9:1 against background #fbfbfb"
},
"900": {
"value": "#520000",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 14.86:1 against background #fbfbfb"
}
},
"orange": {
"50": {
"value": "#fff2e7",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.05:1 against background #fbfbfb"
},
"100": {
"value": "#ffecdb",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.1:1 against background #fbfbfb"
},
"200": {
"value": "#ffe1c6",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.2:1 against background #fbfbfb"
},
"300": {
"value": "#ffbc85",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.59:1 against background #fbfbfb"
},
"400": {
"value": "#e78033",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #fbfbfb"
},
"500": {
"value": "#a2520f",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.36:1 against background #fbfbfb"
},
"600": {
"value": "#8a4407",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.94:1 against background #fbfbfb"
},
"700": {
"value": "#723703",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 8.92:1 against background #fbfbfb"
},
"800": {
"value": "#5f2c01",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 10.9:1 against background #fbfbfb"
},
"900": {
"value": "#3e1b00",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 14.86:1 against background #fbfbfb"
}
},
"yellow": {
"50": {
"value": "#fff4d5",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.05:1 against background #fbfbfb"
},
"100": {
"value": "#ffefbf",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.1:1 against background #fbfbfb"
},
"200": {
"value": "#ffe59a",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.2:1 against background #fbfbfb"
},
"300": {
"value": "#ecc626",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.59:1 against background #fbfbfb"
},
"400": {
"value": "#c99100",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #fbfbfb"
},
"500": {
"value": "#9a5800",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.36:1 against background #fbfbfb"
},
"600": {
"value": "#874600",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.94:1 against background #fbfbfb"
},
"700": {
"value": "#743601",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 8.92:1 against background #fbfbfb"
},
"800": {
"value": "#642902",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 10.9:1 against background #fbfbfb"
},
"900": {
"value": "#451502",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 14.86:1 against background #fbfbfb"
}
},
"green": {
"50": {
"value": "#e4fae4",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.05:1 against background #fbfbfb"
},
"100": {
"value": "#d5f8d6",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.1:1 against background #fbfbfb"
},
"200": {
"value": "#bff4c1",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.2:1 against background #fbfbfb"
},
"300": {
"value": "#71e07b",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.59:1 against background #fbfbfb"
},
"400": {
"value": "#00b434",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #fbfbfb"
},
"500": {
"value": "#00790e",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.36:1 against background #fbfbfb"
},
"600": {
"value": "#006606",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.94:1 against background #fbfbfb"
},
"700": {
"value": "#005402",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 8.92:1 against background #fbfbfb"
},
"800": {
"value": "#004501",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 10.9:1 against background #fbfbfb"
},
"900": {
"value": "#002c00",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 14.86:1 against background #fbfbfb"
}
},
"teal": {
"50": {
"value": "#eef7f7",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.05:1 against background #fbfbfb"
},
"100": {
"value": "#e3f3f1",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.1:1 against background #fbfbfb"
},
"200": {
"value": "#d0ebe9",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.2:1 against background #fbfbfb"
},
"300": {
"value": "#99d4cf",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.59:1 against background #fbfbfb"
},
"400": {
"value": "#4fa9a3",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #fbfbfb"
},
"500": {
"value": "#21736f",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.36:1 against background #fbfbfb"
},
"600": {
"value": "#17615d",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.94:1 against background #fbfbfb"
},
"700": {
"value": "#0f504c",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 8.92:1 against background #fbfbfb"
},
"800": {
"value": "#09423e",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 10.9:1 against background #fbfbfb"
},
"900": {
"value": "#032a28",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 14.86:1 against background #fbfbfb"
}
},
"cyan": {
"50": {
"value": "#eef7fb",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.05:1 against background #fbfbfb"
},
"100": {
"value": "#e3f2fa",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.1:1 against background #fbfbfb"
},
"200": {
"value": "#d2ebf8",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.2:1 against background #fbfbfb"
},
"300": {
"value": "#98d1ec",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.59:1 against background #fbfbfb"
},
"400": {
"value": "#4ea5ca",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #fbfbfb"
},
"500": {
"value": "#207090",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.36:1 against background #fbfbfb"
},
"600": {
"value": "#155e7a",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.94:1 against background #fbfbfb"
},
"700": {
"value": "#0d4d65",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 8.92:1 against background #fbfbfb"
},
"800": {
"value": "#083f54",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 10.9:1 against background #fbfbfb"
},
"900": {
"value": "#032837",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 14.86:1 against background #fbfbfb"
}
},
"blue": {
"50": {
"value": "#eef7ff",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.05:1 against background #fbfbfb"
},
"100": {
"value": "#e2f2ff",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.1:1 against background #fbfbfb"
},
"200": {
"value": "#d1eaff",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.2:1 against background #fbfbfb"
},
"300": {
"value": "#97cfff",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.59:1 against background #fbfbfb"
},
"400": {
"value": "#4a9ff2",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #fbfbfb"
},
"500": {
"value": "#1a6bb1",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.36:1 against background #fbfbfb"
},
"600": {
"value": "#105998",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.94:1 against background #fbfbfb"
},
"700": {
"value": "#08497f",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 8.92:1 against background #fbfbfb"
},
"800": {
"value": "#043c6a",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 10.9:1 against background #fbfbfb"
},
"900": {
"value": "#012546",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 14.86:1 against background #fbfbfb"
}
},
"purple": {
"50": {
"value": "#f5f3ff",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.05:1 against background #fbfbfb"
},
"100": {
"value": "#f2eeff",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.1:1 against background #fbfbfb"
},
"200": {
"value": "#e8e2ff",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.2:1 against background #fbfbfb"
},
"300": {
"value": "#d1c1ff",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.59:1 against background #fbfbfb"
},
"400": {
"value": "#ab85ff",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #fbfbfb"
},
"500": {
"value": "#8033f9",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.36:1 against background #fbfbfb"
},
"600": {
"value": "#7111e6",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.94:1 against background #fbfbfb"
},
"700": {
"value": "#5d00c5",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 8.92:1 against background #fbfbfb"
},
"800": {
"value": "#4c00a6",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 10.9:1 against background #fbfbfb"
},
"900": {
"value": "#310070",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 14.86:1 against background #fbfbfb"
}
},
"gray": {
"50": {
"value": "#f5f5f6",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.05:1 against background #fbfbfb"
},
"100": {
"value": "#f0eff0",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.1:1 against background #fbfbfb"
},
"200": {
"value": "#e6e6e7",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.2:1 against background #fbfbfb"
},
"300": {
"value": "#c9c9cb",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.59:1 against background #fbfbfb"
},
"400": {
"value": "#9b9b9e",
"type": "color",
"description": "Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #fbfbfb"
},
"500": {
"value": "#69676d",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.36:1 against background #fbfbfb"
},
"600": {
"value": "#58565c",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.94:1 against background #fbfbfb"
},
"700": {
"value": "#48464d",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 8.92:1 against background #fbfbfb"
},
"800": {
"value": "#3b3941",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 10.9:1 against background #fbfbfb"
},
"900": {
"value": "#25242b",
"type": "color",
"description": "Color can be used for small text. WCAG 2.x (relative luminance) contrast is 14.86:1 against background #fbfbfb"
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment