[{"data":1,"prerenderedAt":1065},["ShallowReactive",2],{"page:\u002Fdesign-system\u002Ftokens":3},{"id":4,"title":5,"body":6,"description":1057,"extension":1058,"meta":1059,"navigation":1060,"path":1061,"seo":1062,"stem":1063,"__hash__":1064},"pages\u002Fdesign-system\u002Ftokens.md","Tokens",{"type":7,"value":8,"toc":1049},"minimark",[9,14,33,48,466,487,491,516,651,664,668,678,851,940,959,963],[10,11,13],"h2",{"id":12},"color-tokens","Color tokens",[15,16,17,18,22,23,26,27,32],"p",{},"Components use tokens, never a hex or a scale step. A token is a role (",[19,20,21],"code",{},"surfaceContainer",", ",[19,24,25],{},"onPrimary","), and it points to a step on one of the scales on the ",[28,29,31],"a",{"href":30},"\u002Fidentity\u002Fcolor","color page",". Change the step, and every component that uses the token follows.",[15,34,35,36,39,40,43,44,47],{},"The names follow Material 3. In the app they live in the ",[19,37,38],{},"simplepark_design"," package: the standard roles in ",[19,41,42],{},"SPColorScheme",", the extra surfaces in ",[19,45,46],{},"SPColorExtension",".",[49,50,51,67],"table",{},[52,53,54],"thead",{},[55,56,57,61,64],"tr",{},[58,59,60],"th",{},"Token",[58,62,63],{},"Points to",[58,65,66],{},"Use it for",[68,69,70,84,96,108,120,133,145,158,170,182,194,207,219,232,244,257,270,292,304,320,336,352,368,384,400,416,428,440,453],"tbody",{},[55,71,72,78,81],{},[73,74,75],"td",{},[19,76,77],{},"primary",[73,79,80],{},"primary 500",[73,82,83],{},"The main action, the brand blue",[55,85,86,90,93],{},[73,87,88],{},[19,89,25],{},[73,91,92],{},"white",[73,94,95],{},"Text and icons on primary",[55,97,98,103,105],{},[73,99,100],{},[19,101,102],{},"primaryContainer",[73,104,80],{},[73,106,107],{},"Filled brand containers",[55,109,110,115,117],{},[73,111,112],{},[19,113,114],{},"onPrimaryContainer",[73,116,92],{},[73,118,119],{},"Text on a primary container",[55,121,122,127,130],{},[73,123,124],{},[19,125,126],{},"secondary",[73,128,129],{},"secondary 1000",[73,131,132],{},"Navy surfaces and secondary actions",[55,134,135,140,142],{},[73,136,137],{},[19,138,139],{},"onSecondary",[73,141,92],{},[73,143,144],{},"Text and icons on secondary",[55,146,147,152,155],{},[73,148,149],{},[19,150,151],{},"tertiary",[73,153,154],{},"primary 100",[73,156,157],{},"Light blue tints, selected states",[55,159,160,165,167],{},[73,161,162],{},[19,163,164],{},"onTertiary",[73,166,129],{},[73,168,169],{},"Text on tertiary",[55,171,172,177,179],{},[73,173,174],{},[19,175,176],{},"surface",[73,178,92],{},[73,180,181],{},"The background of a screen",[55,183,184,189,191],{},[73,185,186],{},[19,187,188],{},"onSurface",[73,190,129],{},[73,192,193],{},"Everything you read",[55,195,196,201,204],{},[73,197,198],{},[19,199,200],{},"onSurfaceVariant",[73,202,203],{},"grey 500",[73,205,206],{},"Hints and placeholders",[55,208,209,214,216],{},[73,210,211],{},[19,212,213],{},"surfaceContainerLowest",[73,215,92],{},[73,217,218],{},"A container that sits flat on the surface",[55,220,221,226,229],{},[73,222,223],{},[19,224,225],{},"surfaceContainerLow",[73,227,228],{},"grey 50",[73,230,231],{},"A quiet container",[55,233,234,238,241],{},[73,235,236],{},[19,237,21],{},[73,239,240],{},"grey 100",[73,242,243],{},"The default card and field",[55,245,246,251,254],{},[73,247,248],{},[19,249,250],{},"surfaceContainerHigh",[73,252,253],{},"grey 200",[73,255,256],{},"A container that stands out",[55,258,259,264,267],{},[73,260,261],{},[19,262,263],{},"surfaceContainerHighest",[73,265,266],{},"grey 300",[73,268,269],{},"The most set-apart container",[55,271,272,281,284],{},[73,273,274,277,278],{},[19,275,276],{},"onSurfaceContainerLowest"," to ",[19,279,280],{},"onSurfaceContainerHigh",[73,282,283],{},"grey 400 to grey 700",[73,285,286,287,291],{},"Secondary text in the matching container. Grey 400 and 500 are below 4.5 : 1, so they never carry information (see ",[28,288,290],{"href":289},"\u002Fidentity\u002Fcolor#text-on-color","text on color",")",[55,293,294,299,301],{},[73,295,296],{},[19,297,298],{},"onSurfaceContainerHighest",[73,300,129],{},[73,302,303],{},"Text in the highest container",[55,305,306,314,317],{},[73,307,308,22,311],{},[19,309,310],{},"primarySurface",[19,312,313],{},"primarySurfaceContainer",[73,315,316],{},"primary 500, info background",[73,318,319],{},"Brand blocks, strong and light",[55,321,322,330,333],{},[73,323,324,22,327],{},[19,325,326],{},"secondarySurface",[19,328,329],{},"secondarySurfaceContainer",[73,331,332],{},"secondary 1000, secondary 1000 at 7%",[73,334,335],{},"Navy blocks, strong and light",[55,337,338,346,349],{},[73,339,340,22,343],{},[19,341,342],{},"successSurface",[19,344,345],{},"successSurfaceContainer",[73,347,348],{},"success, success background",[73,350,351],{},"Success, strong and light",[55,353,354,362,365],{},[73,355,356,22,359],{},[19,357,358],{},"warningSurface",[19,360,361],{},"warningSurfaceContainer",[73,363,364],{},"warning, warning background",[73,366,367],{},"Warnings, strong and light",[55,369,370,378,381],{},[73,371,372,22,375],{},[19,373,374],{},"errorSurface",[19,376,377],{},"errorSurfaceContainer",[73,379,380],{},"error, error background",[73,382,383],{},"Errors, strong and light",[55,385,386,394,397],{},[73,387,388,22,391],{},[19,389,390],{},"infoSurface",[19,392,393],{},"infoSurfaceContainer",[73,395,396],{},"grey 500, grey 100",[73,398,399],{},"Neutral information",[55,401,402,410,413],{},[73,403,404,22,407],{},[19,405,406],{},"disabledSurface",[19,408,409],{},"disabledSurfaceContainer",[73,411,412],{},"disabled, grey 50",[73,414,415],{},"Disabled controls",[55,417,418,423,425],{},[73,419,420],{},[19,421,422],{},"outline",[73,424,253],{},[73,426,427],{},"Borders",[55,429,430,435,437],{},[73,431,432],{},[19,433,434],{},"outlineVariant",[73,436,240],{},[73,438,439],{},"Dividers",[55,441,442,447,450],{},[73,443,444],{},[19,445,446],{},"scrim",[73,448,449],{},"black at 40%",[73,451,452],{},"Behind a sheet or dialog",[55,454,455,460,463],{},[73,456,457],{},[19,458,459],{},"shadow",[73,461,462],{},"black at 12%",[73,464,465],{},"Elevation",[15,467,468,469,472,473,476,477,480,481,484,485,47],{},"Every ",[19,470,471],{},"…Surface"," token has an ",[19,474,475],{},"…OnSurface"," partner for the text on it, and every ",[19,478,479],{},"…SurfaceContainer"," an ",[19,482,483],{},"…OnSurfaceContainer",". Which pairs are readable is on the ",[28,486,31],{"href":289},[10,488,490],{"id":489},"type-tokens","Type tokens",[15,492,493,494,498,499,277,502,505,506,22,508,511,512,515],{},"The type tokens are the eighteen styles of the ",[28,495,497],{"href":496},"\u002Fidentity\u002Ftypography#type-scale","type scale",", from ",[19,500,501],{},"heroNumber",[19,503,504],{},"labelSm",". ",[19,507,501],{},[19,509,510],{},"displayXl"," and ",[19,513,514],{},"bodyXl"," are for the website only; the app uses the other fifteen. Each token sets the typeface, size, line height and weight together; never set one of them on its own.",[49,517,518,530],{},[52,519,520],{},[55,521,522,525,527],{},[58,523,524],{},"Group",[58,526,5],{},[58,528,529],{},"Typeface",[68,531,532,546,565,583,602,624,640],{},[55,533,534,537,543],{},[73,535,536],{},"Website display",[73,538,539,22,541],{},[19,540,501],{},[19,542,510],{},[73,544,545],{},"Poppins 600, website only",[55,547,548,551,562],{},[73,549,550],{},"Display",[73,552,553,22,556,22,559],{},[19,554,555],{},"displayLg",[19,557,558],{},"displayMd",[19,560,561],{},"displaySm",[73,563,564],{},"Poppins 600",[55,566,567,570,581],{},[73,568,569],{},"Headline",[73,571,572,22,575,22,578],{},[19,573,574],{},"headlineLg",[19,576,577],{},"headlineMd",[19,579,580],{},"headlineSm",[73,582,564],{},[55,584,585,588,599],{},[73,586,587],{},"Title",[73,589,590,22,593,22,596],{},[19,591,592],{},"titleLg",[19,594,595],{},"titleMd",[19,597,598],{},"titleSm",[73,600,601],{},"Poppins 500",[55,603,604,607,621],{},[73,605,606],{},"Body",[73,608,609,611,612,22,615,22,618],{},[19,610,514],{}," (website only), ",[19,613,614],{},"bodyLg",[19,616,617],{},"bodyMd",[19,619,620],{},"bodySm",[73,622,623],{},"Figtree 400",[55,625,626,629,637],{},[73,627,628],{},"Label",[73,630,631,22,634],{},[19,632,633],{},"labelLg",[19,635,636],{},"labelMd",[73,638,639],{},"Poppins 500, for buttons",[55,641,642,644,648],{},[73,643,628],{},[73,645,646],{},[19,647,504],{},[73,649,650],{},"Figtree 500, for tags and chips",[15,652,653,654,657,658,660,661,663],{},"Numbers use the body or label token of their place, with tabular figures on. In the app the tokens live in ",[19,655,656],{},"SPTypographyTokens"," in the ",[19,659,38],{}," package. Today the app sets every token in Poppins; body and ",[19,662,504],{}," still have to move to Figtree.",[10,665,667],{"id":666},"spacing-and-radius","Spacing and radius",[15,669,670,671,511,674,677],{},"Spacing and radius come from ",[19,672,673],{},"SPSpacingTokens",[19,675,676],{},"SPRadiusTokens",". Use the steps; never a number in between.",[49,679,680,692],{},[52,681,682],{},[55,683,684,687,690],{},[58,685,686],{},"Spacing token",[58,688,689],{},"Value",[58,691,66],{},[68,693,694,707,720,733,746,759,772,785,798,811,824,837],{},[55,695,696,701,704],{},[73,697,698],{},[19,699,700],{},"space4XS",[73,702,703],{},"2",[73,705,706],{},"Hairline gaps, between a label and its value",[55,708,709,714,717],{},[73,710,711],{},[19,712,713],{},"space3XS",[73,715,716],{},"4",[73,718,719],{},"Between an icon and its text",[55,721,722,727,730],{},[73,723,724],{},[19,725,726],{},"space2XS",[73,728,729],{},"6",[73,731,732],{},"Inside small parts: plate padding, tags",[55,734,735,740,743],{},[73,736,737],{},[19,738,739],{},"spaceXS",[73,741,742],{},"8",[73,744,745],{},"Between related items in a row",[55,747,748,753,756],{},[73,749,750],{},[19,751,752],{},"spaceM",[73,754,755],{},"12",[73,757,758],{},"Inside a field or a button, between list rows",[55,760,761,766,769],{},[73,762,763],{},[19,764,765],{},"spaceML",[73,767,768],{},"16",[73,770,771],{},"Between blocks in a card",[55,773,774,779,782],{},[73,775,776],{},[19,777,778],{},"spaceL",[73,780,781],{},"18",[73,783,784],{},"Card padding, top and bottom",[55,786,787,792,795],{},[73,788,789],{},[19,790,791],{},"spaceXL",[73,793,794],{},"20",[73,796,797],{},"Between a title and what sits next to it",[55,799,800,805,808],{},[73,801,802],{},[19,803,804],{},"space2XL",[73,806,807],{},"24",[73,809,810],{},"Card padding, left and right; screen margins",[55,812,813,818,821],{},[73,814,815],{},[19,816,817],{},"space3XL",[73,819,820],{},"30",[73,822,823],{},"Between sections on a screen",[55,825,826,831,834],{},[73,827,828],{},[19,829,830],{},"space4XL",[73,832,833],{},"36",[73,835,836],{},"Above a screen title",[55,838,839,845,848],{},[73,840,841,844],{},[19,842,843],{},"space5XL"," and up",[73,846,847],{},"48, 60, 72, 96, 120, 144, 192",[73,849,850],{},"Empty states and large layouts",[49,852,853,864],{},[52,854,855],{},[55,856,857,860,862],{},[58,858,859],{},"Radius token",[58,861,689],{},[58,863,66],{},[68,865,866,878,890,902,914,927],{},[55,867,868,873,875],{},[73,869,870],{},[19,871,872],{},"radiusXS",[73,874,716],{},[73,876,877],{},"The license plate, small tiles, bars",[55,879,880,885,887],{},[73,881,882],{},[19,883,884],{},"radiusS",[73,886,742],{},[73,888,889],{},"The zone sign, callouts, small boxes",[55,891,892,897,899],{},[73,893,894],{},[19,895,896],{},"radiusM",[73,898,755],{},[73,900,901],{},"Buttons, cards, fields, the parking card",[55,903,904,909,911],{},[73,905,906],{},[19,907,908],{},"radiusML",[73,910,768],{},[73,912,913],{},"Sheets and large panels",[55,915,916,921,924],{},[73,917,918],{},[19,919,920],{},"radiusLG",[73,922,923],{},"48",[73,925,926],{},"Round elements that need a fixed radius",[55,928,929,934,937],{},[73,930,931],{},[19,932,933],{},"radiusFull",[73,935,936],{},"9999",[73,938,939],{},"Status tags, chips and segmented controls. Never buttons.",[15,941,942,943,511,946,949,950,953,954,958],{},"In the app every radius is drawn as a smooth corner, a squircle, with ",[19,944,945],{},"SmoothRectangleBorder",[19,947,948],{},".spSmooth",". On the web and in email a plain ",[19,951,952],{},"border-radius"," is close enough. See ",[28,955,957],{"href":956},"\u002Fidentity\u002Fshapes","shapes"," for how the corners nest.",[10,960,962],{"id":961},"other-tokens","Other tokens",[49,964,965,976],{},[52,966,967],{},[55,968,969,971,973],{},[58,970,524],{},[58,972,5],{},[58,974,975],{},"Values",[68,977,978,992,1006,1019,1032],{},[55,979,980,983,989],{},[73,981,982],{},"Icon size",[73,984,985,988],{},[19,986,987],{},"SPIconTokens"," xs, sm, md, lg, xl, xxl",[73,990,991],{},"16, 18, 20, 24, 32, 36",[55,993,994,997,1003],{},[73,995,996],{},"Line width",[73,998,999,1002],{},[19,1000,1001],{},"SPLineWidthTokens"," sm, smPlus, md, lg, xl",[73,1004,1005],{},"1, 1.5, 2, 3, 4; dashes 4 on, 4 off",[55,1007,1008,1010,1016],{},[73,1009,465],{},[73,1011,1012,1015],{},[19,1013,1014],{},"SPElevationTokens"," none, low, med, high",[73,1017,1018],{},"0, 1, 3, 6",[55,1020,1021,1024,1029],{},[73,1022,1023],{},"Shadow",[73,1025,1026],{},[19,1027,1028],{},"SPShadowTokens.soft",[73,1030,1031],{},"Black at 4%, blur 12, no offset",[55,1033,1034,1037,1042],{},[73,1035,1036],{},"Motion",[73,1038,1039],{},[19,1040,1041],{},"SPAnimationTokens",[73,1043,1044,1045],{},"See ",[28,1046,1048],{"href":1047},"\u002Fidentity\u002Fmotion","motion",{"title":1050,"searchDepth":1051,"depth":1051,"links":1052},"",2,[1053,1054,1055,1056],{"id":12,"depth":1051,"text":13},{"id":489,"depth":1051,"text":490},{"id":666,"depth":1051,"text":667},{"id":961,"depth":1051,"text":962},"Color, type, spacing and radius as named values.","md",{},true,"\u002Fdesign-system\u002Ftokens",{"title":5,"description":1057},"design-system\u002Ftokens","lnujYXmK2Jxqw9tiGvF4v-hTWrzMmHv_1qZ3z4BfJeI",1792779480803]