@visual-framework/vf-design-tokens/dist/json/vf-colors.ios.json

A collection of design tokens for consumption across projects and products

{
  "properties": [
    {
      "type": "color",
      "category": "color",
      "name": "vfColorGreen",
      "value": "#18974c",
      "meta": {
        "friendlyName": "EMBL Green",
        "sassFunction": "color",
        "sassMap": "green",
        "CSSCustomProperty": "--vf-color--green",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorGreenDarkest",
      "value": "#0a5032",
      "meta": {
        "friendlyName": "EMBL Green, Darkest Tint",
        "sassFunction": "color",
        "sassMap": "green--darkest",
        "CSSCustomProperty": "--vf-color--green--darkest",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorGreenDark",
      "value": "#007b53",
      "meta": {
        "friendlyName": "EMBL Green, Dark Tint",
        "sassFunction": "color",
        "sassMap": "green--dark",
        "CSSCustomProperty": "--vf-color--green--dark",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorGreenLight",
      "value": "#6cc24a",
      "meta": {
        "friendlyName": "EMBL Green, Light Tint",
        "sassFunction": "color",
        "sassMap": "green--light",
        "CSSCustomProperty": "--vf-color--green--light",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorGreenLightest",
      "value": "#d0debb",
      "meta": {
        "friendlyName": "EMBL Green, Lightest Tint",
        "sassFunction": "color",
        "sassMap": "green--lightest",
        "CSSCustomProperty": "--vf-color--green--lightest",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorGrey",
      "value": "#707372",
      "meta": {
        "friendlyName": "EMBL Grey",
        "sassFunction": "color",
        "sassMap": "grey",
        "CSSCustomProperty": "--vf-color--grey",
        "Deprecated": true,
        "DeprecatedText": "Please use the <a class=\"vf-card__link\" href=\"../neutral-colors/\">vf-neutral--600</a> token.",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorGreyDarkest",
      "value": "#373a36",
      "meta": {
        "friendlyName": "EMBL Grey, Darkest Tint",
        "sassFunction": "color",
        "sassMap": "grey--darkest",
        "CSSCustomProperty": "--vf-color--grey--darkest",
        "Deprecated": true,
        "DeprecatedText": "Please use the <a class=\"vf-card__link\" href=\"../neutral-colors/\">vf-neutral--800</a> token.",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorGreyDark",
      "value": "#54585a",
      "meta": {
        "friendlyName": "EMBL Grey, Dark Tint",
        "sassFunction": "color",
        "sassMap": "grey--dark",
        "CSSCustomProperty": "--vf-color--grey--dark",
        "Deprecated": true,
        "DeprecatedText": "Please use the <a class=\"vf-card__link\" href=\"../neutral-colors/\">vf-neutral--700</a> token.",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorGreyLight",
      "value": "#a8a99e",
      "meta": {
        "friendlyName": "EMBL Grey, Light Tint",
        "sassFunction": "color",
        "sassMap": "grey--light",
        "CSSCustomProperty": "--vf-color--grey--light",
        "Deprecated": true,
        "DeprecatedText": "Please use the <a class=\"vf-card__link\" href=\"../neutral-colors/\">vf-neutral--300</a> token.",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorGreyLightest",
      "value": "#d0d0ce",
      "meta": {
        "friendlyName": "EMBL Grey, Lightest Tint",
        "sassFunction": "color",
        "sassMap": "grey--lightest",
        "CSSCustomProperty": "--vf-color--grey--lightest",
        "Deprecated": true,
        "DeprecatedText": "Please use the <a class=\"vf-card__link\" href=\"../neutral-colors/\">vf-neutral--200</a> token.",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorRed",
      "value": "#d41645",
      "meta": {
        "friendlyName": "EMBL Red",
        "sassFunction": "color",
        "sassMap": "red",
        "CSSCustomProperty": "--vf-color--red",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorRedDark",
      "value": "#a6093d",
      "meta": {
        "friendlyName": "EMBL Red, Dark Tint",
        "sassFunction": "color",
        "sassMap": "red--dark",
        "CSSCustomProperty": "--vf-color--red--dark",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorRedLight",
      "value": "#e58f9e",
      "meta": {
        "friendlyName": "EMBL Red, Light Tint",
        "sassFunction": "color",
        "sassMap": "red--light",
        "CSSCustomProperty": "--vf-color--red--light",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorBlue",
      "value": "#3b6fb6",
      "meta": {
        "friendlyName": "EMBL Blue",
        "sassFunction": "color",
        "sassMap": "blue",
        "CSSCustomProperty": "--vf-color--blue",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorBlueDark",
      "value": "#193f90",
      "meta": {
        "friendlyName": "EMBL Blue, Dark Tint",
        "sassFunction": "color",
        "sassMap": "blue--dark",
        "CSSCustomProperty": "--vf-color--blue--dark",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorBlueLight",
      "value": "#8bb8e8",
      "meta": {
        "friendlyName": "EMBL Blue, Light Tint",
        "sassFunction": "color",
        "sassMap": "blue--light",
        "CSSCustomProperty": "--vf-color--blue--light",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorPurple",
      "value": "#734595",
      "meta": {
        "friendlyName": "EMBL Purple",
        "sassFunction": "color",
        "sassMap": "purple",
        "CSSCustomProperty": "--vf-color--purple",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorPurpleDark",
      "value": "#563d82",
      "meta": {
        "friendlyName": "EMBL Purple, Dark Tint",
        "sassFunction": "color",
        "sassMap": "purple--dark",
        "CSSCustomProperty": "--vf-color--purple--dark",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorPurpleLight",
      "value": "#cba3d8",
      "meta": {
        "friendlyName": "EMBL Purple, Light Tint",
        "sassFunction": "color",
        "sassMap": "purple--light",
        "CSSCustomProperty": "--vf-color--purple--light",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorOrange",
      "value": "#f49e17",
      "meta": {
        "friendlyName": "EMBL Orange",
        "sassFunction": "color",
        "sassMap": "orange",
        "CSSCustomProperty": "--vf-color--orange",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorOrangeDark",
      "value": "#b65417",
      "meta": {
        "friendlyName": "EMBL Orange, Dark Tint",
        "sassFunction": "color",
        "sassMap": "orange--dark",
        "CSSCustomProperty": "--vf-color--orange--dark",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorOrangeLight",
      "value": "#efc06e",
      "meta": {
        "friendlyName": "EMBL Orange, Light Tint",
        "sassFunction": "color",
        "sassMap": "orange--light",
        "CSSCustomProperty": "--vf-color--orange--light",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorYellow",
      "value": "#f4c61f",
      "meta": {
        "friendlyName": "EMBL Yellow",
        "sassFunction": "color",
        "sassMap": "yellow",
        "CSSCustomProperty": "--vf-color--yellow",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorYellowDark",
      "value": "#ffb81c",
      "meta": {
        "friendlyName": "EMBL Yellow, Dark Tint",
        "sassFunction": "color",
        "sassMap": "yellow--dark",
        "CSSCustomProperty": "--vf-color--yellow--dark",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorYellowLight",
      "value": "#fdd757",
      "meta": {
        "friendlyName": "EMBL Yellow, Light Tint",
        "sassFunction": "color",
        "sassMap": "yellow--light",
        "CSSCustomProperty": "--vf-color--yellow--light",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorBrightGreen",
      "value": "#a1be1f",
      "meta": {
        "friendlyName": "EMBL Bright Green",
        "sassFunction": "color",
        "sassMap": "bright-green",
        "CSSCustomProperty": "--vf-color--bright-green",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorBrightGreenDark",
      "value": "#7fb428",
      "meta": {
        "friendlyName": "EMBL Bright Green, Dark Tint",
        "sassFunction": "color",
        "sassMap": "bright-green--dark",
        "CSSCustomProperty": "--vf-color--bright-green--dark",
        "comment": null
      }
    },
    {
      "type": "color",
      "category": "color",
      "name": "vfColorBrightGreenLight",
      "value": "#e2e868",
      "meta": {
        "friendlyName": "EMBL Bright Green, Light Tint",
        "sassFunction": "color",
        "sassMap": "bright-green--light",
        "CSSCustomProperty": "--vf-color--bright-green--light",
        "comment": null
      }
    }
  ]
}