[{"data":1,"prerenderedAt":212},["ShallowReactive",2],{"page:\u002Fdesign-system":3},{"id":4,"title":5,"body":6,"description":204,"extension":205,"meta":206,"navigation":207,"path":208,"seo":209,"stem":210,"__hash__":211},"pages\u002Fdesign-system\u002Findex.md","Design system",{"type":7,"value":8,"toc":198},"minimark",[9,14,18,101,137,141],[10,11,13],"h2",{"id":12},"what-the-design-system-covers","What the design system covers",[15,16,17],"p",{},"The design system is the set of named values and components that every SimplePark screen is built from. It turns the brand into parts you can use without deciding again: which blue, how round, how far apart.",[19,20,21,37],"table",{},[22,23,24],"thead",{},[25,26,27,31,34],"tr",{},[28,29,30],"th",{},"Layer",[28,32,33],{},"What it is",[28,35,36],{},"Where it's described",[38,39,40,68,79],"tbody",{},[25,41,42,46,49],{},[43,44,45],"td",{},"Tokens",[43,47,48],{},"Named values for color, type, spacing, radius, elevation and motion",[43,50,51,55,56,55,60,55,64],{},[52,53,45],"a",{"href":54},"\u002Fdesign-system\u002Ftokens",", ",[52,57,59],{"href":58},"\u002Fidentity\u002Fcolor","color",[52,61,63],{"href":62},"\u002Fidentity\u002Ftypography","typography",[52,65,67],{"href":66},"\u002Fidentity\u002Fmotion","motion",[25,69,70,73,76],{},[43,71,72],{},"Components",[43,74,75],{},"The parts people recognize: buttons, the license plate, the zone sign, the parking card",[43,77,78],{},"The pages in this section",[25,80,81,84,87],{},[43,82,83],{},"Patterns",[43,85,86],{},"How the parts come together on a channel",[43,88,89,55,93,55,97],{},[52,90,92],{"href":91},"\u002Fapplications\u002Fwebsite","Website",[52,94,96],{"href":95},"\u002Fapplications\u002Femail","email",[52,98,100],{"href":99},"\u002Fapplications\u002Fsocial","social",[102,103,104,121,127],"ul",{},[105,106,107,111,112,116,117,120],"li",{},[108,109,110],"strong",{},"Tokens before values."," A component asks for ",[113,114,115],"code",{},"primary"," or ",[113,118,119],{},"radiusM",", never for a hex or a number. Change the token, and everything follows.",[105,122,123,126],{},[108,124,125],{},"One component, every channel."," The license plate looks the same in the app, on the website, in an email and on a poster.",[105,128,129,132,133,136],{},[108,130,131],{},"The app is the reference."," When the app and a page here disagree, the app's ",[113,134,135],{},"simplepark_design"," package wins, and this site gets fixed.",[10,138,140],{"id":139},"where-it-is-used","Where it is used",[19,142,143,153],{},[22,144,145],{},[25,146,147,150],{},[28,148,149],{},"Channel",[28,151,152],{},"Built with",[38,154,155,169,176,186],{},[25,156,157,160],{},[43,158,159],{},"App",[43,161,162,164,165,168],{},[113,163,135],{}," for the tokens and theme, ",[113,166,167],{},"simplepark_components"," for the widgets, in the simplepark-mobile-v2 repo",[25,170,171,173],{},[43,172,92],{},[43,174,175],{},"The tokens as CSS variables",[25,177,178,181],{},[43,179,180],{},"Email",[43,182,183,184],{},"The email parts, see ",[52,185,96],{"href":95},[25,187,188,191],{},[43,189,190],{},"Marketing",[43,192,193,194],{},"The components drawn as they are in the app, see ",[52,195,197],{"href":196},"\u002Fidentity\u002Fimagery","imagery",{"title":199,"searchDepth":200,"depth":200,"links":201},"",2,[202,203],{"id":12,"depth":200,"text":13},{"id":139,"depth":200,"text":140},"The shared foundations and components of SimplePark interfaces.","md",{},true,"\u002Fdesign-system",{"title":5,"description":204},"design-system\u002Findex","BtuepSAEBETeX_69rLTVcwQa3du8avxrbl2YcXnhaoY",1792779480563]