[{"data":1,"prerenderedAt":765},["ShallowReactive",2],{"page:\u002Fapplications\u002Femail":3},{"id":4,"title":5,"body":6,"description":757,"extension":758,"meta":759,"navigation":760,"path":761,"seo":762,"stem":763,"__hash__":764},"pages\u002Fapplications\u002Femail.md","Email",{"type":7,"value":8,"toc":732},"minimark",[9,14,18,62,66,146,151,154,306,310,313,390,394,400,436,440,444,447,451,453,457,460,464,468,471,476,480,485,489,494,498,501,507,511,514,523,527,530,640,644,656],[10,11,13],"h2",{"id":12},"how-our-emails-look","How our emails look",[15,16,17],"p",{},"Our emails are quiet on purpose. People open them to check an amount, a time or a code, so that comes first and nothing competes with it. Every email is one white card on light gray, with generous margins, one dark headline, the facts in clean tables, and color only where it carries meaning.",[19,20,21,34,40,46,52],"ul",{},[22,23,24,28,29,33],"li",{},[25,26,27],"strong",{},"The headline says what happened",", with the number in it: ",[30,31,32],"em",{},"Your October invoice: € 64.20",".",[22,35,36,39],{},[25,37,38],{},"Facts go in tables",", never in a paragraph: the amount, the invoice number, the period, the plate.",[22,41,42,45],{},[25,43,44],{},"Color means something."," Blue for the action, a tint for a status or a callout, the mesh only behind the product. Everything else is ink on white.",[22,47,48,51],{},[25,49,50],{},"One button",", which opens that item in the app.",[22,53,54,57,58,61],{},[25,55,56],{},"Every email ends the same",": ",[30,59,60],{},"Regards, SimplePark",", then the footer with why you get the email, help, the links and our legal details.",[10,63,65],{"id":64},"layout","Layout",[67,68,69,82],"table",{},[70,71,72],"thead",{},[73,74,75,79],"tr",{},[76,77,78],"th",{},"Part",[76,80,81],{},"Value",[83,84,85,106,114,122,130,138],"tbody",{},[73,86,87,91],{},[88,89,90],"td",{},"Card",[88,92,93,94,98,99,102,103],{},"600px, ",[95,96],"color-chip",{"c":97},"white",", 12px corners, a hairline in ",[95,100],{"c":101},"grey 200",", on ",[95,104],{"c":105},"grey 100",[73,107,108,111],{},[88,109,110],{},"Margins",[88,112,113],{},"48px on each side inside the card, 24px on a phone",[73,115,116,119],{},[88,117,118],{},"Logo",[88,120,121],{},"Blue, 128px wide, 40px from the top",[73,123,124,127],{},[88,125,126],{},"Image",[88,128,129],{},"Optional, from edge to edge of the card under the logo, 2 : 1",[73,131,132,135],{},[88,133,134],{},"Get the app",[88,136,137],{},"Optional, centered between the body and the footer, with the store badges",[73,139,140,143],{},[88,141,142],{},"Footer",[88,144,145],{},"Inside the card, under a hairline: why you get the email, help, the links, our legal details, and the logo with our channels",[147,148,150],"h3",{"id":149},"type","Type",[15,152,153],{},"One scale, nothing in between.",[67,155,156,172],{},[70,157,158],{},[73,159,160,163,166,169],{},[76,161,162],{},"Role",[76,164,165],{},"Font",[76,167,168],{},"Size \u002F line height",[76,170,171],{},"Color",[83,173,174,190,204,218,234,254,271,289],{},[73,175,176,179,182,185],{},[88,177,178],{},"Amount",[88,180,181],{},"Poppins, semibold",[88,183,184],{},"40 \u002F 44",[88,186,187],{},[95,188],{"c":189},"secondary 1000",[73,191,192,195,197,200],{},[88,193,194],{},"Headline",[88,196,181],{},[88,198,199],{},"32 \u002F 40 (26 \u002F 32 on a phone)",[88,201,202],{},[95,203],{"c":189},[73,205,206,209,211,214],{},[88,207,208],{},"Section",[88,210,181],{},[88,212,213],{},"20 \u002F 28",[88,215,216],{},[95,217],{"c":189},[73,219,220,223,226,229],{},[88,221,222],{},"Body",[88,224,225],{},"Figtree, regular",[88,227,228],{},"17 \u002F 28",[88,230,231],{},[95,232],{"c":233},"grey 700",[73,235,236,239,242,245],{},[88,237,238],{},"Tables, lists and notes",[88,240,241],{},"Figtree, regular and medium",[88,243,244],{},"15 \u002F 22",[88,246,247,248,251,252],{},"Labels ",[95,249],{"c":250},"grey 600",", values ",[95,253],{"c":189},[73,255,256,258,260,263],{},[88,257,142],{},[88,259,225],{},[88,261,262],{},"13 \u002F 20",[88,264,265,267,268],{},[95,266],{"c":250},", links ",[95,269],{"c":270},"primary 500",[73,272,273,276,279,282],{},[88,274,275],{},"Button",[88,277,278],{},"Poppins, medium",[88,280,281],{},"16 \u002F 20, at least 44px high, 12px corners",[88,283,284,286,287],{},[95,285],{"c":97}," on ",[95,288],{"c":270},[73,290,291,294,297,300],{},[88,292,293],{},"Code",[88,295,296],{},"Mono, semibold",[88,298,299],{},"28 \u002F 36",[88,301,302,286,304],{},[95,303],{"c":189},[95,305],{"c":105},[147,307,309],{"id":308},"spacing","Spacing",[15,311,312],{},"Only 4, 8, 12, 16, 24, 32, 40 and 48.",[67,314,315,325],{},[70,316,317],{},[73,318,319,322],{},[76,320,321],{},"Between",[76,323,324],{},"Space",[83,326,327,335,343,351,359,367,374,382],{},[73,328,329,332],{},[88,330,331],{},"Logo and headline",[88,333,334],{},"40",[73,336,337,340],{},[88,338,339],{},"Headline and the first paragraph, two paragraphs",[88,341,342],{},"16",[73,344,345,348],{},[88,346,347],{},"A paragraph and a component, or two components",[88,349,350],{},"32",[73,352,353,356],{},[88,354,355],{},"A summary and its table",[88,357,358],{},"24",[73,360,361,364],{},[88,362,363],{},"Above a section heading, and under it",[88,365,366],{},"40, 16",[73,368,369,372],{},[88,370,371],{},"A button and its note",[88,373,342],{},[73,375,376,379],{},[88,377,378],{},"Rows in a table",[88,380,381],{},"12 above and below",[73,383,384,387],{},[88,385,386],{},"Rows in a list",[88,388,389],{},"20 above and below",[147,391,393],{"id":392},"color-and-corners","Color and corners",[395,396],"token-table",{":tokens":397,"nameLabel":398,"stepLabel":399},"[{\"token\":\"onSurface\",\"hex\":\"#172240\",\"step\":\"secondary 1000\",\"use\":\"Headlines, amounts and the values in tables.\"},{\"token\":\"onSurfaceContainerHigh\",\"hex\":\"#616161\",\"step\":\"grey 700\",\"use\":\"Paragraphs and the sign-off.\"},{\"token\":\"onSurfaceContainer\",\"hex\":\"#757575\",\"step\":\"grey 600\",\"use\":\"Labels in tables, captions, the footer. Never for something people must act on.\"},{\"token\":\"outline\",\"hex\":\"#EEEEEE\",\"step\":\"grey 200\",\"use\":\"Table rows, lists, boxes and the card. One weight everywhere.\"},{\"token\":\"surfaceContainer\",\"hex\":\"#F5F5F5\",\"step\":\"grey 100\",\"use\":\"Around the card, and behind a code.\"},{\"token\":\"primary\",\"hex\":\"#3B6EFB\",\"step\":\"primary 500\",\"use\":\"The button and links.\"},{\"token\":\"tertiary\",\"hex\":\"#F0F6FF\",\"step\":\"primary 100\",\"use\":\"The circle behind a step number, and info tiles.\"}]","Token","Palette",[15,401,402,403,57,408,286,411,414,415,286,418,421,422,286,425,428,429,286,432,435],{},"Statuses use the status steps from the ",[404,405,407],"a",{"href":406},"\u002Fidentity\u002Fcolor#status","color page",[95,409],{"c":410},"success text",[95,412],{"c":413},"success bg"," for paid and done, ",[95,416],{"c":417},"warning text",[95,419],{"c":420},"warning bg"," for due, ",[95,423],{"c":424},"error text",[95,426],{"c":427},"error bg"," for failed, and ",[95,430],{"c":431},"primary 700",[95,433],{"c":434},"primary 100"," for info. A status is always a word on a tint, never color alone. Corners are 12px for buttons, the card, lists and the product visual, 8px for callouts and small boxes, and a pill only for status badges.",[10,437,439],{"id":438},"parts","Parts",[147,441,443],{"id":442},"text","Text",[445,446],"email-parts",{"group":442},[147,448,450],{"id":449},"money","Money",[445,452],{"group":449},[147,454,456],{"id":455},"actions-and-account","Actions and account",[445,458],{"group":459},"actions",[10,461,463],{"id":462},"examples","Examples",[147,465,467],{"id":466},"an-invoice","An invoice",[15,469,470],{},"The email gives the total and the facts to find it back. Every line, with its date, plate and VAT, is in the PDF.",[472,473],"email-preview",{":blocks":474,"preview":475,"subject":32},"[{\"type\":\"headline\",\"text\":\"Your October invoice: € 64.20\"},{\"type\":\"paragraph\",\"text\":\"Hi Sanne, your invoice for 1 to 31 October 2026 is ready. Every parking action is in the PDF.\"},{\"type\":\"summary\",\"amount\":\"€ 64.20\",\"caption\":\"Pay before 14 November 2026\",\"status\":\"Due\",\"tone\":\"amber\"},{\"type\":\"details\",\"rows\":[{\"label\":\"Invoice\",\"value\":\"SP-2026-10-0412\"},{\"label\":\"Period\",\"value\":\"1 to 31 October 2026\"},{\"label\":\"Parking actions\",\"value\":\"14\"},{\"label\":\"Pay with\",\"value\":\"iDEAL or in the app\"}]},{\"type\":\"attachment\",\"name\":\"Invoice SP-2026-10-0412.pdf\",\"size\":\"PDF, 84 KB\"},{\"type\":\"button\",\"text\":\"Pay your invoice\",\"secondary\":\"View in the app\"},{\"type\":\"callout\",\"tone\":\"amber\",\"title\":\"Not paid by 14 November 2026?\",\"text\":\"Then you can't start a new parking action until it is.\"}]","Pay before 14 November 2026, with iDEAL or in the app.",[147,477,479],{"id":478},"a-parking-action-that-stopped","A parking action that stopped",[472,481],{":blocks":482,"preview":483,"subject":484},"[{\"type\":\"headline\",\"text\":\"Your parking action stopped at 17:30\"},{\"type\":\"visual\",\"visual\":\"parking\"},{\"type\":\"paragraph\",\"text\":\"Hi Sanne, we stopped your parking action on 16 October 2026 at the end time you set. Still parked? Start a new parking action in the app.\"},{\"type\":\"summary\",\"amount\":\"€ 13.17\",\"caption\":\"Paid from your balance. Balance left: € 36.83\",\"status\":\"Paid\",\"tone\":\"green\"},{\"type\":\"details\",\"rows\":[{\"label\":\"License plate\",\"value\":\"S-487-JV\"},{\"label\":\"Zone\",\"value\":\"12100, Keizersgracht, Amsterdam\"},{\"label\":\"Time\",\"value\":\"15:47 to 17:30, 1 hour 43 minutes\"},{\"label\":\"Parking rate\",\"value\":\"€ 12.88\"},{\"label\":\"Service fee\",\"value\":\"€ 0.29\"},{\"label\":\"Total\",\"value\":\"€ 13.17\",\"strong\":true}]},{\"type\":\"button\",\"text\":\"View parking action\"}]","Keizersgracht, S-487-JV. € 13.17 from your balance.","Your parking action stopped at 17:30",[147,486,488],{"id":487},"a-payment-that-failed","A payment that failed",[472,490],{":blocks":491,"preview":492,"subject":493},"[{\"type\":\"headline\",\"text\":\"We couldn't collect € 64.20\"},{\"type\":\"paragraph\",\"text\":\"Hi Sanne, we tried to collect your October invoice, but your bank returned it: there was not enough money in the account.\"},{\"type\":\"summary\",\"amount\":\"€ 64.20\",\"caption\":\"Invoice SP-2026-10-0412\",\"status\":\"Failed\",\"tone\":\"red\"},{\"type\":\"callout\",\"tone\":\"red\",\"title\":\"You can keep parking until 14 November 2026\",\"text\":\"Pay before then, and nothing else happens. There are no extra costs.\"},{\"type\":\"method\",\"method\":\"ideal\",\"title\":\"Pay with iDEAL\",\"caption\":\"It takes a minute. After that, we don't try to collect it again.\"},{\"type\":\"button\",\"text\":\"Pay now\"}]","Pay before 14 November 2026 to keep parking.","We couldn't collect € 64.20",[147,495,497],{"id":496},"a-verification-code","A verification code",[15,499,500],{},"No links and no button: a security email never asks people to click.",[472,502],{":blocks":503,"preview":504,"subject":505,"reason":506},"[{\"type\":\"headline\",\"text\":\"Confirm your email address\"},{\"type\":\"paragraph\",\"text\":\"Hi Sanne, enter this code in the app.\"},{\"type\":\"code\",\"text\":\"482 913\"},{\"type\":\"note\",\"text\":\"It works for 10 minutes, and only once. Never share it, not even with us. Didn't ask for it? Then you can ignore this email.\"}]","It works for 10 minutes.","Your SimplePark code: 482 913","You get this email because someone entered this email address in SimplePark.",[147,508,510],{"id":509},"news-about-a-feature","News about a feature",[15,512,513],{},"The only kind of email with a photo and the store badges.",[472,515],{":blocks":516,"preview":517,"subject":518,"reason":519,":apps":520,":unsubscribe":520,"image":521,"imageAlt":522},"[{\"type\":\"headline\",\"text\":\"You can now pay automatically\"},{\"type\":\"paragraph\",\"text\":\"Hi Sanne, from today you can stop topping up. We add up your parking actions and collect the total once a month.\"},{\"type\":\"list\",\"list\":[{\"icon\":\"clock\",\"title\":\"No more topping up\",\"text\":\"Park first, pay once a month afterwards.\"},{\"icon\":\"euro\",\"title\":\"The same costs\",\"text\":\"€ 0.29 per parking action, and no top-up fee.\"},{\"icon\":\"card\",\"title\":\"Your own bank account\",\"text\":\"You approve it once, and you can stop any time.\"}]},{\"type\":\"button\",\"text\":\"Turn it on in the app\"},{\"type\":\"note\",\"text\":\"Rather keep topping up? Then you don't have to do anything.\"}]","Stop topping up. We collect once a month.","You can now pay automatically","You get this email because you park with SimplePark and get product news.","true","\u002Fimages\u002Fphotos\u002Fapp-iphone-mockup-v2.jpg","A hand holding a phone with the SimplePark app next to a car",[10,524,526],{"id":525},"building-them","Building them",[15,528,529],{},"Mail clients are not browsers. These rules keep the emails looking the same in Gmail, Outlook and Apple Mail.",[67,531,532,542],{},[70,533,534],{},[73,535,536,539],{},[76,537,538],{},"Topic",[76,540,541],{},"Rule",[83,543,544,552,560,567,575,583,591,603,611],{},[73,545,546,549],{},[88,547,548],{},"Fonts",[88,550,551],{},"Poppins and Figtree fall back to -apple-system, Segoe UI, Roboto, Arial. Outlook has no semibold: use bold there. Check that headlines still fit on two lines.",[73,553,554,557],{},[88,555,556],{},"Images",[88,558,559],{},"The photo and the product visual are images at twice their size, with alt text that names the facts. The facts are always repeated in a table, so nothing is lost when images are off.",[73,561,562,564],{},[88,563,90],{},[88,565,566],{},"A 600px table with a white cell. Outlook on Windows drops the corners and the shadow; the hairline keeps the card readable.",[73,568,569,572],{},[88,570,571],{},"Buttons",[88,573,574],{},"A link styled as a block, at least 44px high, full width on a phone. Outlook on Windows draws square corners; that's fine.",[73,576,577,580],{},[88,578,579],{},"Tables",[88,581,582],{},"Real tables with two columns: the label left, the value right-aligned with tabular figures. One rule weight; the total row is bold.",[73,584,585,588],{},[88,586,587],{},"Preview text",[88,589,590],{},"Every email has its own, 90 to 110 characters, that adds to the subject instead of repeating it.",[73,592,593,596],{},[88,594,595],{},"Plain text",[88,597,598,599,602],{},"Every email has a written plain-text version: the headline, the facts as ",[30,600,601],{},"label: value",", the link in full and the footer.",[73,604,605,608],{},[88,606,607],{},"Phone",[88,609,610],{},"Under 600px: the card fills the screen, 24px margins, the headline at 26 \u002F 32, the amount at 34, buttons full width.",[73,612,613,616],{},[88,614,615],{},"Dark mode",[88,617,618,619,621,622,624,625,628,629,632,633,636,637,639],{},"The card turns ",[95,620],{"c":189}," with ",[95,623],{"c":97}," for headlines and ",[95,626],{"c":627},"grey 300"," for text, on ",[95,630],{"c":631},"grey 900",". Rules become ",[95,634],{"c":635},"secondary 800",". The button stays ",[95,638],{"c":270}," with white text.",[10,641,643],{"id":642},"writing","Writing",[15,645,646,647,651,652,33],{},"Personal and to the point. See ",[404,648,650],{"href":649},"\u002Fvoice\u002Ftone","tone of voice"," and the ",[404,653,655],{"href":654},"\u002Fvoice\u002Fwords","word list",[19,657,658,664,673,679,685,697,703,709,715,721,727],{},[22,659,660,663],{},[25,661,662],{},"Subject, preview and headline each add something."," The subject says what happened with the number, the preview adds the next fact, the headline repeats the subject at most.",[22,665,666,669,670],{},[25,667,668],{},"Hi and the first name"," start the first sentence: ",[30,671,672],{},"Hi Sanne, your invoice is ready.",[22,674,675,678],{},[25,676,677],{},"Every email about money"," shows the amount, the reference, the period or date, and how it is paid.",[22,680,681,684],{},[25,682,683],{},"Invoices never list their lines."," The email gives the total and the facts; every line is in the PDF, and the email says so.",[22,686,687,57,690,693,694,33],{},[25,688,689],{},"Dates with the year",[30,691,692],{},"14 November 2026",". Durations in words: ",[30,695,696],{},"1 hour 43 minutes",[22,698,699,702],{},[25,700,701],{},"What happens next, calmly",": when something is due, say what happens if it isn't paid, in a callout, not in the first sentence.",[22,704,705,708],{},[25,706,707],{},"No amounts in the product visual."," They belong in the summary.",[22,710,711,714],{},[25,712,713],{},"No links in security emails",": codes, logins and password changes.",[22,716,717,720],{},[25,718,719],{},"The footer says why"," the person gets this email, and it's true for that email.",[22,722,723,726],{},[25,724,725],{},"A way out only for news."," Anything that records a charge, a parking action or a security event has none.",[22,728,729,731],{},[25,730,60],{}," at the end. We are one company, not a team.",{"title":733,"searchDepth":734,"depth":734,"links":735},"",2,[736,737,743,748,755,756],{"id":12,"depth":734,"text":13},{"id":64,"depth":734,"text":65,"children":738},[739,741,742],{"id":149,"depth":740,"text":150},3,{"id":308,"depth":740,"text":309},{"id":392,"depth":740,"text":393},{"id":438,"depth":734,"text":439,"children":744},[745,746,747],{"id":442,"depth":740,"text":443},{"id":449,"depth":740,"text":450},{"id":455,"depth":740,"text":456},{"id":462,"depth":734,"text":463,"children":749},[750,751,752,753,754],{"id":466,"depth":740,"text":467},{"id":478,"depth":740,"text":479},{"id":487,"depth":740,"text":488},{"id":496,"depth":740,"text":497},{"id":509,"depth":740,"text":510},{"id":525,"depth":734,"text":526},{"id":642,"depth":734,"text":643},"How our emails look, how they are built and how they sound.","md",{},true,"\u002Fapplications\u002Femail",{"title":5,"description":757},"applications\u002Femail","R09Eox_kIJxRXgpNMoJGs35qxL4A0s4F3NsE5mRFILA",1792779480808]