{ "format": "Portfolio token reference v1", "source": "tokens.figma.json", "exportedOn": "2026-09-30", "note": "Readable Figma snapshot. Collection modes are independent. This file is not a DTCG schema, CSS library or live Figma sync.", "collections": [ { "name": "Brand", "modes": [ "Mode 1" ], "tokens": { "Purple/50": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.9607843160629272, 0.9333333373069763, 0.9960784316062927 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Purple/100": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.9254902005195618, 0.8705882430076599, 0.9960784316062927 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Purple/300": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.7803921699523926, 0.6078431606292725, 0.9921568632125854 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Purple/400": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.7098039388656616, 0.47843137383461, 0.9882352948188782 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Purple/200": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.8549019694328308, 0.7411764860153198, 0.9921568632125854 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Purple/500": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.6352941393852234, 0.3490196168422699, 0.9843137264251709 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Purple/600": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.5098039507865906, 0.27843138575553894, 0.7882353067398071 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Purple/700": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.3803921639919281, 0.2078431397676468, 0.5921568870544434 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Purple/800": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.2549019753932953, 0.1411764770746231, 0.3921568691730499 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Green/50": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.9137254953384399, 0.9725490212440491, 0.8980392217636108 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Green/100": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.9019607901573181, 0.9647058844566345, 0.8980392217636108 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Green/200": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.8117647171020508, 0.929411768913269, 0.800000011920929 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Green/300": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.4313725531101227, 0.7882353067398071, 0.4000000059604645 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Green/400": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.239215686917305, 0.7176470756530762, 0.20000000298023224 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Green/500": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.05098039284348488, 0.6470588445663452, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Green/600": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.03921568766236305, 0.5176470875740051, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Green/700": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.0313725508749485, 0.38823530077934265, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Green/800": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.019607843831181526, 0.25882354378700256, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Red/50": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 1, 0.8980392217636108, 0.8980392217636108 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Red/100": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 1, 0.800000011920929, 0.800000011920929 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Red/200": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 1, 0.6000000238418579, 0.6000000238418579 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Red/300": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 1, 0.4000000059604645, 0.4000000059604645 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Red/400": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 1, 0.20000000298023224, 0.20000000298023224 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Red/500": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 1, 0, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Red/600": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.800000011920929, 0, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Red/700": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.6000000238418579, 0, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Red/800": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.4000000059604645, 0, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Orange/50": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 1, 0.9411764740943909, 0.8980392217636108 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Orange/100": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 1, 0.8823529481887817, 0.800000011920929 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Orange/200": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 1, 0.8156862854957581, 0.7490196228027344 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Orange/300": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 1, 0.7098039388656616, 0.501960813999176 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Orange/400": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 1, 0.5647059082984924, 0.250980406999588 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Orange/500": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 1, 0.40784314274787903, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Orange/600": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.7490196228027344, 0.3137255012989044, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Orange/700": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.501960813999176, 0.23137255012989044, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Orange/800": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.250980406999588, 0.10588235408067703, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Blue/50": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.8980392217636108, 0.9019607901573181, 1 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Blue/100": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.800000011920929, 0.8078431487083435, 1 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Blue/200": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.6000000238418579, 0.615686297416687, 1 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Blue/300": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.4000000059604645, 0.4000000059604645, 0.800000011920929 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Blue/400": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.20000000298023224, 0.23137255012989044, 1 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Blue/500": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0, 0.03921568766236305, 1 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Blue/600": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0, 0.0313725508749485, 0.800000011920929 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Blue/700": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0, 0.0235294122248888, 0.6000000238418579 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Blue/800": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0, 0.01568627543747425, 0.4000000059604645 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Grey/50": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.9254902005195618, 0.9254902005195618, 0.9333333373069763 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Grey/100": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.8549019694328308, 0.8588235378265381, 0.8666666746139526 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Grey/200": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.7058823704719543, 0.7137255072593689, 0.7333333492279053 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Grey/300": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.5607843399047852, 0.572549045085907, 0.6000000238418579 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Grey/400": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.4117647111415863, 0.4274509847164154, 0.46666666865348816 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Grey/500": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.2666666805744171, 0.2862745225429535, 0.3333333432674408 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Grey/600": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.21176470816135406, 0.22745098173618317, 0.2666666805744171 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Grey/700": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.16078431904315948, 0.1725490242242813, 0.20000000298023224 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Grey/800": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.10588235408067703, 0.11372549086809158, 0.13333334028720856 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Font family/Headings": { "type": "string", "modes": { "Mode 1": "Inter" }, "scopes": [ "FONT_FAMILY" ], "description": "Base typography value. Component text should reach it through the intended font alias or text style." }, "Font family/Body": { "type": "string", "modes": { "Mode 1": "Inter" }, "scopes": [ "FONT_FAMILY" ], "description": "Base typography value. Component text should reach it through the intended font alias or text style." }, "Font weight/Regular": { "type": "string", "modes": { "Mode 1": "Regular" }, "scopes": [ "FONT_STYLE" ], "description": "Base typography value. Component text should reach it through the intended font alias or text style." }, "Font weight/Medium": { "type": "string", "modes": { "Mode 1": "Medium" }, "scopes": [ "FONT_STYLE" ], "description": "Base typography value. Component text should reach it through the intended font alias or text style." }, "Font weight/Semi Bold": { "type": "string", "modes": { "Mode 1": "Semi Bold" }, "scopes": [ "FONT_STYLE" ], "description": "Base typography value. Component text should reach it through the intended font alias or text style." }, "Font weight/Bold": { "type": "string", "modes": { "Mode 1": "Bold" }, "scopes": [ "FONT_STYLE" ], "description": "Base typography value. Component text should reach it through the intended font alias or text style." }, "Scale/0": { "type": "number", "modes": { "Mode 1": 0 }, "scopes": [ "GAP" ], "description": "Shared numeric primitive in pixels for spacing, radius and stroke aliases." }, "Scale/200": { "type": "number", "modes": { "Mode 1": 8 }, "scopes": [ "GAP" ], "description": "Shared numeric primitive in pixels for spacing, radius and stroke aliases." }, "Scale/300": { "type": "number", "modes": { "Mode 1": 12 }, "scopes": [ "GAP" ], "description": "Shared numeric primitive in pixels for spacing, radius and stroke aliases." }, "Scale/400": { "type": "number", "modes": { "Mode 1": 16 }, "scopes": [ "GAP" ], "description": "Shared numeric primitive in pixels for spacing, radius and stroke aliases." }, "Scale/500": { "type": "number", "modes": { "Mode 1": 20 }, "scopes": [ "GAP" ], "description": "Shared numeric primitive in pixels for spacing, radius and stroke aliases." }, "Scale/600": { "type": "number", "modes": { "Mode 1": 24 }, "scopes": [ "GAP" ], "description": "Shared numeric primitive in pixels for spacing, radius and stroke aliases." }, "Scale/700": { "type": "number", "modes": { "Mode 1": 28 }, "scopes": [ "GAP" ], "description": "Shared numeric primitive in pixels for spacing, radius and stroke aliases." }, "Scale/800": { "type": "number", "modes": { "Mode 1": 32 }, "scopes": [ "GAP" ], "description": "Shared numeric primitive in pixels for spacing, radius and stroke aliases." }, "Scale/100": { "type": "number", "modes": { "Mode 1": 4 }, "scopes": [ "GAP" ], "description": "Shared numeric primitive in pixels for spacing, radius and stroke aliases." }, "Scale/50": { "type": "number", "modes": { "Mode 1": 2 }, "scopes": [ "GAP" ], "description": "Shared numeric primitive in pixels for spacing, radius and stroke aliases." }, "Scale/900": { "type": "number", "modes": { "Mode 1": 40 }, "scopes": [ "GAP" ], "description": "Shared numeric primitive in pixels for spacing, radius and stroke aliases." }, "Scale/1000": { "type": "number", "modes": { "Mode 1": 48 }, "scopes": [ "GAP" ], "description": "Shared numeric primitive in pixels for spacing, radius and stroke aliases." }, "Scale/25": { "type": "number", "modes": { "Mode 1": 1 }, "scopes": [ "GAP" ], "description": "Shared numeric primitive in pixels for spacing, radius and stroke aliases." }, "Foundation/white": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Foundation/black": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Purple/900": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.125490203499794, 0.07058823853731155, 0.19607843458652496 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Purple/950": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.062745101749897, 0.03529411926865578, 0.09803921729326248 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Red/900": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.20000000298023224, 0, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Red/950": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.10196078568696976, 0, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Green/900": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.0117647061124444, 0.12941177189350128, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Green/950": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.003921568859368563, 0.06666667014360428, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Grey/900": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.054901961237192154, 0.05882352963089943, 0.06666667014360428 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Grey/950": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.027450980618596077, 0.027450980618596077, 0.03529411926865578 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Orange/900": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.20000000298023224, 0.08235294371843338, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Orange/950": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0.10196078568696976, 0.04313725605607033, 0 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Blue/900": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0, 0.007843137718737125, 0.20000000298023224 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." }, "Blue/950": { "type": "color", "modes": { "Mode 1": { "colorSpace": "srgb", "components": [ 0, 0.003921568859368563, 0.10196078568696976 ], "alpha": 1 } }, "scopes": [], "description": "Base palette value. Use Alias or Mapped roles in components rather than binding directly to this color." } } }, { "name": "Alias", "modes": [ "Brand 1", "Brand 2" ], "tokens": { "Primary/50": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Purple/50" }, "Brand 2": { "reference": "Brand/Red/50" } }, "scopes": [], "description": "Brand accent alias: purple in Brand 1, red in Brand 2. Components normally use Mapped action roles." }, "Primary/100": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Purple/100" }, "Brand 2": { "reference": "Brand/Red/100" } }, "scopes": [], "description": "Brand accent alias: purple in Brand 1, red in Brand 2. Components normally use Mapped action roles." }, "Primary/200": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Purple/200" }, "Brand 2": { "reference": "Brand/Red/200" } }, "scopes": [], "description": "Brand accent alias: purple in Brand 1, red in Brand 2. Components normally use Mapped action roles." }, "Primary/300": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Purple/300" }, "Brand 2": { "reference": "Brand/Red/300" } }, "scopes": [], "description": "Brand accent alias: purple in Brand 1, red in Brand 2. Components normally use Mapped action roles." }, "Primary/400": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Purple/400" }, "Brand 2": { "reference": "Brand/Red/400" } }, "scopes": [], "description": "Brand accent alias: purple in Brand 1, red in Brand 2. Components normally use Mapped action roles." }, "Primary/500": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Purple/500" }, "Brand 2": { "reference": "Brand/Red/500" } }, "scopes": [], "description": "Brand accent alias: purple in Brand 1, red in Brand 2. Components normally use Mapped action roles." }, "Primary/600": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Purple/600" }, "Brand 2": { "reference": "Brand/Red/600" } }, "scopes": [], "description": "Brand accent alias: purple in Brand 1, red in Brand 2. Components normally use Mapped action roles." }, "Primary/700": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Purple/700" }, "Brand 2": { "reference": "Brand/Red/700" } }, "scopes": [], "description": "Brand accent alias: purple in Brand 1, red in Brand 2. Components normally use Mapped action roles." }, "Primary/800": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Purple/800" }, "Brand 2": { "reference": "Brand/Red/800" } }, "scopes": [], "description": "Brand accent alias: purple in Brand 1, red in Brand 2. Components normally use Mapped action roles." }, "Error/50": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Red/50" }, "Brand 2": { "reference": "Brand/Red/50" } }, "scopes": [], "description": "Reusable Error alias. Prefer a Mapped usage role where one exists." }, "Error/100": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Red/100" }, "Brand 2": { "reference": "Brand/Red/100" } }, "scopes": [], "description": "Reusable Error alias. Prefer a Mapped usage role where one exists." }, "Error/200": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Red/200" }, "Brand 2": { "reference": "Brand/Red/200" } }, "scopes": [], "description": "Reusable Error alias. Prefer a Mapped usage role where one exists." }, "Error/300": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Red/300" }, "Brand 2": { "reference": "Brand/Red/300" } }, "scopes": [], "description": "Reusable Error alias. Prefer a Mapped usage role where one exists." }, "Error/400": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Red/400" }, "Brand 2": { "reference": "Brand/Red/400" } }, "scopes": [], "description": "Reusable Error alias. Prefer a Mapped usage role where one exists." }, "Error/500": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Red/500" }, "Brand 2": { "reference": "Brand/Red/500" } }, "scopes": [], "description": "Reusable Error alias. Prefer a Mapped usage role where one exists." }, "Error/600": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Red/600" }, "Brand 2": { "reference": "Brand/Red/600" } }, "scopes": [], "description": "Reusable Error alias. Prefer a Mapped usage role where one exists." }, "Error/700": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Red/700" }, "Brand 2": { "reference": "Brand/Red/700" } }, "scopes": [], "description": "Reusable Error alias. Prefer a Mapped usage role where one exists." }, "Error/800": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Red/800" }, "Brand 2": { "reference": "Brand/Red/800" } }, "scopes": [], "description": "Reusable Error alias. Prefer a Mapped usage role where one exists." }, "Success/50": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Green/50" }, "Brand 2": { "reference": "Brand/Green/50" } }, "scopes": [], "description": "Reusable Success alias. Prefer a Mapped usage role where one exists." }, "Success/100": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Green/100" }, "Brand 2": { "reference": "Brand/Green/100" } }, "scopes": [], "description": "Reusable Success alias. Prefer a Mapped usage role where one exists." }, "Success/200": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Green/200" }, "Brand 2": { "reference": "Brand/Green/200" } }, "scopes": [], "description": "Reusable Success alias. Prefer a Mapped usage role where one exists." }, "Success/300": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Green/300" }, "Brand 2": { "reference": "Brand/Green/300" } }, "scopes": [], "description": "Reusable Success alias. Prefer a Mapped usage role where one exists." }, "Success/400": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Green/400" }, "Brand 2": { "reference": "Brand/Green/400" } }, "scopes": [], "description": "Reusable Success alias. Prefer a Mapped usage role where one exists." }, "Success/500": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Green/500" }, "Brand 2": { "reference": "Brand/Green/500" } }, "scopes": [], "description": "Reusable Success alias. Prefer a Mapped usage role where one exists." }, "Success/600": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Green/600" }, "Brand 2": { "reference": "Brand/Green/600" } }, "scopes": [], "description": "Reusable Success alias. Prefer a Mapped usage role where one exists." }, "Success/700": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Green/700" }, "Brand 2": { "reference": "Brand/Green/700" } }, "scopes": [], "description": "Reusable Success alias. Prefer a Mapped usage role where one exists." }, "Success/800": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Green/800" }, "Brand 2": { "reference": "Brand/Green/800" } }, "scopes": [], "description": "Reusable Success alias. Prefer a Mapped usage role where one exists." }, "Neutral/50": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Grey/50" }, "Brand 2": { "reference": "Brand/Grey/50" } }, "scopes": [], "description": "Reusable Neutral alias. Prefer a Mapped usage role where one exists." }, "Neutral/100": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Grey/100" }, "Brand 2": { "reference": "Brand/Grey/100" } }, "scopes": [], "description": "Reusable Neutral alias. Prefer a Mapped usage role where one exists." }, "Neutral/200": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Grey/200" }, "Brand 2": { "reference": "Brand/Grey/200" } }, "scopes": [], "description": "Reusable Neutral alias. Prefer a Mapped usage role where one exists." }, "Neutral/300": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Grey/300" }, "Brand 2": { "reference": "Brand/Grey/300" } }, "scopes": [], "description": "Reusable Neutral alias. Prefer a Mapped usage role where one exists." }, "Neutral/400": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Grey/400" }, "Brand 2": { "reference": "Brand/Grey/400" } }, "scopes": [], "description": "Reusable Neutral alias. Prefer a Mapped usage role where one exists." }, "Neutral/500": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Grey/500" }, "Brand 2": { "reference": "Brand/Grey/500" } }, "scopes": [], "description": "Reusable Neutral alias. Prefer a Mapped usage role where one exists." }, "Neutral/600": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Grey/600" }, "Brand 2": { "reference": "Brand/Grey/600" } }, "scopes": [], "description": "Reusable Neutral alias. Prefer a Mapped usage role where one exists." }, "Neutral/700": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Grey/700" }, "Brand 2": { "reference": "Brand/Grey/700" } }, "scopes": [], "description": "Reusable Neutral alias. Prefer a Mapped usage role where one exists." }, "Neutral/800": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Grey/800" }, "Brand 2": { "reference": "Brand/Grey/800" } }, "scopes": [], "description": "Reusable Neutral alias. Prefer a Mapped usage role where one exists." }, "Warning/50": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Orange/50" }, "Brand 2": { "reference": "Brand/Orange/50" } }, "scopes": [], "description": "Reusable Warning alias. Prefer a Mapped usage role where one exists." }, "Warning/100": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Orange/100" }, "Brand 2": { "reference": "Brand/Orange/100" } }, "scopes": [], "description": "Reusable Warning alias. Prefer a Mapped usage role where one exists." }, "Warning/200": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Orange/200" }, "Brand 2": { "reference": "Brand/Orange/200" } }, "scopes": [], "description": "Reusable Warning alias. Prefer a Mapped usage role where one exists." }, "Warning/300": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Orange/300" }, "Brand 2": { "reference": "Brand/Orange/300" } }, "scopes": [], "description": "Reusable Warning alias. Prefer a Mapped usage role where one exists." }, "Warning/400": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Orange/400" }, "Brand 2": { "reference": "Brand/Orange/400" } }, "scopes": [], "description": "Reusable Warning alias. Prefer a Mapped usage role where one exists." }, "Warning/500": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Orange/500" }, "Brand 2": { "reference": "Brand/Orange/500" } }, "scopes": [], "description": "Reusable Warning alias. Prefer a Mapped usage role where one exists." }, "Warning/600": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Orange/600" }, "Brand 2": { "reference": "Brand/Orange/600" } }, "scopes": [], "description": "Reusable Warning alias. Prefer a Mapped usage role where one exists." }, "Warning/700": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Orange/700" }, "Brand 2": { "reference": "Brand/Orange/700" } }, "scopes": [], "description": "Reusable Warning alias. Prefer a Mapped usage role where one exists." }, "Warning/800": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Orange/800" }, "Brand 2": { "reference": "Brand/Orange/800" } }, "scopes": [], "description": "Reusable Warning alias. Prefer a Mapped usage role where one exists." }, "Information/50": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Blue/50" }, "Brand 2": { "reference": "Brand/Blue/50" } }, "scopes": [], "description": "Reusable Information alias. Prefer a Mapped usage role where one exists." }, "Information/100": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Blue/100" }, "Brand 2": { "reference": "Brand/Blue/100" } }, "scopes": [], "description": "Reusable Information alias. Prefer a Mapped usage role where one exists." }, "Information/200": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Blue/200" }, "Brand 2": { "reference": "Brand/Blue/200" } }, "scopes": [], "description": "Reusable Information alias. Prefer a Mapped usage role where one exists." }, "Information/300": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Blue/300" }, "Brand 2": { "reference": "Brand/Blue/300" } }, "scopes": [], "description": "Reusable Information alias. Prefer a Mapped usage role where one exists." }, "Information/400": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Blue/400" }, "Brand 2": { "reference": "Brand/Blue/400" } }, "scopes": [], "description": "Reusable Information alias. Prefer a Mapped usage role where one exists." }, "Information/500": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Blue/500" }, "Brand 2": { "reference": "Brand/Blue/500" } }, "scopes": [], "description": "Reusable Information alias. Prefer a Mapped usage role where one exists." }, "Information/600": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Blue/600" }, "Brand 2": { "reference": "Brand/Blue/600" } }, "scopes": [], "description": "Reusable Information alias. Prefer a Mapped usage role where one exists." }, "Information/700": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Blue/700" }, "Brand 2": { "reference": "Brand/Blue/700" } }, "scopes": [], "description": "Reusable Information alias. Prefer a Mapped usage role where one exists." }, "Information/800": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Blue/800" }, "Brand 2": { "reference": "Brand/Blue/800" } }, "scopes": [], "description": "Reusable Information alias. Prefer a Mapped usage role where one exists." }, "Border Width/none": { "type": "number", "modes": { "Brand 1": { "reference": "Brand/Scale/0" }, "Brand 2": { "reference": "Brand/Scale/0" } }, "scopes": [ "STROKE_FLOAT" ], "description": "Reusable Border Width alias. Prefer a Mapped usage role where one exists." }, "Border Width/sm": { "type": "number", "modes": { "Brand 1": { "reference": "Brand/Scale/25" }, "Brand 2": { "reference": "Brand/Scale/25" } }, "scopes": [ "STROKE_FLOAT" ], "description": "Reusable Border Width alias. Prefer a Mapped usage role where one exists." }, "Border Width/md": { "type": "number", "modes": { "Brand 1": { "reference": "Brand/Scale/50" }, "Brand 2": { "reference": "Brand/Scale/50" } }, "scopes": [ "STROKE_FLOAT" ], "description": "Reusable Border Width alias. Prefer a Mapped usage role where one exists." }, "Border Width/lg": { "type": "number", "modes": { "Brand 1": { "reference": "Brand/Scale/100" }, "Brand 2": { "reference": "Brand/Scale/100" } }, "scopes": [ "STROKE_FLOAT" ], "description": "Reusable Border Width alias. Prefer a Mapped usage role where one exists." }, "Border Radius/none": { "type": "number", "modes": { "Brand 1": { "reference": "Brand/Scale/0" }, "Brand 2": { "reference": "Brand/Scale/0" } }, "scopes": [ "CORNER_RADIUS" ], "description": "Reusable Border Radius alias. Prefer a Mapped usage role where one exists." }, "Border Radius/sm": { "type": "number", "modes": { "Brand 1": { "reference": "Brand/Scale/50" }, "Brand 2": { "reference": "Brand/Scale/50" } }, "scopes": [ "CORNER_RADIUS" ], "description": "Reusable Border Radius alias. Prefer a Mapped usage role where one exists." }, "Border Radius/md": { "type": "number", "modes": { "Brand 1": { "reference": "Brand/Scale/100" }, "Brand 2": { "reference": "Brand/Scale/100" } }, "scopes": [ "CORNER_RADIUS" ], "description": "Reusable Border Radius alias. Prefer a Mapped usage role where one exists." }, "Border Radius/lg": { "type": "number", "modes": { "Brand 1": { "reference": "Brand/Scale/200" }, "Brand 2": { "reference": "Brand/Scale/200" } }, "scopes": [ "CORNER_RADIUS" ], "description": "Reusable Border Radius alias. Prefer a Mapped usage role where one exists." }, "Primary/900": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Purple/900" }, "Brand 2": { "reference": "Brand/Red/900" } }, "scopes": [], "description": "Brand accent alias: purple in Brand 1, red in Brand 2. Components normally use Mapped action roles." }, "Primary/950": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Purple/950" }, "Brand 2": { "reference": "Brand/Red/950" } }, "scopes": [], "description": "Brand accent alias: purple in Brand 1, red in Brand 2. Components normally use Mapped action roles." }, "Error/900": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Red/900" }, "Brand 2": { "reference": "Brand/Red/900" } }, "scopes": [], "description": "Reusable Error alias. Prefer a Mapped usage role where one exists." }, "Error/950": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Red/950" }, "Brand 2": { "reference": "Brand/Red/950" } }, "scopes": [], "description": "Reusable Error alias. Prefer a Mapped usage role where one exists." }, "Success/900": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Green/900" }, "Brand 2": { "reference": "Brand/Green/900" } }, "scopes": [], "description": "Reusable Success alias. Prefer a Mapped usage role where one exists." }, "Success/950": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Green/950" }, "Brand 2": { "reference": "Brand/Green/950" } }, "scopes": [], "description": "Reusable Success alias. Prefer a Mapped usage role where one exists." }, "Neutral/900": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Grey/900" }, "Brand 2": { "reference": "Brand/Grey/900" } }, "scopes": [], "description": "Reusable Neutral alias. Prefer a Mapped usage role where one exists." }, "Neutral/950": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Grey/950" }, "Brand 2": { "reference": "Brand/Grey/950" } }, "scopes": [], "description": "Reusable Neutral alias. Prefer a Mapped usage role where one exists." }, "Warning/900": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Orange/900" }, "Brand 2": { "reference": "Brand/Orange/900" } }, "scopes": [], "description": "Reusable Warning alias. Prefer a Mapped usage role where one exists." }, "Warning/950": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Orange/950" }, "Brand 2": { "reference": "Brand/Orange/950" } }, "scopes": [], "description": "Reusable Warning alias. Prefer a Mapped usage role where one exists." }, "Information/900": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Blue/900" }, "Brand 2": { "reference": "Brand/Blue/900" } }, "scopes": [], "description": "Reusable Information alias. Prefer a Mapped usage role where one exists." }, "Information/950": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Blue/950" }, "Brand 2": { "reference": "Brand/Blue/950" } }, "scopes": [], "description": "Reusable Information alias. Prefer a Mapped usage role where one exists." }, "Foundation/White": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Foundation/white" }, "Brand 2": { "reference": "Brand/Foundation/white" } }, "scopes": [], "description": "Reusable Foundation alias. Prefer a Mapped usage role where one exists." }, "Foundation/Black": { "type": "color", "modes": { "Brand 1": { "reference": "Brand/Foundation/black" }, "Brand 2": { "reference": "Brand/Foundation/black" } }, "scopes": [], "description": "Reusable Foundation alias. Prefer a Mapped usage role where one exists." }, "Font family/Heading": { "type": "string", "modes": { "Brand 1": { "reference": "Brand/Font family/Headings" }, "Brand 2": "Roboto" }, "scopes": [ "FONT_FAMILY" ], "description": "Typeface choice for heading. Resolved independently for Brand 1 and Brand 2." }, "Font family/Body": { "type": "string", "modes": { "Brand 1": "Roboto", "Brand 2": { "reference": "Brand/Font family/Body" } }, "scopes": [ "FONT_FAMILY" ], "description": "Typeface choice for body. Resolved independently for Brand 1 and Brand 2." }, "Border Radius/xl": { "type": "number", "modes": { "Brand 1": { "reference": "Brand/Scale/300" }, "Brand 2": { "reference": "Brand/Scale/300" } }, "scopes": [ "CORNER_RADIUS" ], "description": "Reusable Border Radius alias. Prefer a Mapped usage role where one exists." }, "Font weight/Heading semibold": { "type": "string", "modes": { "Brand 1": "Semi Bold", "Brand 2": "SemiBold" }, "scopes": [ "FONT_STYLE" ], "description": "Family-specific semibold style spelling for heading text across brand modes." }, "Font weight/Body semibold": { "type": "string", "modes": { "Brand 1": "SemiBold", "Brand 2": "Semi Bold" }, "scopes": [ "FONT_STYLE" ], "description": "Family-specific semibold style spelling for body text across brand modes." } } }, { "name": "Mapped", "modes": [ "Light", "Dark" ], "tokens": { "Text/headings": { "type": "color", "modes": { "Light": { "reference": "Alias/Neutral/900" }, "Dark": { "reference": "Alias/Neutral/50" } }, "scopes": [ "TEXT_FILL" ], "description": "Headings on page and neutral surfaces. Use a heading text style for size and weight." }, "Text/body": { "type": "color", "modes": { "Light": { "reference": "Alias/Neutral/700" }, "Dark": { "reference": "Alias/Neutral/100" } }, "scopes": [ "TEXT_FILL" ], "description": "Primary reading text, input values and control labels on neutral surfaces." }, "Text/action": { "type": "color", "modes": { "Light": { "reference": "Alias/Primary/600" }, "Dark": { "reference": "Alias/Primary/400" } }, "scopes": [ "TEXT_FILL" ], "description": "Text for outlined or transparent actions and links. Do not use for error messages." }, "Text/action-hover": { "type": "color", "modes": { "Light": { "reference": "Alias/Primary/700" }, "Dark": { "reference": "Alias/Primary/300" } }, "scopes": [ "TEXT_FILL" ], "description": "Hover text for outlined or transparent actions. Keep the corresponding hover surface." }, "Text/disabled": { "type": "color", "modes": { "Light": { "reference": "Alias/Neutral/300" }, "Dark": { "reference": "Alias/Neutral/700" } }, "scopes": [ "TEXT_FILL" ], "description": "Text on inactive controls. Explain an unavailable action when the reason is not obvious." }, "Text/information": { "type": "color", "modes": { "Light": { "reference": "Alias/Information/700" }, "Dark": { "reference": "Alias/Information/200" } }, "scopes": [ "TEXT_FILL" ], "description": "Text for information feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Text/warning": { "type": "color", "modes": { "Light": { "reference": "Alias/Warning/700" }, "Dark": { "reference": "Alias/Warning/200" } }, "scopes": [ "TEXT_FILL" ], "description": "Text for warning feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Text/success": { "type": "color", "modes": { "Light": { "reference": "Alias/Success/700" }, "Dark": { "reference": "Alias/Success/200" } }, "scopes": [ "TEXT_FILL" ], "description": "Text for success feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Text/error": { "type": "color", "modes": { "Light": { "reference": "Alias/Error/700" }, "Dark": { "reference": "Alias/Error/200" } }, "scopes": [ "TEXT_FILL" ], "description": "Text for error feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Text/on-action": { "type": "color", "modes": { "Light": { "reference": "Brand/Foundation/white" }, "Dark": { "reference": "Brand/Foundation/black" } }, "scopes": [ "TEXT_FILL" ], "description": "Label on the filled action surface. Pair with Surface/action." }, "Surface/page": { "type": "color", "modes": { "Light": { "reference": "Brand/Foundation/white" }, "Dark": { "reference": "Brand/Foundation/black" } }, "scopes": [ "ALL_FILLS", "EFFECT_COLOR" ], "description": "Canvas behind the interface. Select theme at the enclosing frame." }, "Surface/default-secondary": { "type": "color", "modes": { "Light": { "reference": "Brand/Foundation/white" }, "Dark": { "reference": "Brand/Foundation/black" } }, "scopes": [ "ALL_FILLS", "EFFECT_COLOR" ], "description": "Neutral control or panel surface. Input fields use this surface." }, "Surface/action": { "type": "color", "modes": { "Light": { "reference": "Alias/Primary/600" }, "Dark": { "reference": "Alias/Primary/400" } }, "scopes": [ "ALL_FILLS", "EFFECT_COLOR" ], "description": "Filled primary action. Pair with Text/on-action; never use as an error surface." }, "Surface/action-hover": { "type": "color", "modes": { "Light": { "reference": "Alias/Primary/700" }, "Dark": { "reference": "Alias/Primary/300" } }, "scopes": [ "ALL_FILLS", "EFFECT_COLOR" ], "description": "Hover fill for a primary action. Pair with Text/on-action-hover." }, "Surface/warning": { "type": "color", "modes": { "Light": { "reference": "Alias/Warning/50" }, "Dark": { "reference": "Alias/Warning/800" } }, "scopes": [ "ALL_FILLS", "EFFECT_COLOR" ], "description": "Surface for warning feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Surface/information": { "type": "color", "modes": { "Light": { "reference": "Alias/Information/50" }, "Dark": { "reference": "Alias/Information/800" } }, "scopes": [ "ALL_FILLS", "EFFECT_COLOR" ], "description": "Surface for information feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Surface/error": { "type": "color", "modes": { "Light": { "reference": "Alias/Error/50" }, "Dark": { "reference": "Alias/Error/800" } }, "scopes": [ "ALL_FILLS", "EFFECT_COLOR" ], "description": "Surface for error feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Surface/success": { "type": "color", "modes": { "Light": { "reference": "Alias/Success/50" }, "Dark": { "reference": "Alias/Success/800" } }, "scopes": [ "ALL_FILLS", "EFFECT_COLOR" ], "description": "Surface for success feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Border/default": { "type": "color", "modes": { "Light": { "reference": "Alias/Neutral/400" }, "Dark": { "reference": "Alias/Neutral/400" } }, "scopes": [ "STROKE_COLOR" ], "description": "Visible boundary for controls on neutral surfaces." }, "Border/success": { "type": "color", "modes": { "Light": { "reference": "Alias/Success/600" }, "Dark": { "reference": "Alias/Success/200" } }, "scopes": [ "STROKE_COLOR" ], "description": "Border for success feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Border/information": { "type": "color", "modes": { "Light": { "reference": "Alias/Information/600" }, "Dark": { "reference": "Alias/Information/200" } }, "scopes": [ "STROKE_COLOR" ], "description": "Border for information feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Border/error": { "type": "color", "modes": { "Light": { "reference": "Alias/Error/600" }, "Dark": { "reference": "Alias/Error/200" } }, "scopes": [ "STROKE_COLOR" ], "description": "Border for error feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Border/warning": { "type": "color", "modes": { "Light": { "reference": "Alias/Warning/600" }, "Dark": { "reference": "Alias/Warning/200" } }, "scopes": [ "STROKE_COLOR" ], "description": "Border for warning feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Surface/disabled": { "type": "color", "modes": { "Light": { "reference": "Alias/Neutral/50" }, "Dark": { "reference": "Alias/Neutral/800" } }, "scopes": [ "ALL_FILLS", "EFFECT_COLOR" ], "description": "Inactive control fill. Neutral in both themes, with no success meaning." }, "Border/disabled": { "type": "color", "modes": { "Light": { "reference": "Alias/Neutral/200" }, "Dark": { "reference": "Alias/Neutral/600" } }, "scopes": [ "STROKE_COLOR" ], "description": "Inactive border treatment. Keep separate from validation feedback." }, "Border/action": { "type": "color", "modes": { "Light": { "reference": "Alias/Primary/600" }, "Dark": { "reference": "Alias/Primary/400" } }, "scopes": [ "STROKE_COLOR" ], "description": "Border for action state. Reuse this role instead of choosing a raw palette value." }, "Border/action-hover": { "type": "color", "modes": { "Light": { "reference": "Alias/Primary/700" }, "Dark": { "reference": "Alias/Primary/300" } }, "scopes": [ "STROKE_COLOR" ], "description": "Border for action-hover state. Reuse this role instead of choosing a raw palette value." }, "Border/focus": { "type": "color", "modes": { "Light": { "reference": "Alias/Primary/600" }, "Dark": { "reference": "Alias/Primary/400" } }, "scopes": [ "STROKE_COLOR" ], "description": "Focus indicator outside the control. Parent frames must allow its visual overflow." }, "Text/placeholder": { "type": "color", "modes": { "Light": { "reference": "Alias/Neutral/500" }, "Dark": { "reference": "Alias/Neutral/300" } }, "scopes": [ "TEXT_FILL" ], "description": "Example input text only. A placeholder never replaces the persistent field label." }, "Text/caption": { "type": "color", "modes": { "Light": { "reference": "Alias/Neutral/500" }, "Dark": { "reference": "Alias/Neutral/300" } }, "scopes": [ "TEXT_FILL" ], "description": "Secondary explanations and metadata on neutral surfaces. Keep meaningful text legible." }, "Text/on-action-hover": { "type": "color", "modes": { "Light": { "reference": "Brand/Foundation/white" }, "Dark": { "reference": "Brand/Foundation/black" } }, "scopes": [ "TEXT_FILL" ], "description": "Label on the filled hover surface. Pair with Surface/action-hover." }, "Icon/default": { "type": "color", "modes": { "Light": { "reference": "Alias/Neutral/700" }, "Dark": { "reference": "Alias/Neutral/100" } }, "scopes": [ "SHAPE_FILL", "STROKE_COLOR" ], "description": "Icon for default state. Reuse this role instead of choosing a raw palette value." }, "Icon/placeholder": { "type": "color", "modes": { "Light": { "reference": "Alias/Neutral/500" }, "Dark": { "reference": "Alias/Neutral/300" } }, "scopes": [ "SHAPE_FILL", "STROKE_COLOR" ], "description": "Icon for placeholder state. Reuse this role instead of choosing a raw palette value." }, "Icon/action": { "type": "color", "modes": { "Light": { "reference": "Alias/Primary/600" }, "Dark": { "reference": "Alias/Primary/400" } }, "scopes": [ "SHAPE_FILL", "STROKE_COLOR" ], "description": "Icon for action state. Reuse this role instead of choosing a raw palette value." }, "Icon/on-action": { "type": "color", "modes": { "Light": { "reference": "Brand/Foundation/white" }, "Dark": { "reference": "Brand/Foundation/black" } }, "scopes": [ "SHAPE_FILL", "STROKE_COLOR" ], "description": "Icon for on-action state. Reuse this role instead of choosing a raw palette value." }, "Icon/action-hover": { "type": "color", "modes": { "Light": { "reference": "Alias/Primary/700" }, "Dark": { "reference": "Alias/Primary/300" } }, "scopes": [ "SHAPE_FILL", "STROKE_COLOR" ], "description": "Icon for action-hover state. Reuse this role instead of choosing a raw palette value." }, "Icon/on-action-hover": { "type": "color", "modes": { "Light": { "reference": "Brand/Foundation/white" }, "Dark": { "reference": "Brand/Foundation/black" } }, "scopes": [ "SHAPE_FILL", "STROKE_COLOR" ], "description": "Icon for on-action-hover state. Reuse this role instead of choosing a raw palette value." }, "Icon/disabled": { "type": "color", "modes": { "Light": { "reference": "Alias/Neutral/300" }, "Dark": { "reference": "Alias/Neutral/700" } }, "scopes": [ "SHAPE_FILL", "STROKE_COLOR" ], "description": "Inactive icon treatment. Keep separate from validation feedback." }, "Icon/information": { "type": "color", "modes": { "Light": { "reference": "Alias/Information/600" }, "Dark": { "reference": "Alias/Information/200" } }, "scopes": [ "SHAPE_FILL", "STROKE_COLOR" ], "description": "Icon for information feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Icon/warning": { "type": "color", "modes": { "Light": { "reference": "Alias/Warning/600" }, "Dark": { "reference": "Alias/Warning/200" } }, "scopes": [ "SHAPE_FILL", "STROKE_COLOR" ], "description": "Icon for warning feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Icon/success": { "type": "color", "modes": { "Light": { "reference": "Alias/Success/600" }, "Dark": { "reference": "Alias/Success/200" } }, "scopes": [ "SHAPE_FILL", "STROKE_COLOR" ], "description": "Icon for success feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Icon/error": { "type": "color", "modes": { "Light": { "reference": "Alias/Error/600" }, "Dark": { "reference": "Alias/Error/200" } }, "scopes": [ "SHAPE_FILL", "STROKE_COLOR" ], "description": "Icon for error feedback. Pair status color with a label or icon; color alone does not explain the state." }, "Surface/default": { "type": "color", "modes": { "Light": { "reference": "Alias/Neutral/50" }, "Dark": { "reference": "Alias/Neutral/950" } }, "scopes": [ "ALL_FILLS", "EFFECT_COLOR" ], "description": "Subtle neutral grouping surface, such as a settings section." }, "Surface/action-hover-bg": { "type": "color", "modes": { "Light": { "reference": "Alias/Primary/100" }, "Dark": { "reference": "Alias/Primary/800" } }, "scopes": [ "ALL_FILLS", "EFFECT_COLOR" ], "description": "Subtle hover background for outlined and transparent actions." } } }, { "name": "Responsive", "modes": [ "Desktop", "Mobile" ], "tokens": { "h1/font size": { "type": "number", "modes": { "Desktop": 60, "Mobile": 48 }, "scopes": [ "FONT_SIZE" ], "description": "Typography value in pixels for h1/font size. Select Desktop or Mobile on the enclosing frame." }, "h1/line height": { "type": "number", "modes": { "Desktop": 72, "Mobile": 56 }, "scopes": [ "LINE_HEIGHT" ], "description": "Typography value in pixels for h1/line height. Select Desktop or Mobile on the enclosing frame." }, "h1/paragraph spacing": { "type": "number", "modes": { "Desktop": 64, "Mobile": 64 }, "scopes": [ "PARAGRAPH_SPACING" ], "description": "Typography value in pixels for h1/paragraph spacing. Select Desktop or Mobile on the enclosing frame." }, "h2/font size": { "type": "number", "modes": { "Desktop": 48, "Mobile": 40 }, "scopes": [ "FONT_SIZE" ], "description": "Typography value in pixels for h2/font size. Select Desktop or Mobile on the enclosing frame." }, "h2/line height": { "type": "number", "modes": { "Desktop": 56, "Mobile": 48 }, "scopes": [ "LINE_HEIGHT" ], "description": "Typography value in pixels for h2/line height. Select Desktop or Mobile on the enclosing frame." }, "h2/paragraph spacing": { "type": "number", "modes": { "Desktop": 48, "Mobile": 48 }, "scopes": [ "PARAGRAPH_SPACING" ], "description": "Typography value in pixels for h2/paragraph spacing. Select Desktop or Mobile on the enclosing frame." }, "h3/font size": { "type": "number", "modes": { "Desktop": 40, "Mobile": 32 }, "scopes": [ "FONT_SIZE" ], "description": "Typography value in pixels for h3/font size. Select Desktop or Mobile on the enclosing frame." }, "h3/line height": { "type": "number", "modes": { "Desktop": 48, "Mobile": 40 }, "scopes": [ "LINE_HEIGHT" ], "description": "Typography value in pixels for h3/line height. Select Desktop or Mobile on the enclosing frame." }, "h3/paragraph spacing": { "type": "number", "modes": { "Desktop": 32, "Mobile": 32 }, "scopes": [ "PARAGRAPH_SPACING" ], "description": "Typography value in pixels for h3/paragraph spacing. Select Desktop or Mobile on the enclosing frame." }, "h4/font size": { "type": "number", "modes": { "Desktop": 32, "Mobile": 28 }, "scopes": [ "FONT_SIZE" ], "description": "Typography value in pixels for h4/font size. Select Desktop or Mobile on the enclosing frame." }, "h4/line height": { "type": "number", "modes": { "Desktop": 40, "Mobile": 32 }, "scopes": [ "LINE_HEIGHT" ], "description": "Typography value in pixels for h4/line height. Select Desktop or Mobile on the enclosing frame." }, "h4/paragraph spacing": { "type": "number", "modes": { "Desktop": 24, "Mobile": 24 }, "scopes": [ "PARAGRAPH_SPACING" ], "description": "Typography value in pixels for h4/paragraph spacing. Select Desktop or Mobile on the enclosing frame." }, "h5/font size": { "type": "number", "modes": { "Desktop": 24, "Mobile": 24 }, "scopes": [ "FONT_SIZE" ], "description": "Typography value in pixels for h5/font size. Select Desktop or Mobile on the enclosing frame." }, "h5/line height": { "type": "number", "modes": { "Desktop": 28, "Mobile": 28 }, "scopes": [ "LINE_HEIGHT" ], "description": "Typography value in pixels for h5/line height. Select Desktop or Mobile on the enclosing frame." }, "h5/paragraph spacing": { "type": "number", "modes": { "Desktop": 20, "Mobile": 20 }, "scopes": [ "PARAGRAPH_SPACING" ], "description": "Typography value in pixels for h5/paragraph spacing. Select Desktop or Mobile on the enclosing frame." }, "h6/font size": { "type": "number", "modes": { "Desktop": 20, "Mobile": 20 }, "scopes": [ "FONT_SIZE" ], "description": "Typography value in pixels for h6/font size. Select Desktop or Mobile on the enclosing frame." }, "h6/line height": { "type": "number", "modes": { "Desktop": 24, "Mobile": 24 }, "scopes": [ "LINE_HEIGHT" ], "description": "Typography value in pixels for h6/line height. Select Desktop or Mobile on the enclosing frame." }, "h6/paragraph spacing": { "type": "number", "modes": { "Desktop": 20, "Mobile": 20 }, "scopes": [ "PARAGRAPH_SPACING" ], "description": "Typography value in pixels for h6/paragraph spacing. Select Desktop or Mobile on the enclosing frame." }, "paragraph xsm/font size": { "type": "number", "modes": { "Desktop": 12, "Mobile": 12 }, "scopes": [ "FONT_SIZE" ], "description": "Typography value in pixels for paragraph xsm/font size. Select Desktop or Mobile on the enclosing frame." }, "paragraph xsm/line height": { "type": "number", "modes": { "Desktop": 16, "Mobile": 16 }, "scopes": [ "LINE_HEIGHT" ], "description": "Typography value in pixels for paragraph xsm/line height. Select Desktop or Mobile on the enclosing frame." }, "paragraph xsm/paragraph spacing": { "type": "number", "modes": { "Desktop": 20, "Mobile": 20 }, "scopes": [ "PARAGRAPH_SPACING" ], "description": "Typography value in pixels for paragraph xsm/paragraph spacing. Select Desktop or Mobile on the enclosing frame." }, "paragraph sm/font size": { "type": "number", "modes": { "Desktop": 14, "Mobile": 14 }, "scopes": [ "FONT_SIZE" ], "description": "Typography value in pixels for paragraph sm/font size. Select Desktop or Mobile on the enclosing frame." }, "paragraph sm/line height": { "type": "number", "modes": { "Desktop": 16, "Mobile": 16 }, "scopes": [ "LINE_HEIGHT" ], "description": "Typography value in pixels for paragraph sm/line height. Select Desktop or Mobile on the enclosing frame." }, "paragraph sm/paragraph spacing": { "type": "number", "modes": { "Desktop": 20, "Mobile": 20 }, "scopes": [ "PARAGRAPH_SPACING" ], "description": "Typography value in pixels for paragraph sm/paragraph spacing. Select Desktop or Mobile on the enclosing frame." }, "paragraph md/font size": { "type": "number", "modes": { "Desktop": 16, "Mobile": 16 }, "scopes": [ "FONT_SIZE" ], "description": "Typography value in pixels for paragraph md/font size. Select Desktop or Mobile on the enclosing frame." }, "paragraph md/line height": { "type": "number", "modes": { "Desktop": 20, "Mobile": 20 }, "scopes": [ "LINE_HEIGHT" ], "description": "Typography value in pixels for paragraph md/line height. Select Desktop or Mobile on the enclosing frame." }, "paragraph md/paragraph spacing": { "type": "number", "modes": { "Desktop": 20, "Mobile": 20 }, "scopes": [ "PARAGRAPH_SPACING" ], "description": "Typography value in pixels for paragraph md/paragraph spacing. Select Desktop or Mobile on the enclosing frame." }, "paragraph lg/font size": { "type": "number", "modes": { "Desktop": 20, "Mobile": 20 }, "scopes": [ "FONT_SIZE" ], "description": "Typography value in pixels for paragraph lg/font size. Select Desktop or Mobile on the enclosing frame." }, "paragraph lg/line height": { "type": "number", "modes": { "Desktop": 24, "Mobile": 24 }, "scopes": [ "LINE_HEIGHT" ], "description": "Typography value in pixels for paragraph lg/line height. Select Desktop or Mobile on the enclosing frame." }, "paragraph lg/paragraph spacing": { "type": "number", "modes": { "Desktop": 20, "Mobile": 20 }, "scopes": [ "PARAGRAPH_SPACING" ], "description": "Typography value in pixels for paragraph lg/paragraph spacing. Select Desktop or Mobile on the enclosing frame." }, "Device Size": { "type": "number", "modes": { "Desktop": 1440, "Mobile": 440 }, "scopes": [ "WIDTH_HEIGHT" ], "description": "Reference canvas width in pixels. Selecting this mode does not implement responsive browser breakpoints." } } } ] }