Fundering
Alles wat de schermen gebruiken, op één pagina: kleur, typografie, maatvoering, iconen en de contrastcontrole. Elke waarde hieronder wordt rechtstreeks uit het tokenbestand gelezen, dus wat hier staat is wat de app doet.
Kleur
De ruwe schalen staan bovenaan. Daaronder de kleuren met een betekenis: die verwijzen naar een schaal en worden als enige in schermen gebruikt.
Schalen
Primary
primary-50#fce9e1
primary-100#f8dbd0
primary-200#efbeaf
primary-300#e5a28f
primary-400#d9866f
primary-500#cd694e
primary-600#bf4a2b
primary-700#963a22
primary-800#6f2b19
primary-900#4a1c10
Accent
accent-50#eef6f1
accent-100#deece4
accent-200#bdd8ca
accent-300#9cc5b0
accent-400#84ac98
accent-500#6d9480
accent-600#577c69
accent-700#416553
accent-800#2c4f3e
accent-900#173a2a
Green
green-50#e3f1e8
green-100#d4e6da
green-200#b7d1bf
green-300#9abca5
green-400#7ea78c
green-500#629373
green-600#457f5b
green-700#256b43
green-800#1b4f31
green-900#123520
Indigo
indigo-50#e6e9f6
indigo-100#d8dcee
indigo-200#bcc3dd
indigo-300#a0aacd
indigo-400#8692bc
indigo-500#6c7bac
indigo-600#54639b
indigo-700#3d4c8a
indigo-800#2d3868
indigo-900#1d2548
Red
red-50#fdecea
red-100#f8ddd9
red-200#eec0b9
red-300#e2a299
red-400#d5857a
red-500#c7675b
red-600#b8473c
red-700#a8201a
red-800#791813
red-900#4e0f0c
Amber
amber-50#fdf0dc
amber-100#f4e3cc
amber-200#e3c8ad
amber-300#d2ae8e
amber-400#c09570
amber-500#ae7b52
amber-600#9c6334
amber-700#8a4a0c
amber-800#633509
amber-900#3f2206
Neutral
neutral-0#ffffff
neutral-25#fffcfa
neutral-40#f6f4f2
neutral-50#f7f0eb
neutral-100#efe6e0
neutral-150#e9e0da
neutral-200#dad1cb
neutral-300#bdb4ae
neutral-400#a19892
neutral-500#857c77
neutral-600#6b625d
neutral-700#5e5650
neutral-800#3d3732
neutral-900#1f1a17
Met een betekenis
Tekst
text-defaultneutral-900 · #1f1a17
text-mutedneutral-600 · #6b625d
text-actionprimary-700 · #963a22
text-on-actionneutral-0 · #ffffff
text-disabledneutral-500 · #857c77
Iconen
icon-defaultneutral-900 · #1f1a17
icon-mutedneutral-600 · #6b625d
icon-actionprimary-600 · #bf4a2b
Achtergronden
background-pageneutral-25 · #fffcfa
background-workspaceneutral-40 · #f6f4f2
Vlakken
surface-defaultneutral-0 · #ffffff
surface-cardneutral-50 · #f7f0eb
surface-tintprimary-50 · #fce9e1
surface-placeholderneutral-150 · #e9e0da
Randen
border-defaultneutral-100 · #efe6e0
border-strongneutral-500 · #857c77
Knoppen
action-primaryprimary-600 · #bf4a2b
action-primary-hoverprimary-700 · #963a22
action-primary-pressedprimary-800 · #6f2b19
action-secondaryneutral-0 · #ffffff
action-secondary-hoverneutral-50 · #f7f0eb
action-secondary-pressedneutral-100 · #efe6e0
action-disabledneutral-150 · #e9e0da
Focus
focus-ringprimary-700 · #963a22
Status
status-successgreen-700 · #256b43
status-success-surfacegreen-50 · #e3f1e8
status-infoindigo-700 · #3d4c8a
status-info-surfaceindigo-50 · #e6e9f6
status-warningamber-700 · #8a4a0c
status-warning-surfaceamber-50 · #fdf0dc
status-errorred-700 · #a8201a
status-error-surfacered-50 · #fdecea
status-neutralneutral-700 · #5e5650
status-neutral-surfaceneutral-100 · #efe6e0
Decoratief
decorative-accentaccent-300 · #9cc5b0
decorative-accent-surfaceaccent-50 · #eef6f1
Categorieën in het dagverslag
category-arrivalneutral-700 · #5e5650
category-arrival-surfaceneutral-100 · #efe6e0
category-mealamber-700 · #8a4a0c
category-meal-surfaceamber-50 · #fdf0dc
category-sleepindigo-700 · #3d4c8a
category-sleep-surfaceindigo-50 · #e6e9f6
category-careaccent-800 · #2c4f3e
category-care-surfaceaccent-50 · #eef6f1
category-activitygreen-700 · #256b43
category-activity-surfacegreen-50 · #e3f1e8
category-momentprimary-700 · #963a22
category-moment-surfaceprimary-50 · #fce9e1
Typografie
Tien stijlen. Koppen in Plus Jakarta Sans, lopende tekst en labels in Nunito Sans. Elke stijl past zich vanzelf aan de schermbreedte aan; de tabel eronder laat zien hoe.
Goedemorgen, Fenna
Display/L/Bold · .display-l-boldDe dag van Fenna
Heading/L/Bold · .heading-l-boldEten en drinken
Heading/M/Bold · .heading-m-boldMiddagslaapje
Heading/S/Semi Bold · .heading-s-semi-boldFenna heeft haar brood helemaal opgegeten en daarna nog een halve appel.
Body/M/Regular · .body-m-regularFenna heeft haar brood helemaal opgegeten.
Body/M/Bold · .body-m-boldGenoteerd door Sanne om 12:40 uur.
Body/S/Regular · .body-s-regularGenoteerd door Sanne om 12:40 uur.
Body/S/Bold · .body-s-boldOpslaan en sluiten
Label/M/Semi Bold · .label-m-semi-boldNIEUW
Label/S/Bold · .label-s-bold| Stijl | Mobiel (tot 768) | Tablet (vanaf 768) | Desktop (vanaf 1280) |
|---|---|---|---|
| Display/L/Bold | 32 / 40 | 40 / 48 | 48 / 56 |
| Heading/L/Bold | 24 / 32 | 28 / 36 | 32 / 40 |
| Heading/M/Bold | 20 / 28 | 22 / 30 | 24 / 32 |
| Heading/S/Semi Bold | 17 / 24 | 18 / 26 | 18 / 26 |
| Body/M/Regular | 16 / 24 | 17 / 26 | 16 / 24 |
| Body/M/Bold | 16 / 24 | 17 / 26 | 16 / 24 |
| Body/S/Regular | 14 / 20 | 15 / 22 | 14 / 20 |
| Body/S/Bold | 14 / 20 | 15 / 22 | 14 / 20 |
| Label/M/Semi Bold | 15 / 20 | 16 / 22 | 15 / 20 |
| Label/S/Bold | 13 / 16 | 13 / 18 | 12 / 16 |
| layout-margin | 20px | 32px | 40px |
| layout-gutter | 16px | 20px | 24px |
| layout-section-gap | 24px | 32px | 40px |
Witruimte
Tien stappen, allemaal een veelvoud van vier.
Hoeken
Ruim afgerond; dat hoort bij de zachte, warme kant van het merk.
radius-sm12px
radius-md20px
radius-lg28px
radius-full999px
Verhoging
Twee schaduwen, plus de focusring die je hieronder ziet als je met de tabtoets door de pagina loopt.
Elevation 1Kaarten die van de pagina loskomen
Elevation 2Vensters en menu's die over de pagina liggen
shadow-focus-ringWitte tussenruimte, daarachter de ring — leesbaar op elk vlak
Raakvlakken
De kleinste maat waarop iets aangeraakt mag worden. Op de groepstablet krijgen hoofdacties de grootste maat, omdat die met een kind op de arm bediend worden.
target-minElk knopje, overal
target-staff-primaryHoofdacties op de groepstablet
Iconen
37 iconen uit Font Awesome, met dezelfde namen als in de componentbibliotheek. Een icoon staat nooit alleen voor een betekenis: er hoort altijd tekst bij, of een voorleesbaar label.
arrow-left
arrows-rotate
baby
calendar
camera
chevron-right
circle-check
circle-exclamation
circle-info
circle-xmark
clock
comment
delete-left
door-open
droplet
ellipsis
eye
eye-slash
file-lines
heart
image
inbox
leaf
lock
minus
moon
mug-saucer
newspaper
phone
pills
plus
sun
triangle-exclamation
users
utensils
wifi
xmark
Contrast
Elke combinatie die in de app op elkaar komt te liggen, gemeten tegen de eis van WCAG 2.2 AA: 4,5 voor gewone tekst, 3 voor grote tekst, iconen en randen. Uitgeschakelde knoppen en zuiver decoratieve vormen kennen geen eis; die staan er wel bij, met hun echte waarde.
Alle 49 combinaties halen AA
| Voorbeeld | Waarvoor | Combinatie | Eis | Gemeten | Uitslag |
|---|---|---|---|---|---|
| Abc | Gewone tekst op de pagina | text-default op background-page | Tekst · 4,5 | 16,87 | Voldoet |
| Abc | Gewone tekst op de werkruimte | text-default op background-workspace | Tekst · 4,5 | 15,71 | Voldoet |
| Abc | Gewone tekst op een wit vlak | text-default op surface-default | Tekst · 4,5 | 17,24 | Voldoet |
| Abc | Gewone tekst op een kaart | text-default op surface-card | Tekst · 4,5 | 15,28 | Voldoet |
| Abc | Gewone tekst op een getint vlak | text-default op surface-tint | Tekst · 4,5 | 14,68 | Voldoet |
| Abc | Gewone tekst op een plaatshouder | text-default op surface-placeholder | Tekst · 4,5 | 13,25 | Voldoet |
| Abc | Bijschrift op de pagina | text-muted op background-page | Tekst · 4,5 | 5,82 | Voldoet |
| Abc | Bijschrift op een wit vlak | text-muted op surface-default | Tekst · 4,5 | 5,95 | Voldoet |
| Abc | Bijschrift op een kaart | text-muted op surface-card | Tekst · 4,5 | 5,27 | Voldoet |
| Abc | Bijschrift op een getint vlak | text-muted op surface-tint | Tekst · 4,5 | 5,07 | Voldoet |
| Abc | Link op een wit vlak | text-action op surface-default | Tekst · 4,5 | 7,18 | Voldoet |
| Abc | Link op de pagina | text-action op background-page | Tekst · 4,5 | 7,03 | Voldoet |
| Abc | Link op een kaart | text-action op surface-card | Tekst · 4,5 | 6,37 | Voldoet |
| Abc | Tekst op de hoofdknop | text-on-action op action-primary | Tekst · 4,5 | 4,96 | Voldoet |
| Abc | Tekst op de hoofdknop, muis erop | text-on-action op action-primary-hover | Tekst · 4,5 | 7,18 | Voldoet |
| Abc | Tekst op de hoofdknop, ingedrukt | text-on-action op action-primary-pressed | Tekst · 4,5 | 10,32 | Voldoet |
| Abc | Tekst op de tweede knop | text-default op action-secondary | Tekst · 4,5 | 17,24 | Voldoet |
| Abc | Tekst op de tweede knop, muis erop | text-default op action-secondary-hover | Tekst · 4,5 | 15,28 | Voldoet |
| Abc | Tekst op de tweede knop, ingedrukt | text-default op action-secondary-pressed | Tekst · 4,5 | 14,01 | Voldoet |
| Abc | Tekst op een uitgeschakelde knop | text-disabled op action-disabled | Geen eis | 3,14 | Geen eis |
| Abc | Icoon op een wit vlak | icon-default op surface-default | Icoon of rand · 3,0 | 17,24 | Voldoet |
| Abc | Rustig icoon op een wit vlak | icon-muted op surface-default | Icoon of rand · 3,0 | 5,95 | Voldoet |
| Abc | Rustig icoon op een kaart | icon-muted op surface-card | Icoon of rand · 3,0 | 5,27 | Voldoet |
| Abc | Actie-icoon op een wit vlak | icon-action op surface-default | Icoon of rand · 3,0 | 4,96 | Voldoet |
| Abc | Rand van een invoerveld | border-strong op surface-default | Icoon of rand · 3,0 | 4,08 | Voldoet |
| Abc | Rand van een invoerveld op de pagina | border-strong op background-page | Icoon of rand · 3,0 | 3,99 | Voldoet |
| Abc | Focusring op een wit vlak | focus-ring op surface-default | Icoon of rand · 3,0 | 7,18 | Voldoet |
| Abc | Focusring op de pagina | focus-ring op background-page | Icoon of rand · 3,0 | 7,03 | Voldoet |
| Abc | Decoratief accent op een wit vlak | decorative-accent op surface-default | Geen eis | 1,90 | Geen eis |
| Abc | Gelukt, op het eigen vlak | status-success op status-success-surface | Tekst · 4,5 | 5,52 | Voldoet |
| Abc | Gelukt, op een wit vlak | status-success op surface-default | Tekst · 4,5 | 6,44 | Voldoet |
| Abc | Informatie, op het eigen vlak | status-info op status-info-surface | Tekst · 4,5 | 6,68 | Voldoet |
| Abc | Informatie, op een wit vlak | status-info op surface-default | Tekst · 4,5 | 8,08 | Voldoet |
| Abc | Let op, op het eigen vlak | status-warning op status-warning-surface | Tekst · 4,5 | 6,09 | Voldoet |
| Abc | Let op, op een wit vlak | status-warning op surface-default | Tekst · 4,5 | 6,85 | Voldoet |
| Abc | Fout, op het eigen vlak | status-error op status-error-surface | Tekst · 4,5 | 6,36 | Voldoet |
| Abc | Fout, op een wit vlak | status-error op surface-default | Tekst · 4,5 | 7,28 | Voldoet |
| Abc | Neutraal, op het eigen vlak | status-neutral op status-neutral-surface | Tekst · 4,5 | 5,84 | Voldoet |
| Abc | Neutraal, op een wit vlak | status-neutral op surface-default | Tekst · 4,5 | 7,18 | Voldoet |
| Abc | Komen en gaan, op het eigen vlak | category-arrival op category-arrival-surface | Tekst · 4,5 | 5,84 | Voldoet |
| Abc | Komen en gaan, op een wit vlak | category-arrival op surface-default | Tekst · 4,5 | 7,18 | Voldoet |
| Abc | Eten en drinken, op het eigen vlak | category-meal op category-meal-surface | Tekst · 4,5 | 6,09 | Voldoet |
| Abc | Eten en drinken, op een wit vlak | category-meal op surface-default | Tekst · 4,5 | 6,85 | Voldoet |
| Abc | Slapen, op het eigen vlak | category-sleep op category-sleep-surface | Tekst · 4,5 | 6,68 | Voldoet |
| Abc | Slapen, op een wit vlak | category-sleep op surface-default | Tekst · 4,5 | 8,08 | Voldoet |
| Abc | Verzorging, op het eigen vlak | category-care op category-care-surface | Tekst · 4,5 | 8,32 | Voldoet |
| Abc | Verzorging, op een wit vlak | category-care op surface-default | Tekst · 4,5 | 9,15 | Voldoet |
| Abc | Activiteit, op het eigen vlak | category-activity op category-activity-surface | Tekst · 4,5 | 5,52 | Voldoet |
| Abc | Activiteit, op een wit vlak | category-activity op surface-default | Tekst · 4,5 | 6,44 | Voldoet |
| Abc | Momentje, op het eigen vlak | category-moment op category-moment-surface | Tekst · 4,5 | 6,11 | Voldoet |
| Abc | Momentje, op een wit vlak | category-moment op surface-default | Tekst · 4,5 | 7,18 | Voldoet |