[{"data":1,"prerenderedAt":836},["ShallowReactive",2],{"page:\u002Fapplications\u002Fwebsite":3},{"id":4,"title":5,"body":6,"description":828,"extension":829,"meta":830,"navigation":831,"path":832,"seo":833,"stem":834,"__hash__":835},"pages\u002Fapplications\u002Fwebsite.md","Website",{"type":7,"value":8,"toc":802},"minimark",[9,14,18,103,106,110,127,130,162,166,169,200,204,207,211,214,242,245,249,252,255,275,279,282,308,350,354,361,364,368,371,374,377,380,406,410,413,416,419,423,431,434,438,446,462,482,486,489,492,500,504,507,510,513,539,543,553,556,560,563,566,570,573,606,610,613,700,704,707,736,740,746,783,786,789,793,796,799],[10,11,13],"h2",{"id":12},"layout","Layout",[15,16,17],"p",{},"Every page is built from the same parts, taken from the homepage design. The examples on this page work like the real thing: the panel's tabs switch, the calculator calculates and the questions open. They are in English, like the rest of this site; the website itself is in Dutch.",[19,20,21,34],"table",{},[22,23,24],"thead",{},[25,26,27,31],"tr",{},[28,29,30],"th",{},"Part",[28,32,33],{},"Value",[35,36,37,46,54,62,79,87,95],"tbody",{},[25,38,39,43],{},[40,41,42],"td",{},"Page width",[40,44,45],{},"At most 1200px, with 16px on each side on a phone and 32px from 720px",[25,47,48,51],{},[40,49,50],{},"Section spacing",[40,52,53],{},"40px on a phone, up to 64px on a wide screen",[25,55,56,59],{},[40,57,58],{},"Between sections",[40,60,61],{},"A dashed line, 1px",[25,63,64,67],{},[40,65,66],{},"Text",[40,68,69,70,74,75,78],{},"Figtree in ",[71,72,73],"code",{},"bodyXl"," (18 \u002F 28), navy softened (",[71,76,77],{},"#4A536A","); headings full navy",[25,80,81,84],{},[40,82,83],{},"Section head to content",[40,85,86],{},"40px",[25,88,89,92],{},[40,90,91],{},"Gap between cards",[40,93,94],{},"16px",[25,96,97,100],{},[40,98,99],{},"Rows of cards",[40,101,102],{},"Three across, two from 960px, one from 640px",[15,104,105],{},"A page reads top to bottom as: header, hero with the product panel, proof, then sections with a head and cards, and it always ends with the closing call to action and the footer.",[10,107,109],{"id":108},"headings","Headings",[15,111,112,113,116,117,120,121,126],{},"The page title is set in two tones: the first part in navy softened to 55%, the second part in full navy on its own line. Section heads have an eyebrow, a heading with a few gradient words and a short lead. The home page title is ",[71,114,115],{},"displayXl",", a sub page's title ",[71,118,119],{},"displayMd","; on smaller screens they step down the scale (see ",[122,123,125],"a",{"href":124},"\u002Fidentity\u002Ftypography#on-smaller-screens","typography",").",[128,129],"example-headings",{},[131,132,133,141,147,156],"ul",{},[134,135,136,140],"li",{},[137,138,139],"strong",{},"Gradient words are the part you'd remember",", at most five of them, once per heading. Blue for the product, orange for money and people. On the business pages they run from navy to blue instead (see below).",[134,142,143,146],{},[137,144,145],{},"The eyebrow is one word or two",", the name of the section.",[134,148,149,152,153,155],{},[137,150,151],{},"The lead is one or two sentences",", at most 56 characters a line, in ",[71,154,73],{}," and the running text color, never grey.",[134,157,158,161],{},[137,159,160],{},"A lead never repeats the numbers"," that the cards under it already show.",[10,163,165],{"id":164},"business-pages","Business pages",[15,167,168],{},"The business section (everything under \u002Fbedrijven) is the serious part of the site, and it should look it the moment you land. It keeps every part of the layout, but it has no orange: the meshes are navy (the deep mesh without its orange corner), the gradient words run from navy to blue, and the avatars and other product details go from periwinkle to navy. The audience bar in the header already says where you are; the color says it too.",[131,170,171,177,183,189],{},[134,172,173,176],{},[137,174,175],{},"No orange on a business page",", not as a mesh, a gradient word or a figure. A warning in the product (a budget nearly spent) keeps its warning color.",[134,178,179,182],{},[137,180,181],{},"Blue still means the product."," The solid blue button and the blue gradient words stay.",[134,184,185,188],{},[137,186,187],{},"No shadows."," Cards and product parts sit flat: on a mesh they are plain white, on white or gray they get a hairline. A form is a light gray card (grey 50, #fafafa) with a hairline and white fields, not a card on a mesh.",[134,190,191,194,195,199],{},[137,192,193],{},"Cards in a row stay gray."," The steps under ",[196,197,198],"em",{},"How it works"," are plain cards with a hairline, none on a mesh.",[10,201,203],{"id":202},"links-that-go-somewhere","Links that go somewhere",[15,205,206],{},"A link that takes you to another page has its label and a chevron after it. On hover the label turns blue and stays where it is; the chevron grows a stem into an arrow and moves a few pixels to the right. The text never moves, only the arrow does, the same in a row of articles as in a single link.",[10,208,210],{"id":209},"header","Header",[15,212,213],{},"The header sticks to the top, white at 88% with a blur, so the page shows through when you scroll. The logo sits on the left, the menu in the middle and two buttons on the right. On a phone the menu folds into a sheet that slides down under the bar; the download button stays visible.",[131,215,216,226,232],{},[134,217,218,221,222,225],{},[137,219,220],{},"Menu items are 40px tall",", 16px on each side, with 10px corners. The label is ",[71,223,224],{},"labelMd",".",[134,227,228,231],{},[137,229,230],{},"Hovering an item turns its text blue",", nothing more: no surface behind it.",[134,233,234,237,238,241],{},[137,235,236],{},"The page you are on"," keeps a light surface behind it (grey 50, ",[71,239,240],{},"#FAFAFA",") and blue text, so you always see where you are. A page under it, like a post under the blog, marks the same item.",[243,244],"example-header",{},[10,246,248],{"id":247},"hero-and-product-panel","Hero and product panel",[15,250,251],{},"The hero is centered: the two-tone title, one sentence, a field for your license plate and the store buttons. Under it sits the product panel, a cool mesh with the product on top. The tabs walk through one parking action: they move on by themselves every six seconds, with a line that fills under the active tab. Hovering pauses them and clicking a tab stops them, because then you're reading. Frosted glass cards float slowly on the sides with the details. On smaller screens the glass cards go and the panel stays.",[253,254],"example-hero",{},[131,256,257,263,269],{},[134,258,259,262],{},[137,260,261],{},"The panel shows the product, not a picture of it."," Real parts with real-looking data: a Dutch zone code, a plausible rate.",[134,264,265,268],{},[137,266,267],{},"The table card is the core",": what you see before you start, with a status tag in every row.",[134,270,271,274],{},[137,272,273],{},"One solid blue button"," in the panel, on the action that matters.",[10,276,278],{"id":277},"the-frame-around-a-wide-panel","The frame around a wide panel",[15,280,281],{},"A panel on the wide lane (the product panel, a mesh section, the worked example, the closing call to action) sits in a frame. It is the brand's line between sections, drawn around the one thing a section is about.",[131,283,284,290,296,302],{},[134,285,286,289],{},[137,287,288],{},"Rails",": the panel's two sides run on as dashed lines, 240px above and below it, and fade out.",[134,291,292,295],{},[137,293,294],{},"Rules",": a dashed line along the panel's top and bottom edge, across the whole screen.",[134,297,298,301],{},[137,299,300],{},"Hatching",": the strips beside the panel, between the rules, carry a fine diagonal hatching at 135°, one line every 10px.",[134,303,304,307],{},[137,305,306],{},"Square corners",": a framed panel has no radius, so the rails and the rules meet in its corners.",[19,309,310,318],{},[22,311,312],{},[25,313,314,316],{},[28,315,30],{},[28,317,33],{},[35,319,320,331,342],{},[25,321,322,325],{},[40,323,324],{},"Rules and rails",[40,326,327,328],{},"Dashes of 5px with 5px gaps, ",[71,329,330],{},"rgba(14, 16, 20, 0.24)",[25,332,333,335],{},[40,334,300],{},[40,336,337,338,341],{},"1px lines, ",[71,339,340],{},"rgba(14, 16, 20, 0.043)","; you only notice it when you look for it",[25,343,344,347],{},[40,345,346],{},"Rail run",[40,348,349],{},"240px past the panel, fading out",[10,351,353],{"id":352},"proof","Proof",[15,355,356,357,360],{},"A band under the hero with one big number, a grid of cities and four stats. Each city name is set in a different style, like the signs in that city, so the grid reads as many places and not as one list. The names on the tiles are in ",[71,358,359],{},"titleSm",": a name on a tile is a label, not a heading. A slow line of more cities runs underneath.",[362,363],"example-proof",{},[10,365,367],{"id":366},"feature-cards","Feature cards",[15,369,370],{},"Cards in a row of three. Mesh cards with grain and white text alternate with plain cards on the surface color; a row has at most two mesh cards. The visual sits on top, the text below it.",[372,373],"example-cards",{},[372,375],{"set":376},"parking",[372,378],{"set":379},"account",[131,381,382,388,394,400],{},[134,383,384,387],{},[137,385,386],{},"Mini cards"," on a mesh are white with a soft shadow and no border, so they float. On a plain card they get a hairline instead.",[134,389,390,393],{},[137,391,392],{},"The lock screen"," uses its own gradient, from blue to a dusky purple with orange in the corner, so it reads as a phone and not as a brand surface.",[134,395,396,399],{},[137,397,398],{},"Chat bubbles"," are white; the customer's own messages are white at 85%, on the right.",[134,401,402,405],{},[137,403,404],{},"A photo"," fills the visual area with an 8px inset, so the card's corner stays visible.",[10,407,409],{"id":408},"wide-cards","Wide cards",[15,411,412],{},"For a point that needs more than a card: the text on the left, product parts on the right. Plain facts go in rows with a tag; business gets its dashboard.",[414,415],"example-wide",{},[414,417],{"variant":418},"business",[10,420,422],{"id":421},"photos","Photos",[15,424,425,426,430],{},"A photo of the app in use, with at most two product parts floating on top. The overlays repeat what the photo shows, so the photo stays the story. The caption starts with a bold sentence about where you are. See ",[122,427,429],{"href":428},"\u002Fidentity\u002Fimagery","imagery"," for what we photograph.",[432,433],"example-photo",{},[10,435,437],{"id":436},"blog-covers","Blog covers",[15,439,440,441,445],{},"Every blog post gets a cover in the same composition: the cool mesh, the logo at the top right, one line of type on the left and a phone that runs off the bottom edge. The phone shows the one screen the post is about. See ",[122,442,444],{"href":443},"\u002Fidentity\u002Felements","graphic elements"," for the parts.",[447,448,450,456],"social-grid",{":columns":449},"2",[451,452],"blog-cover",{"label":453,"screen":454,"title":455},"Feature post","activity","Your parking action always in view",[451,457],{"label":458,"screen":459,"title":460,"surface":461},"Business or money post, on the deep mesh","balance","How your balance works","navy",[131,463,464,470,476],{},[134,465,466,469],{},[137,467,468],{},"One line of type",", at most eight words, centered in the left half.",[134,471,472,475],{},[137,473,474],{},"The phone tilts 8°"," and is cut off by the bottom edge, so it feels like it's in your hand.",[134,477,478,481],{},[137,479,480],{},"The deep mesh"," for posts about business and money.",[10,483,485],{"id":484},"quotes-and-reviews","Quotes and reviews",[15,487,488],{},"One big quote with its author, and a row of reviews under it. The gradient words in the quote are the part we'd underline.",[490,491],"example-quote",{},[131,493,494],{},[134,495,496,499],{},[137,497,498],{},"Quotes and reviews are real."," A customer who agreed to be quoted, or a review copied word for word from the App Store or Google Play, with its source. The examples here are marked as examples; the live site never shows that label.",[10,501,503],{"id":502},"prices","Prices",[15,505,506],{},"The rates page opens like a price list, not a poster. Under the title, with as much space below it as above, everything up to the worked example sits on one light gray panel on the wide lane, framed like the worked example: square, with its rails and hatching. White cards sit on it, two side by side: what you get with a check list and the store buttons, and the service fee as one big number with the € 0.29 per top-up named right under it, so nobody has to look for the second € 0.29. Every fee follows on two cards side by side, one per kind of fee: its title and when you pay it, as in the cards above, then plain rows of a label and an amount. No gradient words, no eyebrow labels over a card, no cards inside cards, no footnotes: a note sits under its label. Under them, the worked example lets people try it.",[508,509],"example-prices",{},[511,512],"example-banner",{},[131,514,515,521,527,533],{},[134,516,517,520],{},[137,518,519],{},"The banner is a mesh with grain",", the text on the left and a light glass panel on the right: the deep mesh on the home page, the cool mesh on the rates page. Use it once per page, for the one thing we want people to try.",[134,522,523,526],{},[137,524,525],{},"The split bar shows who gets what",": the municipality in blue, SimplePark in orange. When parking is free, the bar is empty, not two slivers.",[134,528,529,532],{},[137,530,531],{},"The total is the total per parking action",", and the note under it says the € 0.29 per top-up is not in it. A worked example never suggests it is the whole price.",[134,534,535,538],{},[137,536,537],{},"Every page that names one of our fees names both",": € 0.29 per parking action and € 0.29 per top-up. Never \"only € 0.29\", never \"no hidden costs\".",[10,540,542],{"id":541},"questions","Questions",[15,544,545,546,549,550],{},"The section head on the left and the questions on the right. The first question is open. Answers are short and start with the answer: ",[196,547,548],{},"No.",", ",[196,551,552],{},"No problem.",[554,555],"example-faq",{},[10,557,559],{"id":558},"closing-call-to-action","Closing call to action",[15,561,562],{},"Every page ends with the same call to action: the cool mesh, the two-tone title, the store buttons and a phone peeking up from the bottom edge. The fine print names the price.",[564,565],"example-cta",{},[10,567,569],{"id":568},"reading-pages","Reading pages",[15,571,572],{},"A page that tells a story, like the about page, is a reading page: one story in one column, the way stripe.com\u002Fabout tells theirs. No photo, no cards, no mesh between the paragraphs.",[131,574,575,584,594,600],{},[134,576,577,580,581,583],{},[137,578,579],{},"One column of 640px",", centred, in ",[71,582,73],{},": about 65 characters a line.",[134,585,586,589,590,126],{},[137,587,588],{},"The pin as a drawing on top",": the one place the pin may appear on its side (see ",[122,591,593],{"href":592},"\u002Fidentity\u002Flogo-misuse#one-exception-the-pin-as-a-drawing","logo misuse",[134,595,596,599],{},[137,597,598],{},"The title is for search engines and screen readers",", hidden on the page; the drawing and the first sentence open the story.",[134,601,602,605],{},[137,603,604],{},"It ends with a few rows"," of a question on the left and where to go next on the right, with hairlines between them, and then the closing call to action.",[10,607,609],{"id":608},"support-pages","Support pages",[15,611,612],{},"The knowledge base (support) has the layout of this brand site: documentation you look things up in, not a page you scroll through.",[131,614,615,624,630,644,657,663,669,679,688,694],{},[134,616,617,620,621,623],{},[137,618,619],{},"The sections are tabs"," in ",[71,622,224],{},", the size of the header menu (a second row of navigation is never bigger than the first), in a bar under the site header, on the content width. The current one is underlined in blue, like the audience bar. The search sits on the right of the bar. The support home has no bar: its sections are its cards and its search is in the panel.",[134,625,626,629],{},[137,627,628],{},"No sidebar."," Every support page reads the same: the text on the left edge of the content width, in line with the logo and the tabs, and \"on this page\" on the right. The tabs, the section pages and the previous and next links lead on.",[134,631,632,635,636,639,640,643],{},[137,633,634],{},"The support home opens with a mesh panel"," in the frame, like the home: the title and the search in white (its results open over the page, the panel never grows), and four tiles for what people come with most. The tiles are dark glass: a navy tint over the mesh (",[71,637,638],{},"rgba(13, 19, 48, 0.34)",", 14px blur) with a white hairline at 16%, white text, and the icon on a lighter pane of the same glass. Under the panel each section shows its subsections as cards, the way Linear's docs do: a grey 50 top with the line icon in its own white tile, a hairline, and the name on white underneath in ",[71,641,642],{},"bodyLg"," (the text face: a card is a way in, the name only labels it). No description on the card. Under the mouse the cards light up like the city tiles on the home page: a soft glow in blue and warm orange follows the pointer over all the cards, lies over the grey tops and lights the rims of the cards near it, brightest on the one under it. Touch screens get no light.",[134,645,646,649,650,653,654,656],{},[137,647,648],{},"The page is a reading column"," of at most 720px: where it sits as an eyebrow (a link back up), the title in ",[71,651,652],{},"displaySm",", the lead in ",[71,655,73],{}," and the text color.",[134,658,659,662],{},[137,660,661],{},"On this page",", on the right on wide screens, lists the headings of an article, with a hairline on the left that turns blue at the one you are reading.",[134,664,665,668],{},[137,666,667],{},"Lists of articles are rows",", a title and its line with hairlines between and a chevron on the right. No cards, no counts in bubbles.",[134,670,671,674,675,678],{},[137,672,673],{},"Steps"," are numbered in a thin ring with a hairline between them. ",[137,676,677],{},"Notes"," are callouts in a status tint: info blue, tip success, warning amber, with the label in the status's text step.",[134,680,681,684,685,687],{},[137,682,683],{},"The byline"," has who wrote it on one line and when it last changed on the next, in ",[71,686,642],{}," and grey.",[134,689,690,693],{},[137,691,692],{},"Every article ends"," with the way to a person (WhatsApp and email, as links that go somewhere) and the previous and next article of its section, in two outlined boxes.",[134,695,696,699],{},[137,697,698],{},"On a phone"," the tabs scroll sideways, the search moves to the top of the page, and \"on this page\" goes.",[10,701,703],{"id":702},"locations-page","Locations page",[15,705,706],{},"The locations page opens with a mesh panel in the frame, like the home and the support home: the title, one sentence, the search and three numbers in white on the left (the municipalities, the parking zones, pay per minute), and a map of the country on the right.",[131,708,709,718,724,733],{},[134,710,711,714,715,717],{},[137,712,713],{},"The map is drawn from the data",", not from an outline: every municipality is a white dot at the centre of its zones, larger the more zones it has, so the dots draw the Netherlands on their own. The six largest cities carry their name in ",[71,716,224],{},". Hovering a dot lights it and shows its name.",[134,719,720,723],{},[137,721,722],{},"The search lights the map."," As you type, the dots it finds glow and the rest dim; only the first match carries its name, so neighbours never write over each other. The matches open in a list over the page with the lowest hourly rate, and enter opens the first.",[134,725,726,729,730,732],{},[137,727,728],{},"Under the panel every municipality, A to Z,"," in four columns. A name is in ",[71,731,642],{},", the lowest hourly rate on the street (“from € 1.29”) on the right in grey 500, only where the city's page knows it. Each letter has a hairline under it. No cards and no letter bar: 123 names read best as a plain list, and the search is the way to jump.",[134,734,735],{},"On a tablet the map moves under the text; on a phone it goes, because the dots are too close to read as places.",[10,737,739],{"id":738},"city-pages","City pages",[15,741,742,743,745],{},"A city page puts the price first. The title in ",[71,744,652],{}," and a lead of two sentences (the price, and where it is cheap or dear) sit on the left of the content width, with two large buttons under them: “Download de app” solid and the municipality's rates outlined. On the right a card holds the rates of the city.",[131,747,748,762,768,774,780],{},[134,749,750,753,754,757,758,761],{},[137,751,752],{},"The rates card"," has the whole range on a grey 50 top in ",[71,755,756],{},"headlineMd"," (“€ 1.29 – € 8.05”, per hour on the street), with the cheapest area in a green tag when there is more than one. Under it one row per tariff area: the name in ",[71,759,760],{},"titleMd",", its price on the right, and a bar from its lowest to its highest hourly rate in the blue-to-warm gradient. Every bar sits on one scale, so the dear and the cheap areas read at a glance; an area with one price gets a short stroke centred on it, never a dot. The paid hours, the maximum and the zone code follow in grey. The source, its date and the service fee close the card.",[134,763,764,767],{},[137,765,766],{},"The zone map"," is a panel on the wide lane, in the frame: every paid zone from the export in blue on the streets of the map, so you see where the meter applies. Until the map comes near and loads, the zones show as a blue outline on grey, drawn on the server, and that outline stays when the map cannot load. A glass card with a hairline (no shadow) in the corner says how many zones there are and that the app finds yours.",[134,769,770,773],{},[137,771,772],{},"Then a reading column in the middle of the page."," It opens with the rest of the intro, then the city's own copy in the type of the support articles, the places off the street (free and P+R, garages, blue zones) as small cards with a tag, and the questions as rows that open. No app card beside it: the download is already next to the title.",[134,775,776,779],{},[137,777,778],{},"The neighbours"," close the page as quiet tiles with the light of the home page.",[134,781,782],{},"A city without rates has no card: the title and the intro take the column. A city without zones has no map.",[10,784,203],{"id":785},"links-that-go-somewhere-1",[15,787,788],{},"A link to another page, at the end of a row or a section, ends in a chevron. On hover the link moves 4px to the left, turns blue and the chevron grows a stem into an arrow, so it points where you are about to go.",[10,790,792],{"id":791},"footer","Footer",[15,794,795],{},"The logo with one line, four columns of links and a bottom row with the system status. One big faded word runs off the bottom edge.",[15,797,798],{},"The footer runs on the wide lane, as wide as the panels in a frame, not on the content column. The link columns are as wide as their longest link, with one equal gap (64px) between them; the logo column takes what is left, so the widest space falls after the logo. The logo is 30px high.",[800,801],"example-footer",{},{"title":803,"searchDepth":804,"depth":804,"links":805},"",2,[806,807,808,809,810,811,812,813,814,815,816,817,818,819,820,821,822,823,824,825,826,827],{"id":12,"depth":804,"text":13},{"id":108,"depth":804,"text":109},{"id":164,"depth":804,"text":165},{"id":202,"depth":804,"text":203},{"id":209,"depth":804,"text":210},{"id":247,"depth":804,"text":248},{"id":277,"depth":804,"text":278},{"id":352,"depth":804,"text":353},{"id":366,"depth":804,"text":367},{"id":408,"depth":804,"text":409},{"id":421,"depth":804,"text":422},{"id":436,"depth":804,"text":437},{"id":484,"depth":804,"text":485},{"id":502,"depth":804,"text":503},{"id":541,"depth":804,"text":542},{"id":558,"depth":804,"text":559},{"id":568,"depth":804,"text":569},{"id":608,"depth":804,"text":609},{"id":702,"depth":804,"text":703},{"id":738,"depth":804,"text":739},{"id":785,"depth":804,"text":203},{"id":791,"depth":804,"text":792},"How the brand works on simplepark.nl.","md",{},true,"\u002Fapplications\u002Fwebsite",{"title":5,"description":828},"applications\u002Fwebsite","OYwSkM1nQuSR1GgKEsjl42C8-2TM5AEIdctNdGW40oU",1792779480564]