See for yourself where your order stands. Without a phone call.
How the Customer portal and Office of Voorbeeld Installatietechniek look and sound. Once the Build brief is signed, this document applies to everything the users see.
Version 1.6 · November 2026
1
The brand
What the apps do, what they replace and what they promise. The rest of this brandbook follows from this.
See for yourself where your order stands.
The promise in one line. The status, the work order and the invoice, without a phone call.
Who we are Given
Voorbeeld Installatietechniek installs and maintains heat pumps and ventilation for companies and schools in Twente.
What the portal does Proposal
In the Customer portal, customers see for themselves where their order stands.
With the work orders, the invoice and the documents. And with a question about the order, if anything is unclear.
What it replaces: the phone call Given
Today customers phone the office. They ask where their order stands, or want a work order or invoice again. That is about 40 phone calls a day.
An office employee then looks up the order file in Exact Online, and sends it by e-mail or WhatsApp.
How it works
Sign in. The customer requests a sign-in link with their e-mail address. No password is needed.
Orders. They see the orders of their relation, each with one status.
Order. They open an order, with its work orders, invoice and documents.
Question. They ask a question about the order. The question sits with that order.
Answer. An office employee answers in Office. The customer gets an e-mail with a link to the order.
Maintenance. The customer chooses a time for the yearly maintenance. Not in this Build
The six steps are those of the Build request, in that order, in the words of the specification. Step 6 is the Bookings add-on (BUITEN-003).
What the apps promise Proposal
One status per order. With the planned date, while it is still to come.
The order files with the order. Work orders, invoice and documents, from Exact Online.
A question sits with the order. The answer comes below it.
An e-mail when your question is answered. With a link to the order.
Sign in without a password. A customer with a link by e-mail, an employee with a passkey.
Who uses the apps
Customer
A contact at a company or school that Voorbeeld Installatietechniek works for: about 1,200 people. They come rarely, and then with one question. Where does my order stand? Where is the work order or the invoice? They often arrive from an e-mail, on their phone.
They want the status at a glance, the order file itself, and a question that does not get lost.
Office employee
About five colleagues at the office, at a large screen. They answer customers' questions, with the order beside them.
They want the oldest question at the top and everything they need to answer on one screen. And fewer phone calls about what the customer can see for themselves.
Administrator
One person who decides who may get in. They invite colleagues to Office. They block a customer's access, and restore it when needed.
Who sees what, and who decides what
Customer.An e-mail address someone signs in with. It belongs to one or more contacts in Exact Online.
Relation.The company or school, with the relation code from Exact Online and at least one order.
Orders.The orders of that relation. Each order has one status, and a planned date while it is still to come.
Order files and questions.With each order, the work orders, the invoice, the documents and the conversation.
Exact Online is the source.The portal shows what is in Exact Online and changes nothing there. Is something wrong in an order? Ask a question on that order.
You see the orders of your own company or school, and only those.Colleagues at the same company or school see the same orders, questions and answers.
Who may get in follows Exact Online.Anyone who is a contact with an e-mail address in Exact Online, at a relation with an order, can sign in. If the address disappears from Exact Online, or the administrator blocks it at that relation, access stops.
No password.A customer signs in with a link by e-mail. An employee signs in with a passkey.
A question is in writing, with the order.An office employee of Voorbeeld Installatietechniek answers. You get an e-mail when there is an answer. You read the text in the portal.
Your data.The portal keeps your name, your e-mail address and your questions, and no phone number. Voorbeeld Installatietechniek is responsible for this, as the controller.
2
Logo
Proposal
No logo was supplied. This logo is a proposal. The brand mark is a blue tile with a white roof and a yellow core: the warmth inside. Beside it stands the name in capitals. Upload your own logo in the platform; it then replaces this logo everywhere.
Primary, on white. The usual choice, on white and on the light page.
Reversed, on blue. Without the tile: roof and name white, the core yellow.
On dark. The tile stays blue, the name turns white.
On yellow. The name in ink, the tile stays blue.
The brand mark alone
The brand mark stands alone as the app icon, favicon and avatar. At 16 px it is a drawing of its own with a thicker line, so the roof stays visible.
128 px
64 px
32 px
16 px, own drawing
Avatar, round
How to rebuild it
The wordmark is drawn: line letters of one weight, on the proportions of Arimo Bold. It is not converted from a font file, and it is not set in Arimo or Arial. The logo consists of paths only, without a font. So always use the SVG file below, and never set the name again in a font.
Value12 units all round: a quarter of the height of the brand mark (48)
SizeSmallest logo
Value222 px wide: line 2 is then 9.8 px high
SizeSmallest brand mark
Value24 px with the usual drawing; 16 px only with the 16 px drawing
Writing the name
In a sentence: Voorbeeld Installatietechniek. Two words, each with a capital.
Never "Voorbeeld Installatie Techniek", "VIT" or "voorbeeld installatietechniek".
Capitals only in the wordmark, never in a sentence.
With BV only where the company is named as a party, such as in the terms and below an e-mail.
Don't
Don't stretch or squash it.
Don't swap the colours: the tile is blue, the core is yellow.
Not without the tile on white: the white roof disappears, and yellow text on white reaches 2.01 : 1.
No shadow, glow or slant.
3
Colour
Blue and yellow are given. Blue carries the brand and every action. Yellow is an accent and never text on white. The other colours are a proposal, each with one task.
Every pair that carries text reaches 4.5 : 1 (WCAG 2.2, 1.4.3). A shape that means something reaches 3 : 1 (1.4.11). Colour never stands alone: a status always has a word and a shape.
Example
Foreground on background
Contrast
Passes (WCAG 2.2)
Use
Aa
PairInk #1B2430 on White #FFFFFF
Contrast15.65 : 1
PassesText (1.4.3)
UseAll text on a card
Aa
PairInk on Mist #F3F6FA
Contrast14.44 : 1
PassesText
UseText on the app page
Aa
PairInk on Mist-2 #E6ECF3
Contrast13.16 : 1
PassesText
UseCard on hover, own message
Aa
PairSoft #4F5B69 on White / Mist / Mist-2
Contrast6.92 · 6.39 · 5.82 : 1
PassesText
UseDate, hint, order number, Cancelled, Closed
Aa
PairBlue #0B5394 on White / Mist / Mist-2
Contrast7.84 · 7.23 · 6.59 : 1
PassesText
UseLink, secondary button, In progress and Planned, focus ring
Aa
PairWhite on Blue
Contrast7.84 : 1
PassesText
UsePrimary button, app bar (both themes)
Aa
PairWhite on Deep blue #083D6E
Contrast11.04 : 1
PassesText
UsePrimary button on hover
Aa
PairDeep blue on Mist-2
Contrast9.28 : 1
PassesText
UseSecondary and text button on hover
Aa
PairWhite on Bar hover #2A6BA2
Contrast5.64 : 1
PassesText
UseMenu item on hover in the bar
Aa
PairInk on Yellow #F2A900
Contrast7.79 : 1
PassesText
UseLabel New, counter (both themes)
PairYellow on Blue
Contrast3.90 : 1
PassesShape (1.4.11); no ordinary text
UseStripe, current tab and focus ring in the bar
PairYellow on White
Contrast2.01 : 1
PassesNo
UseNever: no text, no shape, no focus ring on white
Aa
PairGreen #1B7A3A on White / Mist / Mist-2
Contrast5.40 · 4.98 · 4.54 : 1
PassesText
UseCompleted, Can sign in, Answered
Aa
PairRed #B3261E on White / Mist / Mist-2
Contrast6.54 · 6.03 · 5.50 : 1
PassesText
UseError message, Blocked, danger secondary
Aa
PairWhite on Red; White on #8C1D17
Contrast6.54 · 9.12 : 1
PassesText
UseDanger button, and on hover
Aa
PairOchre #8A5A00 on White / Mist / Soft yellow #FDF3D6
Contrast5.93 · 5.47 · 5.35 : 1
PassesText
UsePartly delivered and Open, warning
PairStrong border #6B7785 on White / Mist
Contrast4.56 · 4.21 : 1
PassesShape
UseBorder of a field and of a frame that means something
Aa
PairOff #6B7785 on Mist-2
Contrast3.84 : 1
PassesExempt (disabled)
UseDisabled button and field; never for anything you must read
Aa
PairInk-d #E8EEF5 on Night / Night-2 / Night-3
Contrast15.45 · 13.75 · 11.43 : 1
PassesText
UseAll text in dark
Aa
PairSoft-d #A9B6C6 on Night / Night-2 / Night-3
Contrast8.76 · 7.79 · 6.48 : 1
PassesText
UseSecondary text, Cancelled and Closed in dark
Aa
PairIce blue #7DB3E8 on Night / Night-2 / Night-3
Contrast8.15 · 7.25 · 6.03 : 1
PassesText
UseLink, secondary button, In progress and Planned in dark
Aa
PairNight on Ice blue; on #A5CBF0
Contrast8.15 · 10.66 : 1
PassesText
UsePrimary button in dark, and on hover
Aa
Pair#A5CBF0 on Night-3
Contrast7.88 : 1
PassesText
UseSecondary button on hover in dark
PairYellow on Night / Night-2
Contrast8.98 · 7.99 : 1
PassesShape
UseFocus ring in dark
Aa
PairGreen-d #5CC98A on Night / Night-2 / Night-3
Contrast8.74 · 7.78 · 6.47 : 1
PassesText
UseGreen statuses in dark
Aa
PairRed-d #FF8A80 on Night / Night-2 / Night-3
Contrast7.90 · 7.03 · 5.85 : 1
PassesText
UseErrors in dark
Aa
PairNight on Red-d; on #FFB0A8
Contrast7.90 · 10.33 : 1
PassesText
UseDanger button in dark, and on hover
Aa
PairOchre-d #F2C14E on Night-2 / Soft yellow-d #2B2410
Contrast9.57 · 9.18 : 1
PassesText
UsePartly delivered and Open in dark
PairStrong border-d #7D8B9C on Night / Night-2
Contrast5.19 · 4.62 : 1
PassesShape
UseField border in dark
The tokens
Every colour has a token with a fixed name, with one value for light and one for dark. The app uses only these tokens, never a loose colour code.
The quotes use Arial. Arial cannot be shipped freely in an app. Arimo has the same width per character and an open licence, so the text runs just the same. Two weights: Regular 400 and Bold 700.
The licence belongs with the files: whoever ships Arimo ships the licence text with it.
5
Motion
In the Customer portal and in Office, something moves only when you do something yourself. Motion shows that it worked, and nothing else.
No big moving moment: customers come here for a status or a work order, and the fastest way there stands still.
The tokens
Every motion uses one of these tokens. They apply in both themes.
Token
Value
What for
Token--vi-duur-feedback
Value100 ms
What forA button, row or link changes colour when you point at it.
Token--vi-duur-klein
Value150 ms
What forThe menu's arrow turns when the menu opens.
Token--vi-duur-binnen
Value250 ms
What forSomething new appears: your question, an answer, or the notice after requesting a sign-in link.
Token--vi-curve-standaard
Valuecubic-bezier(.2, 0, 0, 1)
What forWhat is already on screen and changes.
Token--vi-curve-binnen
Valuecubic-bezier(.05, .7, .1, 1)
What forWhat comes in: quickly into view, calmly to a stop.
Token--vi-afstand-binnen
Value8 px
What forHow far something new slides up as it appears.
What moves, and why
Moment
What happens
Token
Why
With reduced motion
MomentSend question (Customer portal, order)
What happensThe question appears in the conversation: it rises 8 px and becomes visible. Then it stands still. Once it is sent, the notice above it appears the same way.
Token--vi-duur-binnen --vi-curve-binnen
WhyYou see that your question has arrived, and where it is.
With reduced motionThe question and the notice are there at once.
MomentSend answer (Office, question)
What happensThe same: the answer appears below the question.
Token--vi-duur-binnen --vi-curve-binnen
WhyThe office employee sees that the answer has gone and that the customer gets an e-mail.
With reduced motionThe answer is there at once.
MomentRequest sign-in link (Customer portal, Sign in)
What happensThe notice after the request appears in place of the form.
Token--vi-duur-binnen --vi-curve-binnen
WhyThe form is gone because the request worked, not because something went wrong.
With reduced motionThe notice is there at once.
MomentPointing
What happensButtons, order rows, order files, links in the bar and table rows take their hover colour. When the mouse moves away, the colour is back at once.
Token--vi-duur-feedback --vi-curve-standaard
WhyYou see what you are about to choose.
With reduced motionThe colour changes at once.
MomentOpen menu
What happensThe arrow beside your name turns half a turn. The list is there at once.
Token--vi-duur-klein --vi-curve-standaard
WhyThe arrow shows that the menu is open.
With reduced motionThe arrow is the other way round at once.
MomentTo a heading on the same page
What happensThe page scrolls to the heading, which comes into view below the bar.
Tokenthe browser
WhyYou see that you stay on the same page.
With reduced motionThe page jumps to the heading.
What never moves
The status of an order.No blinking or pulsing sign. The status is there as a word and a shape, with the planned date where it belongs.
The focus outline.It is there at once, so you always see where you are.
Loading.The sign beside Sending does not spin and the order list's skeleton does not shimmer. The text says what is happening.
An error.A field does not shake. The error is there at once, by the field.
A button you press.It does not shrink or grow. It takes its pressed border at once.
Changing page, theme or filter.The new one is there at once.
The logo, the order list and dates.Nothing counts up and nothing slides in when a page opens.
Nothing repeats and nothing blinks. Every motion is done within a second, so there is never anything to pause.
Sending a question, frame by frame
This is how a customer sees their question about an order arrive. The frames stand still. Open Play motion to see the motion.
1 · The question typed
Your question
About this order, at most 2,000 characters. You get an e-mail when there is an answer.
Do the classrooms need to be empty for the maintenance?
2 · Sending: the question enters the conversation
Facilities contact
Do the classrooms need to be empty for the maintenance?
Sending…
3 · Sent: the notice is added
Your question has been sent
It is with the order. You get an e-mail when there is an answer.
Facilities contactMon 26 Oct, 11:20Open
Do the classrooms need to be empty for the maintenance?
Frame 3 is also what you see with reduced motion on, and without script. Then the order reloads and the notice and the question are there together.
Play motion
Your question has been sent
It is with the order. You get an e-mail when there is an answer.
Facilities contactMon 26 Oct, 11:20Open
Do the classrooms need to be empty for the maintenance?
The notice and the question rise 8 px and become visible in 250 ms. Close and open this block to see it again. With reduced motion turned on for your device, they are there at once.
The rules
Something moves only when you do something yourself. When a page opens, nothing moves, except what you just sent yourself.
Only what is new moves, and only once. The app puts the class ‘is-nieuw’ on the new part, never on what was already there.
Without script it works the same: after sending, the page reloads and the server puts ‘is-nieuw’ on the new question and the notice.
A screen reader hears the notice from a status line in the app. This document stands still, so that line is only described here.
With reduced motion on, nothing slides or turns and every colour changes at once.
6
Voice
Like our engineers talk: short and clear, no jargon. Businesslike, with a date and a next step.
The tone is given: "Businesslike" and "Like our engineers talk: short and clear, no jargon." The rules, pillars, examples and taglines below are a proposal that follows from it.
Six rules Proposal
Short. At most 15 words per sentence. One message per sentence.
Ordinary words. Say "ventilation with heat recovery", not "MVHR unit". No words from Exact Online in the Customer portal, such as sales order.
Plain “you”. In both apps and in every e-mail. Never stiff or formal, and never switching to “the customer”.
A date, not a vague word. "Planned date: Thu 12 Nov 2026", not "soon".
End at the next step. A notice says what is the case, and what you can do now.
A button says what it does. It starts with a verb: Send question, Block, Restore access.
Four pillars Proposal
See for yourself
Where your order stands, without a phone call.
One status
One word per order. Never two statuses at once, never an empty one.
With the order
Work order, invoice, documents and questions sit with the order they belong to.
In writing
Question and answer sit with the order. Nobody has to remember what was said.
How we say it Proposal
Do: Planned. Planned date: Thu 12 Nov 2026. Don't: Your order will be processed soon.
Do: The work order of 23 October is with order 4093. Don't: Documentation is available in the documents module.
Do: This sign-in link no longer works. Request a new one. Don't: Token expired (error 401).
Do: This is the status as of 09:40. The app tries again every 5 minutes. Don't: Oops! An unexpected error has occurred.
Do: Ask your question on the order. Don't: Please contact our customer service.
Do: After 12:00. The engineer arrives at 12:30 and is done around 16:00. Don't: Your request will be dealt with as soon as possible.
Do: Send question Don't: Click here
The rules also apply to an office employee who answers: a date or a fact, not a procedure.
Taglines Proposal
See for yourself where your order stands. Without a phone call.
The promise from the cover.
Your order, your work order, your invoice. In one place.
Need a work order? It is with your order.
A question about your order? Ask it on that order.
Our words
The words of the specification's Terms. One word per idea. A name always has a capital: Customer portal, Office, Exact Online, Voorbeeld Installatietechniek. Every other word is lower case in a sentence, and takes a capital only at the start of a heading, label, button or status: "Order 4093", but "open the order".
Customer portal (the Customer portal). The app for customers. A name.
Office (in Office). The app for employees. Only the app has this name; the people are office employees.
Installation company (the installation company). The company that uses the apps. The apps always show the name: Voorbeeld Installatietechniek.
Relation (the relation). A company or school in Exact Online, with a relation code and at least one order. The Customer portal shows the name: "Basisschool De Wilg".
Contact (the contact). A person at a relation in Exact Online, with a name and e-mail address.
Customer (the customer). Role: whoever signs in to the Customer portal with an e-mail address. Never the company.
Office employee (an office employee). Role: an employee who answers questions.
Administrator (the administrator). Role: invites employees, blocks a customer's access and restores it.
Sign-in link, sign-in code (a sign-in link, the sign-in code). The link by e-mail that a customer signs in with, and the code in the same e-mail for another device.
Passkey (your passkey). What an employee signs in with, and what the administrator confirms an action with.
Order (order 4093). An order of a relation, with an order number and description.
Status (the status). The one word that says where an order stands: Planned, In progress, Partly delivered, Completed or Cancelled.
Planned date (the planned date). The delivery date from Exact Online. Only with Planned, and with Partly delivered while it is still to come.
Status change (a status change). A change to an order in Exact Online, as Office saw it.
Order file (an order file). A document with an order in Exact Online: a work order, an invoice or another document, with one or more attachments.
Conversation, question, answer (the conversation, your question, the answer). The messages with one order. A question is open, answered or closed.
Access (access). Whether a customer can sign in at a relation: Can sign in or Blocked.
Block, restore access (block, restore the access). End an e-mail address's access at one relation, and lift that block again.
E-mail (an e-mail). The app's only channel. Always e-mail, also in a button or heading.
Words we do not use Proposal
Don't: Dear customer, the user. Do: you, your. One plain way of addressing people in both apps.
Don't: Office, for people. Do: an office employee, or Voorbeeld Installatietechniek. Office is the app.
Don't: ticket, notice, chat. Do: question. That is its name in the app; a notice is something the app itself shows.
Don't: customer service. Do: Voorbeeld Installatietechniek. The company by name.
Don't: sales order, account, token, session, module. Do: order, access, sign-in link. System words mean nothing to a customer.
Don't: track and trace. Do: planned date. The app does not follow a carrier (BUITEN-006).
Don't: status not available. Do: one of the five statuses. A status is never empty (STAT-003).
Don't: soon, as soon as possible. Do: a date or a time. A date can be checked.
Don't: successfully, unfortunately, sorry, oops, just. Do: what is the case, and what you do now. Filler words say nothing.
Don't: in accordance with, by means of, for the purpose of. Do: under, with, for. That is not how an engineer talks.
Don't: easy, simply, seamless, hassle-free. Do: the number of steps. Show it, don't claim it.
7
Components
Every component of both apps, in every state a person can reach. The screens in Applications are built from these alone. The Theme button at the top switches every sample between light and dark.
BehaviourWraps onto more lines, never truncated; knop--vol at 390 in forms
Input field and text area
Both apps
The label is always above the field. An error sits below the field and says what is missing. The input stays.
Empty
The address where you get e-mail from us.
Hover
Focus
Filled in
Error: not filled in
Enter your e-mail address.
Error: not an e-mail address
This is not an e-mail address. Check that it has a dot and a domain.
Disabled
Text area
Empty
Your question
About this order, at most 2,000 characters. You get an e-mail when there is an answer.
Error: not filled in
Your question
Write your question first.
Error: too long
Your question
Will the engineer come before or after 12:00 on Friday? The gym is in use in the morning. …
Your question is too long: at most 2,000 characters. Your text is still there.
E-mail addressThe address where you get e-mail from us.This is not an e-mail address. Check that it has a dot and a domain.
The parts of a field
No.
Part
Type
Size
Colour
Space
Behaviour
No.1
PartLabel
TypeArimo 700
Size14/20
Colour--vi-inkt
Space4 below
BehaviourAlways visible, above the field; never a placeholder as the label
No.2
PartHint
TypeArimo 400
Size14/20
Colour--vi-inkt-zacht
Space4
BehaviourLinked with aria-describedby
No.3
PartInput
TypeArimo 400
Size16/24; min. height 44 (text area 120); border 1; radius 8
Coloursurface --vi-kaart; border --vi-rand-sterk; hover --vi-inkt; focus ring 3 --vi-focus
Spacepadding 9 × 12
BehaviourCorrect type and autocomplete; 16 px prevents zooming on iOS. In the app the text area is a textarea; this brandbook draws it as a surface
No.4
PartError message
TypeArimo 700 + icon 16
Size14/20; input border 2
Colour--vi-fout
Space4 above
BehaviourBelow the field; aria-invalid and aria-describedby; after sending, not while typing; focus moves to the first field in error; the input stays
Sign in
Both apps
Customer portal: one field and one button, no password. After the request everyone sees the same message (SCH-011), with a field for the sign-in code for whoever opens the e-mail on another device. Office signs in with a passkey (SCH-040).
Without script, every state of the Customer portal is a new page from the server. The page title starts with what happened, so a screen reader reads that out first. A sign-in link and its code work for 10 minutes and once. Office sends no sign-in link: employees sign in with a passkey.
The route: in within 2 steps
Step 1 · Enter the address and send
Voorbeeld Installatietechniek
Sign in
Then · The same message for every address
With the field for the sign-in code below it, for whoever opens the e-mail on another device. See the state 2 · Link requested.
The link opens Orders, or the page you had to sign in for, such as the order from an e-mail.
Signing in with a destination, after an expired session and after signing out
Sign in first, then the order
Voorbeeld Installatietechniek
Sign in
Sign in to see order 4093
The link in your e-mail takes you straight to that order.
Session expired
Voorbeeld Installatietechniek
Sign in
You were away for a while
Sign in again. You come back to the page you were on.
Signed out
Voorbeeld Installatietechniek
Sign in
You are signed out
Office: session expired
Office
Sign in
You were away for a while
Sign in again. You come back to the page you were on.
No passkey on this device? A passkey from your password manager works on all your devices. Otherwise, ask the administrator for a new invitation.
Customer portal: sign-in link and sign-in code
1 · E-mail address
Voorbeeld Installatietechniek
Sign in
Enter your e-mail address. You get a link that signs you straight in.
1 · Not filled in
Voorbeeld Installatietechniek
Sign in
Enter your e-mail address.
2 · Link requested
Voorbeeld Installatietechniek
Check your e-mail
Sign-in link requested
Does facilitair@dewilg-enschede.example have access? Then a sign-in link will be in that mailbox within a few minutes. On another device, enter the sign-in code from that e-mail here.
It is in the e-mail with the sign-in link.
2 · Sign-in code is wrong
Voorbeeld Installatietechniek
Check your e-mail
This sign-in code is wrong. Check that you copied it correctly.
Too many tries
Voorbeeld Installatietechniek
Sign in
Too many attempts
Request a new sign-in link. You can do so again at 10:15.
Link used or expired
Voorbeeld Installatietechniek
Sign in
This sign-in link no longer works
It has already been used, or is older than 10 minutes. Request a new one.
Link in another browser
Voorbeeld Installatietechniek
Sign in
Open the link in your own browser
This link only works in the browser you requested it in. Enter the sign-in code from the e-mail there.
Office: signing in with a passkey
Passkey
Office
Sign in
No passkey on this device? A passkey from your password manager works on all your devices. Otherwise, ask the administrator for a new invitation.
Cancelled or refused
Office
Sign in
Signing in did not work
Signing in was cancelled or refused. Try again.
No passkey on this device? A passkey from your password manager works on all your devices. Otherwise, ask the administrator for a new invitation.
Administrator, first sign-in
Office
Register a second passkey
Do it on another device. Only then do you continue.
Voorbeeld Installatietechniek
Sign in
Enter your e-mail address. You get a link that signs you straight in.
The parts of Sign in
No.
Part
Type
Size
Colour
Space
Behaviour
No.1
PartBrand
TypeArimo 700
Sizebrand mark 40; name 16/24
Colourbrand mark fixed; name --vi-inkt
Space12 between brand mark and name
BehaviourThe brand mark with its surface works in both themes. Customer portal: the company name; Office: the app name
No.2
PartTitle
TypeArimo 700
Size28/36
Colour--vi-inkt
Space16 between blocks
Behaviourh1 in the app
No.3
PartExplanation
TypeArimo 400
Size16/24
Colour--vi-inkt; help below the passkey button --vi-inkt-zacht
Space16; a rule separates the message from the code field
BehaviourE-mail: type e-mail, autocomplete e-mail. Sign-in code: type text, autocomplete one-time-code, pasting allowed; below the message after sending (SCH-011). Office has no field (SCH-040)
No.5
PartButton
Typesee Button
Sizefull width
Colourprimary; Sign in with code is secondary
Space—
BehaviourCustomer portal: after sending, the same message for every address; no password. Office: one button with a key icon that asks for the passkey
No.—
PartCard
Type—
Sizemax. 26 rem; radius 12; border 1
Colour--vi-kaart, --vi-rand
Spacepadding 24 (16 below 360)
BehaviourCentred on the page
App bar and menu
Both apps
The app bar is blue in both themes. The Customer portal has no menu of pages. Office has Questions, with the number of open questions, and Customers.
Colourhover --vi-balk-hover; current --vi-geel (3.90 : 1); focus --vi-focus-balk
Spacepadding 0 × 12; 4 between items
Behaviouraria-current="page"; below 600 px a second row. The Customer portal has no navigation: one destination
No.4
PartCounter
TypeArimo 700, tabular
Size24 high, min. 24 wide
Colour--vi-inkt-vast on --vi-geel (7.79 : 1)
Space8 after the label
BehaviourNumber of open questions; for screen readers with a word added
No.5
PartAccount menu
TypeArimo 400
Sizebutton 44 high; list 240 wide
Colourlist --vi-kaart, shadow --vi-schaduw
Space8 below the bar
BehaviourIn the app a details element, works without script; label hidden below 480 px, kept for screen readers. This brandbook draws the open state with the class menu--open
No.—
PartBar
Type—
Sizemin. 56 high; stripe 4
Colour--vi-balk in both themes; stripe --vi-geel
Spacepadding 6 × 8 × 6 × 12
BehaviourNot fixed at the top: it scrolls with the page, so nothing covers a heading
Status label and state
Both apps
Every order has exactly one status from STAT-001, with a word and a shape of its own. The planned date is shown only with Planned, and with Partly delivered while it is still to come.
Status of an order (STAT-001)
In progress
In progress
Planned
Planned
Partly delivered
Partly delivered
Completed
Completed
Cancelled
Cancelled
Labels for a question and for access
Open
Open
Answered
Answered
Closed
Closed
Can sign in
Can sign in
Blocked
Blocked
State: status with planned date (STAT-002)
Planned, with date
PlannedPlanned date: Thu 12 Nov 2026
Partly delivered, date today or later
Partly deliveredPlanned date: Fri 30 Oct 2026
All others: without a date
In progress
Completed
Large, on the order
Partly deliveredPlanned date: Fri 30 Oct 2026
Partly deliveredPlanned date: Fri 30 Oct 2026
The parts of the state
No.
Part
Type
Size
Colour
Space
Behaviour
No.1
PartIcon
Type—
Size16 (large 20), stroke 2
ColourcurrentColor
Space6 to the text
BehaviourA shape of its own per status: circle with three dots (In progress), clock (Planned), half circle (Partly delivered), tick in a circle (Completed), struck through (Cancelled); speech bubble (Open), tick (Answered, Can sign in), speech bubble with a line (Closed), lock (Blocked). Never colour alone
No.2
PartText
TypeArimo 700
Size14/20 (large 16/24)
ColourIn progress and Planned --vi-info; Partly delivered and Open --vi-wacht; Completed, Answered, Can sign in --vi-goed; Cancelled and Closed --vi-inkt-zacht; Blocked --vi-fout
Space—
BehaviourExactly one status per order from STAT-001; an unknown value from Exact Online gives In progress; never empty, never two (STAT-003)
No.3
PartLabel
Type—
Sizeheight 28 (large 36); border 1; radius round
Colourborder currentColor; surface --vi-kaart
Spacepadding 3 × 12 × 3 × 8
BehaviourNot a button: not clickable
No.4
PartDate
TypeArimo 400 (large 700)
Size14/20 (large 16/24)
Colour--vi-inkt
Space12 after the label; wraps to a new line
BehaviourOnly with Planned, and with Partly delivered with a date of today or later (STAT-002); nowhere else. In the app a time element with datetime; short weekday, day, month, year
Order row
Customer portal
The whole row is one link to the order. The New answer label stays until a customer of the relation opens the order.
Order 4093New answerHeat pump, gymPartly deliveredFri 30 Oct 2026
The parts of an order row
No.
Part
Type
Size
Colour
Space
Behaviour
No.1
PartOrder number
TypeArimo 400, tabular
Size14/20
Colour--vi-inkt-zacht
Space8 to the label
BehaviourThe number from Exact Online
No.2
PartNew answer label
TypeArimo 700 + icon 16
Size14/20, radius round
Colour--vi-inkt-vast on --vi-geel
Spacepadding 2 × 8
BehaviourUntil the customer opens the order (SCH-021)
No.3
PartDescription
TypeArimo 700
Size16/24
Colour--vi-inkt; cancelled --vi-inkt-zacht
Space4
BehaviourUnderlined on hover; wraps, never truncated
No.4
PartState
Typesee Status label
Size—
Colour—
Space8 above
BehaviourDate only where STAT-002 says so
No.5
PartArrow
Type—
Size20
Colour--vi-inkt-zacht
Space12 left
BehaviourDecorative (aria-hidden)
No.6
PartCard
Type—
Sizeborder 1; radius 12
Colour--vi-kaart, --vi-rand; hover --vi-kaart-hover and border --vi-actie; focus ring 3
Spacepadding 16; 8 between rows
BehaviourThe whole card is one link to the order
List: loading, no current orders, error
Both apps
Loading shows the shape of the list. With no current order, the list says so and how to reach Voorbeeld Installatietechniek; the earlier orders are below (SCH-024). Error is only for a fault on our side. When Exact Online cannot be reached, the last known state is shown, with its time (SCH-004).
Orders: groups, search, two relations, and Exact Online unreachable
A status always has a word and a shape of its own. The planned date is shown only while it is still to come: with Planned and with Partly delivered. In progress, Completed and Cancelled have no date.
BehaviourTakes the place of Current; Earlier stays below. A relation always has an order (SCH-020), so a list without any order does not exist. Loading: a skeleton in the shape of the cards, aria-busy on the list
Message
Both apps
A message sits at the top of the part it is about. The heading says what is going on, the text what you can do now. It does not disappear by itself.
Info
You are seeing the orders of Basisschool De Wilg
Does your e-mail address belong to more than one school or company? Then choose above the list.
Success
Your question has been sent
It is on the order. You get an e-mail when there is an answer.
Warning
This is the state at 09:40
Newer data cannot be fetched right now, so this may be out of date. The app tries again every 5 minutes.
Error
Your question was not sent
Your text is still there. Try again.
Your question has been sent
It is on the order. You get an e-mail when there is an answer.
The parts of a message
No.
Part
Type
Size
Colour
Behaviour
No.1
PartSurface and border
Type—
Sizeborder 1, left 6; radius 8; padding 12 × 16
Colour--vi-kaart; border --vi-info, --vi-goed, --vi-wacht or --vi-fout
BehaviourAt the top of the part it is about. In the app a screen reader announces an info or success message politely and an error message at once; this brandbook is still and announces nothing
No.2
PartIcon
Type—
Size24
Colourcolour of the border
BehaviourShape per kind: i, tick, triangle, cross
No.3
PartHeading
TypeArimo 700
Size16/24
Colour--vi-inkt
BehaviourWhat is going on
No.4
PartText and actions
TypeArimo 400
Size16/24; actions 8 above
Colour--vi-inkt
BehaviourWhat you can do; does not disappear by itself
Order: header and details
Both apps
At the top are the order number, the description and the status. Below them the order date. Office also shows the relation, the customer and the status changes.
Mon 26 Oct 2026, 07:00StatusfromIn progresstoPlanned
Mon 26 Oct 2026, 07:00Planned datefrom — to Thu 12 Nov 2026
Orders
Order 4093
Heat pump, gym
Partly deliveredFri 30 Oct 2026
Ask a question about this order
Ordered onMon 5 Oct 2026
The parts of the order header
No.
Part
Type
Size
Colour
Behaviour
No.1
PartBack
TypeArimo 700 + arrow 20
Size16/24, height 44
Colour--vi-link
BehaviourTo the list, with the search term or choice it had
No.2
PartOrder number
TypeArimo 400, tabular
Size14/20
Colour--vi-inkt-zacht
Behaviour—
No.3
PartTitle
TypeArimo 700
Size28/36 (in a panel 19/28)
Colour--vi-inkt
Behaviourh1 in the app; the description from Exact Online
No.4
PartState, large
Typesee Status label
Size36 high
Colour—
BehaviourAbove all other details; date only per STAT-002
No.5
PartLink to the question
TypeArimo 400
Size16/24, height 44
Colour--vi-link, underlined
BehaviourOnly on Mobile (below 600 px): jumps to the field for a question (SCH-030)
No.6
PartDetails
Typeterm 400 14/20; value 400 16/24
Sizecolumns min. 160; padding 16; radius 12
Colourterm --vi-inkt-zacht; surface --vi-kaart
BehaviourCustomer: the order date, and the relation when they belong to more than one relation. Office: relation, customer, order date, and below them the changes in Exact Online, newest first (SCH-061). In the app a list of term and value
Order file
Both apps
Work orders, invoice and documents are always there; a group without order files says so. An order file shows its subject and date. Each attachment has a row of its own, with file type and size, and opens in one step. If opening does not work right now, that attachment says so.
Order files
Default
Work orders1
Work order 4093-1, installation day 1Fri 23 Oct 2026
Colour--vi-pagina in the card --vi-kaart; hover --vi-kaart-hover, border --vi-actie; error --vi-fout 700
BehaviourEach attachment its own row and one link; opens the attachment in one step. If it cannot be opened right now, the row says so and the rest stays usable (SCH-033)
No.5
PartOpen
TypeArimo 700
Size14/20 + arrow 20
Colour--vi-link
BehaviourBelow 360 px only the arrow; the word stays for screen readers
The conversation is on the order, oldest first, each message with its time. An answer shows Voorbeeld Installatietechniek in the Customer portal and the office employee in Office (VRG-001, SCH-060). Each question shows whether it is open, answered or closed. A sent message cannot be changed.
Office: answering, closing, and a colleague who got there first
A screen reader reads out every confirmation without the focus moving. Without script the page reloads, with the same message at the top. After an answer or closing there is one button: to the next open question, or to Questions when there are none left.
Office: answer sent
Answer sent
The customer gets an e-mail with a link to the order.
The customer gets no e-mail and sees Closed on the question. It then appears under Answered and closed, with your name.
Office: closed
Question closed
The customer gets no e-mail.
Office: a colleague answered while you were typing
Facilities contact, Basisschool De WilgMon 26 Oct, 11:20
Do the classrooms need to be empty for the maintenance?
Office employeeMon 26 Oct, 11:31
No. Only the space around the units needs to be clear.
Someone just answered, at 11:31
Read that answer first. Your text was not sent and is still there.
Your answer
Yes, move the tables aside.
Customer: with a new answer
Facilities contactMon 26 Oct, 09:14Answered
Will the engineer come before or after 12:00 on Friday? The gym is in use in the morning.
Voorbeeld InstallatietechniekMon 26 Oct, 10:02New
After 12:00. The engineer arrives at 12:30 and will be done around 16:00.
Facilities contactMon 26 Oct, 11:20Open
Do the classrooms need to be empty for the maintenance?
Office: the same conversation
Facilities contact, Basisschool De WilgMon 26 Oct, 09:14
Will the engineer come before or after 12:00 on Friday? The gym is in use in the morning.
Office employeeMon 26 Oct, 10:02
After 12:00. The engineer arrives at 12:30 and will be done around 16:00.
Customer: question closed
Facilities contactFri 23 Oct, 08:30Closed
Can the outdoor unit move a metre to the left? The bikes are parked there.
Empty, with question box
No questions about this order yet
Your question
About this order, at most 2,000 characters. You get an e-mail when there is an answer.
Too many questions today
Your question
Do the classrooms need to be empty for the maintenance?
You asked 20 questions today. You can ask again tomorrow. Your text is still there.
Sending
Facilities contact
Do the classrooms need to be empty for the maintenance?
Sending…
Sent
Your question has been sent
It is on the order. You get an e-mail when there is an answer.
Facilities contactMon 26 Oct, 11:20Open
Do the classrooms need to be empty for the maintenance?
Not sent
Facilities contact
Do the classrooms need to be empty for the maintenance?
Not sent.
Without script
Sending reloads the order. The same message is then at the top, and the question is in the conversation.
Facilities contactMon 26 Oct, 09:14Answered
Will the engineer come before or after 12:00 on Friday? The gym is in use in the morning.
Voorbeeld InstallatietechniekMon 26 Oct, 10:02New
After 12:00. The engineer arrives at 12:30 and will be done around 16:00.
The parts of a message in a conversation
No.
Part
Type
Size
Colour
Behaviour
No.1
PartWho
TypeArimo 700
Size14/20
Colour--vi-inkt
BehaviourWith a question, the customer's name. With an answer in the Customer portal, the installation company's name (VRG-001); in Office, the office employee's name (SCH-060), and with the customer also the relation
No.2
PartTime
TypeArimo 400
Size14/20
Colour--vi-inkt-zacht
BehaviourIn the app a time element with datetime
No.3
PartText
TypeArimo 400
Size16/24
Colour--vi-inkt
BehaviourText only; line breaks stay; no attachments (BUITEN-007); cannot be changed after sending (VRG-004)
BehaviourWraps onto a second row when it does not fit
Table
Office
Office shows lists as a table, the oldest open question at the top. Below 900 px each row becomes a block, with the column heading as its label. Nothing scrolls sideways, and no word breaks in the middle.
QuestionDo the classrooms need to be empty for the maintenance?Facilities contact
The parts of a table
No.
Part
Type
Size
Colour
Behaviour
No.1
PartColumn heading
TypeArimo 700
Size14/20; bottom border 2
Colour--vi-inkt-zacht
Behaviourth scope="col". Questions: relation, order, customer, question, open since (SCH-050)
No.2
PartLink
TypeArimo 700
Size16/24
Colour--vi-link
BehaviourThe start of the question, or the customer's name; opens the question or the customer
No.3
PartFirst cell
TypeArimo 700
Size16/24; padding 12 × 16
Colour--vi-inkt; row hover --vi-kaart-hover
BehaviourThe relation; below 900 px the heading of the block, without a label
No.4
PartSecond line
TypeArimo 400
Size14/20
Colour--vi-inkt-zacht
BehaviourDescription, relation code
No.—
PartOrder and wrapping
Type—
Sizebelow 900 px each row a block, padding 12 × 16
Colour—
BehaviourOldest open question on top. From 900 px columns; dates and buttons do not wrap. Below 900 px each row becomes a block, with the column heading as the label in each cell. A word or e-mail address never breaks in the middle. Never scroll sideways
Search field
Both apps
Search by name, relation or e-mail address, and in the Customer portal by order number or description. Nothing found? Clear search brings the list back.
Empty
By name, relation or e-mail address.
With a value
No result
No customer found for ‘wilgen’
Only people with an e-mail address in Exact Online at a relation with an order are listed here.
Without script
Customer portal
By order number or description.
Search for a customerBy name, relation or e-mail address.
The parts of the search field
No.
Part
Size
Colour
Behaviour
No.1
PartLabel
Sizesee Input field
Colour—
BehaviourVisible; in the app inside a search form (search landmark)
No.2
PartIcon
Size20, 12 from the left and top
Colour--vi-inkt-zacht
BehaviourDecorative
No.3
PartInput
Sizeas Input field; padding left 40
Colour—
BehaviourIn the app type search; with script the list filters as you type, without script with the Search button. Customers: name, relation, e-mail address (SCH-071). Orders: order number, description (SCH-022)
No.4
PartHint
Size14/20
Colour--vi-inkt-zacht
BehaviourWhat you can search by. No result: an empty state with the Clear search button (SCH-024, SCH-074)
Access and blocking
Office
Only the administrator sees Block and Restore access. A block applies to one e-mail address at one relation, and the administrator confirms it with their passkey. Access is Can sign in or Blocked; with Blocked it shows who blocked and when.
The route: blocking in 3 steps
First · Search for the customer (typing does not count as a step)
Step 1 · Block in the row
Steps 2 and 3 · Block in the confirmation, then your passkey
The confirmation below, with the focus on Cancel. Whoever chooses Block confirms with their passkey. Without script it is a page of its own with the same question and the same two buttons.
Then · The row shows the new access at once
Blocked
Blocked by Administrator on Mon 26 Oct 2026, 14:02
Access restored
The customer can sign in again
A new sign-in link works at once. Nothing changes in Exact Online.
Office employee
The same list, to search in, without Block and Restore access. The administrator manages access.
AccessBlockedBlocked by Administrator on Mon 26 Oct 2026, 14:02
Office employee
Name
E-mail address
Relation
Access
Facilities contact
E-mail addressfacilitair@dewilg-enschede.example
RelationBasisschool De Wilg10482
AccessCan sign in
Confirm
Block access for facilitair@dewilg-enschede.example at Basisschool De Wilg?
This address can then no longer sign in at this relation, even if it is in Exact Online again later. You confirm with your passkey.
Done
facilitair@dewilg-enschede.example can no longer sign in at Basisschool De Wilg
A sign-in link that was already sent no longer works either.
Block access for facilitair@dewilg-enschede.example at Basisschool De Wilg?
This address can then no longer sign in at this relation, even if it is in Exact Online again later. You confirm with your passkey.
The parts of the confirmation
No.
Part
Size
Colour
Behaviour
No.1
PartHeading
SizeArimo 700 19/28
Colour--vi-inkt
BehaviourNames who (the e-mail address) and at which relation; wraps anywhere
No.2
PartText
Size16/24
Colour--vi-inkt
BehaviourWhat happens, and that the passkey confirms (SCH-072)
No.3
PartDanger button
Sizesee Button
Colour--vi-fout
BehaviourAsks for the passkey, then carries it out; the table has the secondary form, solid red only here
No.4
PartCancel
Sizesee Button
Coloursecondary
BehaviourGets the focus on opening; Esc closes
No.—
PartRow in the table
Sizestatus 28 high; who and when 14/20
Colourwho and when --vi-inkt-zacht
BehaviourCan sign in: Block button. Blocked: who blocked and when (SCH-070), and the Restore access button, secondary form, without confirmation. Both buttons only for the administrator, with the e-mail address added for screen readers
No.—
PartDialog
Sizemax. 28 rem; padding 24; radius 12
Colour--vi-kaart, --vi-schaduw; backdrop Night 55 %
BehaviourIn the app a dialog element with showModal(); drawn still here
Skip and back
Both apps
Skip to content is the first link on every page. Back goes up one level: the app is two levels deep.
BehaviourCompany name and two links; no phone number (KLAAR-040)
8
Applications
The two apps of the Build, along the journeys of the specification. The Customer portal is shown at phone width, as a customer opens it from an e-mail. Office is shown at desk width, as an employee uses it all day. Every state a person can reach is shown with the component that displays it.
The customer picks a time for the yearly maintenance.Not in this BuildThat is the Bookings add-on: option 2 of the Fit check, or later with Keep building.
Every text on these screens is the text the app shows. No names of people appear: the sample uses roles, such as Facilities contact. The app shows the name from Exact Online.
Customer portal
Mobile first. On an order the progress comes first, then the order files, then the questions. That is the order the eye reads in, and the order the Tab key follows. Every journey, with the number of steps to its outcome:
Journey
Starts at
Steps
All states
JourneySign in without a password
Starts atSign in
Steps2: send the address, then tap Sign in in the e-mail (or enter the code from the e-mail)
Steps2 from an e-mail: the button, then the order. The progress is already in the list. A session only ends after 14 days without use, so you are usually still signed in.
Is the engineer coming on Friday before or after 12:00? The gym hall is in use in the mornings.
Voorbeeld InstallatietechniekMon 26 Oct, 10:02New
After 12:00. The engineer arrives at 12:30 and finishes around 16:00.
Another question about this order?
About this order, at most 2,000 characters. You get an e-mail when there is an answer.
Office
Desk first. Employees sign in with a passkey. On Question the conversation and the order sit side by side, with the status changes below; on a tablet or phone the conversation comes first. In Customers the administrator sees the buttons Block and Restore access; an office employee sees the same list without those buttons. Organisation management, where the administrator invites colleagues, is in every Build and uses the same app bar and components.
AccessBlockedBlocked by Administrator on Mon 26 Oct 2026, 14:02
Site contact
E-mail addresslocatie@devlinder.example
RelationKinderopvang De Vlinder10519
AccessCan sign in
E-mail
The app notifies by e-mail only. Every e-mail has a short summary and ends with one button to the place in the app. The text of a question or answer is never in it, and an order file is never attached. The app receives no e-mail: a reply to an e-mail goes back to whoever sent it. Closing, blocking and restoring access send no e-mail.
E-mail
To
When
The button opens
E-mailSign-in link
ToA customer who asks for it, only if that address has access. Employees get no sign-in link.
WhenRight after Send sign-in link, never delayed
The button opensOrders, or the page the customer had to sign in for. The e-mail also shows the sign-in code.
E-mailNew answer
ToEvery customer with an open question on that order
WhenWhen an office employee answers
The button opensThe order, at the answer. If the customer is signed out, Sign in first, with the order as the destination
E-mailNew question
ToEvery office employee
WhenOn a question about an order with no open question
The button opensThe question in Office
E-mailIntegration
ToThe administrator
WhenWhen the sync with Exact Online stops working, and once when it works again
The button opensThe Management area
The words of every e-mail: a subject that says what it is about, a short summary, and at the end one button with a verb. Below it stands only the company name. The sender is always Voorbeeld Installatietechniek, from mail.voorbeeld.example. That domain accepts no e-mail; whoever writes back gets their e-mail returned (MEL-002, MEL-007).
Voorbeeld Installatietechniek BV · heat pumps and ventilation in Twente
Component
Size
Colour
Behaviour
E-mail header
Size14/20; term 5.5 rem wide; in a narrow e-mail the term sits above the value
Colourterm --vi-inkt-zacht
BehaviourFrom, To, Subject, as the mail client shows them. The New question e-mail goes separately to every office employee (MEL-006)
Brand strip
Sizelogo 222 wide; inner 16; stripe 4
Colourfixed white, stripe yellow
BehaviourFixed light, so the primary logo stays readable in every mail client; in the e-mail as a PNG with alt text
Text
SizeArimo, fallback Arial; 16/24
Colour--vi-inkt
BehaviourA short summary; never the text of a question or answer, never an attachment (MEL-003)
Sign-in code
SizeArimo 700 28/36, letter spacing 0.15 em, tabular
Colour--vi-inkt
BehaviourOnly in the e-mail with the sign-in link, before the button; as text, selectable and copyable (BEV-002)
Button
Sizesee Button, as a link
Colourprimary
BehaviourThe one link every e-mail ends with, to the place in the app
Footer
Size14/20
Colour--vi-inkt-zacht
BehaviourCompany details, after the link (MEL-003)
System pages
An order, order file or question that does not exist or is not yours gives Not found. The page does not say which of the two it is (SCH-005). Office also has No access, for a page only the administrator may open. An error on our side has the same page in both apps.
BehaviourWith the app's app bar, without the menu; inner 48 × 16. Customer portal: an order, order file or question that does not exist or is not yours gives the same Not found page (SCH-005); the Customer portal has no No access page. Office: No access for an employee on an administrator page. Link expired: see Sign in
Order files
The apps make no document or PDF themselves. Every order file comes from Exact Online and opens as it is there, with the subject it has there.
So give an order file in Exact Online a subject the customer understands: "Work order 4093-1, installation day 1", not "WB_4093_1_def". Proposal
Photos and images
An image appears only when it says something. Every image has a text alternative that says what it shows, such as "Voorbeeld Installatietechniek logo".
The portal has no photos. Customers add no attachments, and an order can be found without an image.
An order file shows subject and date; each attachment is on its own line with file type and size. Never a thumbnail.
An icon never stands alone: every icon has its word beside it. For a screen reader the icon is decorative.
In an e-mail the logo is the only image, with a text alternative. The e-mail can also be read without images.
No stock photos of engineers or heat pumps: they say nothing about your order.