[{"data":1,"prerenderedAt":343},["ShallowReactive",2],{"page:\u002Fidentity\u002Felements":3},{"id":4,"title":5,"body":6,"description":335,"extension":336,"meta":337,"navigation":338,"path":339,"seo":340,"stem":341,"__hash__":342},"pages\u002Fidentity\u002Felements.md","Graphic elements",{"type":7,"value":8,"toc":323},"minimark",[9,14,18,21,50,54,65,70,91,163,193,197,228,232,235,238,288,316,320],[10,11,13],"h2",{"id":12},"the-product-is-the-element","The product is the element",[15,16,17],"p",{},"We don't add decoration. What people recognize as SimplePark is the app itself: the pin, the yellow license plate, the zone sign and the parking card. They are drawn exactly as in the app, with real-looking data, and they work on their own as graphics.",[19,20],"brand-elements",{},[22,23,24,38,44],"ul",{},[25,26,27,31,32,37],"li",{},[28,29,30],"strong",{},"As in the app."," Same shapes, colors and corners as the ",[33,34,36],"a",{"href":35},"\u002Fdesign-system","design system",". Never redrawn or simplified.",[25,39,40,43],{},[28,41,42],{},"Real-looking data",": a Dutch plate, a real zone code, a plausible time.",[25,45,46,49],{},[28,47,48],{},"One or two parts per picture."," The parking card already holds the plate and the zone.",[10,51,53],{"id":52},"the-idea-behind-the-mesh","The idea behind the mesh",[15,55,56,59,60,64],{},[28,57,58],{},"The mesh is what parking feels like when it has disappeared."," ",[33,61,63],{"href":62},"\u002Fbrand\u002Fstory#the-idea","Our idea"," is parking you don't have to think about, at a price you already know. The street is full of hard things: signs, lines, meters, zone codes, small print. The mesh is the opposite. It has no edges, no shapes and nothing to read, so it shows the calm that is left when the app has taken the chore away.",[66,67,69],"h3",{"id":68},"why-these-colors","Why these colors",[15,71,72,73,76,77,81,82,85,86,90],{},"The cool mesh reads the way ",[33,74,75],{"href":62},"our idea"," does: first ",[78,79,80],"em",{},"parking you don't have to think about",", then ",[78,83,84],{},"at a price you already know",". Those are also our two ",[33,87,89],{"href":88},"\u002Fbrand\u002Fvalues","values",", simple and fair. Every color in it is one of our two brand colors, lightened with white or mixed with the other. Nothing else is added.",[92,93,94,110],"table",{},[95,96,97],"thead",{},[98,99,100,104,107],"tr",{},[101,102,103],"th",{},"Color",[101,105,106],{},"Where it comes from",[101,108,109],{},"What it says",[111,112,113,125,136,147],"tbody",{},[98,114,115,119,122],{},[116,117,118],"td",{},"Pale blue",[116,120,121],{},"Primary 500 with a lot of white: the light blue most of our pages are made of",[116,123,124],{},"Air. Parking is off your mind. The mesh starts where the page already is, so a panel opens out of the page instead of sitting on it like a block.",[98,126,127,130,133],{},[116,128,129],{},"Blue",[116,131,132],{},"Primary 300 to 500",[116,134,135],{},"SimplePark. The color of the parking sign you look for, and of the app that takes over from there.",[98,137,138,141,144],{},[116,139,140],{},"Lilac",[116,142,143],{},"Where blue and orange overlap",[116,145,146],{},"The handover. Blue and orange are opposites, and a straight mix turns gray. We cross through lilac, so the middle stays clean and calm.",[98,148,149,152,155],{},[116,150,151],{},"Orange",[116,153,154],{},"Accent 300 to 500",[116,156,157,158,162],{},"The price you already know. ",[33,159,161],{"href":160},"\u002Fidentity\u002Fcolor#orange","The one thing to read first",", so the mesh ends there.",[22,164,165,176,182],{},[25,166,167,170,171,175],{},[28,168,169],{},"The same amounts as everywhere else."," Most of the mesh is light blue and blue, and orange gets only the end, as in our ",[33,172,174],{"href":173},"\u002Fidentity\u002Fcolor#proportions","proportions",": orange is the spark, not the fire.",[25,177,178,181],{},[28,179,180],{},"Always in that order."," The mesh runs from the top left to the bottom right, the way you read, so the eye ends where we do: at the price. Never the other way round.",[25,183,184,187,188,192],{},[28,185,186],{},"Why the light start."," The mesh used to start in full blue. That made it heavy, and a panel stood out from the page as a block. Starting in pale blue gives it air, and that air is the ",[33,189,191],{"href":190},"\u002Fbrand\u002Fpersonality","calm"," we promise: there when you need us, quiet when you don't.",[66,194,196],{"id":195},"how-we-use-it","How we use it",[22,198,199,205,211,217],{},[25,200,201,204],{},[28,202,203],{},"Soft, so the product can be sharp."," The mesh never competes with the parking card, the plate or the zone sign on top of it. All the detail sits in the product, all the mood in the mesh.",[25,206,207,210],{},[28,208,209],{},"Grain, so it feels made by people."," A smooth gradient looks like software. The film grain makes it look printed, like a poster on the street rather than a screen in a tech pitch. That is the warmth we mean: human and a little analog, never glossy.",[25,212,213,216],{},[28,214,215],{},"Three moods, one family."," The same colors in other amounts. Cool is the calm default. Warm gives orange the most room, for people and the dry wink. Deep sinks the blue into navy: the evening version, for money and business, where we want you to look at one fact.",[25,218,219,222,223,227],{},[28,220,221],{},"Only in marketing, never in the app."," In the app, parking has to be clear and flat, so you can act on it. The mesh is the feeling we promise around the product. On the website a control can sit on a mesh, like the segmented control of a calculator, and then follows the ",[33,224,226],{"href":225},"\u002Fidentity\u002Fshapes#buttons-and-pills","mesh rules for pills","; the app itself never has one.",[10,229,231],{"id":230},"the-mesh-panel","The mesh panel",[15,233,234],{},"The mesh is the backdrop, the product is the subject. A panel is one mesh with 16px corners and real product on top, centered and with a soft shadow, the way a painting hangs behind a window. Nothing else goes on the mesh: no shapes, no patterns, no second texture.",[236,237],"brand-panels",{},[92,239,240,253],{},[95,241,242],{},[98,243,244,247,250],{},[101,245,246],{},"Mesh",[101,248,249],{},"Use it for",[101,251,252],{},"On top",[111,254,255,266,277],{},[98,256,257,260,263],{},[116,258,259],{},"Cool",[116,261,262],{},"The default: heroes, feature panels, blog covers, posts",[116,264,265],{},"A product window or the phone",[98,267,268,271,274],{},[116,269,270],{},"Warm",[116,272,273],{},"People, reminders and the dry wink",[116,275,276],{},"The phone, or one card",[98,278,279,282,285],{},[116,280,281],{},"Deep",[116,283,284],{},"Prices, business and one big fact",[116,286,287],{},"The plate and the zone sign, or a number in white",[22,289,290,296,302,308],{},[25,291,292,295],{},[28,293,294],{},"Product first."," If there's no product on the panel, it's a background for one line of white type, like the closing call to action.",[25,297,298,301],{},[28,299,300],{},"Grain on every mesh",", nothing on the flat colors.",[25,303,304,307],{},[28,305,306],{},"Type sits next to the panel",", not on it, unless the panel is only a background.",[25,309,310,311,315],{},"The three meshes are on the ",[33,312,314],{"href":313},"\u002Fidentity\u002Fcolor#gradients","color page",".",[10,317,319],{"id":318},"what-we-dont-use","What we don't use",[15,321,322],{},"Dots, ribbons, hand-drawn arrows, decorative shapes and stock illustrations. If a picture feels empty, it needs a bigger product, not an extra element.",{"title":324,"searchDepth":325,"depth":325,"links":326},"",2,[327,328,333,334],{"id":12,"depth":325,"text":13},{"id":52,"depth":325,"text":53,"children":329},[330,332],{"id":68,"depth":331,"text":69},3,{"id":195,"depth":331,"text":196},{"id":230,"depth":325,"text":231},{"id":318,"depth":325,"text":319},"The product as the element, and the mesh behind it.","md",{},true,"\u002Fidentity\u002Felements",{"title":5,"description":335},"identity\u002Felements","T4-EUzLQHtsovldbJacV42UmNV06JbPNkVYGT0YYcUQ",1792779481015]