Brand
simplepark.nl

Digital

Email

How our emails look, how they are built and how they sound.

How our emails look

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.

  • The headline says what happened, with the number in it: Your October invoice: € 64.20.
  • Facts go in tables, never in a paragraph: the amount, the invoice number, the period, the plate.
  • 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.
  • One button, which opens that item in the app.
  • Every email ends the same: Regards, SimplePark, then the footer with why you get the email, help, the links and our legal details.

Layout

PartValue
Card600px, white, 12px corners, a hairline in grey 200, on grey 100
Margins48px on each side inside the card, 24px on a phone
LogoBlue, 128px wide, 40px from the top
ImageOptional, from edge to edge of the card under the logo, 2 : 1
Get the appOptional, centered between the body and the footer, with the store badges
FooterInside the card, under a hairline: why you get the email, help, the links, our legal details, and the logo with our channels

Type

One scale, nothing in between.

RoleFontSize / line heightColor
AmountPoppins, semibold40 / 44secondary 1000
HeadlinePoppins, semibold32 / 40 (26 / 32 on a phone)secondary 1000
SectionPoppins, semibold20 / 28secondary 1000
BodyFigtree, regular17 / 28grey 700
Tables, lists and notesFigtree, regular and medium15 / 22Labels grey 600, values secondary 1000
FooterFigtree, regular13 / 20grey 600, links primary 500
ButtonPoppins, medium16 / 20, at least 44px high, 12px cornerswhite on primary 500
CodeMono, semibold28 / 36secondary 1000 on grey 100

Spacing

Only 4, 8, 12, 16, 24, 32, 40 and 48.

BetweenSpace
Logo and headline40
Headline and the first paragraph, two paragraphs16
A paragraph and a component, or two components32
A summary and its table24
Above a section heading, and under it40, 16
A button and its note16
Rows in a table12 above and below
Rows in a list20 above and below

Color and corners

SwatchTokenPaletteUse
onSurfacesecondary 1000 Headlines, amounts and the values in tables.
onSurfaceContainerHighgrey 700 Paragraphs and the sign-off.
onSurfaceContainergrey 600 Labels in tables, captions, the footer. Never for something people must act on.
outlinegrey 200 Table rows, lists, boxes and the card. One weight everywhere.
surfaceContainergrey 100 Around the card, and behind a code.
primaryprimary 500 The button and links.
tertiaryprimary 100 The circle behind a step number, and info tiles.

Statuses use the status steps from the color page: success text on success bg for paid and done, warning text on warning bg for due, error text on error bg for failed, and primary 700 on 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.

Parts

Text

HeadlineWhat happened, with the number in it. Poppins 26/32. Every email starts with it.
Section headingStarts a second part of a longer email. Poppins 18/26, 40px above it.
CalloutOne thing people must not miss. Blue for info, amber when something is due, red when something failed.
ListA few things that belong together, each with a line icon, a title and one line, in a bordered card.
Get the appCentered above the footer, in news and welcome emails only.
NoteSmall print under a button or at the end: 15/24 in grey.
Product visualThe product on a softened mesh, right after the headline. For parking and news, never with an amount in it.

Money

SummaryThe amount, what it is and its status. Always the first block after the intro in an email about money.
DetailsEvery fact with a label in one table: references, dates, the plate, and the amounts with the total in bold.
Payment methodHow it was or will be paid, so nobody has to guess.

Actions and account

ButtonsOne blue button for the action that opens that item in the app, with 12px corners. An outline button only for a real alternative.
AttachmentThe PDF with every line, named and with its size. An invoice always points here for the details.
CodeA verification code in mono, centered. No links in the same email.
Security detailsWhere and when something happened to an account, with what to do if it wasn't you.
StepsSomething to do in order, at most four steps.

Examples

An invoice

The email gives the total and the facts to find it back. Every line, with its date, plate and VAT, is in the PDF.

A parking action that stopped

A payment that failed

A verification code

No links and no button: a security email never asks people to click.

News about a feature

The only kind of email with a photo and the store badges.

Building them

Mail clients are not browsers. These rules keep the emails looking the same in Gmail, Outlook and Apple Mail.

TopicRule
FontsPoppins 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.
ImagesThe 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.
CardA 600px table with a white cell. Outlook on Windows drops the corners and the shadow; the hairline keeps the card readable.
ButtonsA link styled as a block, at least 44px high, full width on a phone. Outlook on Windows draws square corners; that's fine.
TablesReal tables with two columns: the label left, the value right-aligned with tabular figures. One rule weight; the total row is bold.
Preview textEvery email has its own, 90 to 110 characters, that adds to the subject instead of repeating it.
Plain textEvery email has a written plain-text version: the headline, the facts as label: value, the link in full and the footer.
PhoneUnder 600px: the card fills the screen, 24px margins, the headline at 26 / 32, the amount at 34, buttons full width.
Dark modeThe card turns secondary 1000 with white for headlines and grey 300 for text, on grey 900. Rules become secondary 800. The button stays primary 500 with white text.

Writing

Personal and to the point. See tone of voice and the word list.

  • 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.
  • Hi and the first name start the first sentence: Hi Sanne, your invoice is ready.
  • Every email about money shows the amount, the reference, the period or date, and how it is paid.
  • Invoices never list their lines. The email gives the total and the facts; every line is in the PDF, and the email says so.
  • Dates with the year: 14 November 2026. Durations in words: 1 hour 43 minutes.
  • What happens next, calmly: when something is due, say what happens if it isn't paid, in a callout, not in the first sentence.
  • No amounts in the product visual. They belong in the summary.
  • No links in security emails: codes, logins and password changes.
  • The footer says why the person gets this email, and it's true for that email.
  • A way out only for news. Anything that records a charge, a parking action or a security event has none.
  • Regards, SimplePark at the end. We are one company, not a team.