[{"data":1,"prerenderedAt":151},["ShallowReactive",2],{"page:\u002Fidentity\u002Fshapes":3},{"id":4,"title":5,"body":6,"description":143,"extension":144,"meta":145,"navigation":146,"path":147,"seo":148,"stem":149,"__hash__":150},"pages\u002Fidentity\u002Fshapes.md","Shapes",{"type":7,"value":8,"toc":135},"minimark",[9,14,23,27,44,48,51,54,94,98,101,104,108,111],[10,11,13],"h2",{"id":12},"corners","Corners",[15,16,17,18,22],"p",{},"Everything we make has soft corners, and the radius grows with the size of the thing. Small parts get a small radius, big surfaces a bigger one. The five steps are the radius tokens of the app, plus ",[19,20,21],"code",{},"radiusLG"," (48px) for the rare round element that needs a fixed radius; in the app they are drawn as smooth corners, a squircle, instead of a plain circle arc.",[24,25],"shape-radii",{":radii":26},"[{\"name\":\"XS\",\"radius\":\"4px\",\"use\":\"Tracks, bars and the license plate.\"},{\"name\":\"S\",\"radius\":\"8px\",\"use\":\"Callouts, small boxes and tiles inside a card.\"},{\"name\":\"M\",\"radius\":\"12px\",\"use\":\"Buttons, cards, fields, banners and glass panels.\"},{\"name\":\"ML\",\"radius\":\"16px\",\"use\":\"Big panels, sheets, lock screens and live activities.\"},{\"name\":\"Full\",\"radius\":\"9999px\",\"use\":\"Status tags, chips and segmented controls. Never buttons.\"}]",[28,29,30,38],"ul",{},[31,32,33,37],"li",{},[34,35,36],"strong",{},"Nested corners get smaller."," A card at 12px holds tiles at 8px and bars at 4px, so the inner curve follows the outer one.",[31,39,40,43],{},[34,41,42],{},"No sharp corners",", also not on images. Photos in a card take the card's radius.",[10,45,47],{"id":46},"buttons-and-pills","Buttons and pills",[15,49,50],{},"Buttons have 12px corners, in the app, on the website and in email. A pill is for what you read or pick, not for what you press: status tags, payment chips and the segmented control.",[52,53],"shape-pills",{},[28,55,56,70,76,88],{},[31,57,58,61,62,65,66,69],{},[34,59,60],{},"Solid blue"," is the main action, one per view. ",[34,63,64],{},"Outline"," is a secondary action, ",[34,67,68],{},"dark"," is for store and download buttons.",[31,71,72,75],{},[34,73,74],{},"Buttons are 44px high"," in the app and in email, 36px in a website header, with 16 to 24px of padding on each side.",[31,77,78,81,82,87],{},[34,79,80],{},"Status tags"," are the status text color on the status background, never a strong color with white. See ",[83,84,86],"a",{"href":85},"\u002Fidentity\u002Fcolor#status","status",".",[31,89,90,93],{},[34,91,92],{},"On a mesh",", chips are an outline in white at 25%, and the selected option of a segmented control is white with dark text.",[10,95,97],{"id":96},"materials","Materials",[15,99,100],{},"What we lay on top of a mesh surface. Glass lets the color through; the floating card sits above it with a soft shadow.",[102,103],"shape-materials",{},[10,105,107],{"id":106},"grain","Grain",[15,109,110],{},"Every mesh surface has a fine film grain on top: an SVG noise texture at 42% opacity, blend mode overlay. It takes the digital smoothness off the gradient and makes it feel printed. Grain goes on mesh surfaces only, never on flat colors, photos or the product UI.",[15,112,113,114,117,118,121,122,125,126,129,130,134],{},"In code, put ",[19,115,116],{},"sp-grain"," and one of ",[19,119,120],{},"sp-mesh-cool",", ",[19,123,124],{},"sp-mesh-warm"," or ",[19,127,128],{},"sp-mesh-deep"," on the element. The ",[83,131,133],{"href":132},"\u002Fidentity\u002Fcolor#gradients","gradients"," on the color page have the CSS of each mesh.",{"title":136,"searchDepth":137,"depth":137,"links":138},"",2,[139,140,141,142],{"id":12,"depth":137,"text":13},{"id":46,"depth":137,"text":47},{"id":96,"depth":137,"text":97},{"id":106,"depth":137,"text":107},"Corners, buttons, pills, glass and grain: the shapes our surfaces are made of.","md",{},true,"\u002Fidentity\u002Fshapes",{"title":5,"description":143},"identity\u002Fshapes","5P0GjskB2FLacAoGVEB7lmUKlozUB-ETSUPfS6-9Nto",1792779481014]