Gravety design system & prototype

Colors

One brand color family, two surface modes. Signal and signaleringsplan colors are shared across both sides.

Brand — teal

dark#2A5850

brand#3D7A6E

light#6BA99E

soft#E8F4F2

Client surfaces — warm

bg#FAF9F6

surface#FFFFFF

border#EBE9E4

muted#F2F0EB

accent#E8A87C

Counselor surfaces — cool

bg#F4F5F7

surface#FFFFFF

border#E2E5EA

Typography

text-1#1B2B2A

text-2#5A6B6A

text-3#8E9E9C

Signals — shared

critical#E04F3D

high#E8904A

low#4A7AB5

progress#4A9E72

Signaleringsplan — groen / oranje / rood

groen#45B573

oranje#F5923A

rood#E04545

Typography

DM Serif Display for headings — warm, slightly literary, never clinical. DM Sans for all body text — clean, rounded, readable at small sizes in all three languages.

display-lg

32px / 1.15 / serif

Hoe gaat het met je?

display

24px / 1.2 / serif

Goedemorgen, Jan

heading

18px / 1.3 / serif

Jouw dag van vandaag

subheading

15px / 1.4 / 600

Dagelijkse check-in

body-lg

16px / 1.6 / 400

AI companion response text. Keep it short, warm, and practical. No clinical language.

body

14px / 1.6 / 400

Counselor dashboard body text, labels, and secondary information. Dense but legible.

caption

12px / 1.5 / 400

Timestamps, metadata, confidence scores, secondary labels

label

11px / 600 / caps

Section labels, table headers

Spacing & radius

4px base unit. Border radii follow context: small for dense counselor elements, large for client cards and buttons.

4

8

12

16

20

24

32

40

48

r-4 · counselor tags

r-8 · inputs

r-12 · cards

r-16 · client cards

r-full · buttons

Buttons

Pill shape (full-radius) on the client side. Slightly restrained radius on the counselor side where density matters.

Primary actions

Destructive / danger

Crisis button — client app only

Always visible in client app. Sends direct message to counselor. Fixed position, bottom of screen.

Inputs & toggles

Warm border, rounded corners. Focus ring uses brand-soft — no harsh outlines.

Text input

Toggle — used for consent and settings

Begeleider mag signalen ontvangen

Bijdragen aan gedeelde kennis

Check-in controls

Emoji scale for mood (5-point). Slider for craving, sleep, and irritability (0–10). Word labels in all three languages. No streaks.

Emoji mood scale (5-point)

Gaat wel

Slider — craving / irritability (0–10)

😌 😤

Helemaal niet4 / 10Heel erg

Sleep — hours + quality

Uren geslapen

Kwaliteit

Signaleringsplan phase selector

Cards

Client cards are large, warm, rounded. Counselor cards are compact with more information density.

Client — check-in summary card

Je check-in van vandaag 14:03

Stemming

🙂

Goed

Hunkering

3

/ 10

Slaap

7u

Goed

Irritatie

2

/ 10

Counselor — client list item

JK

Jan Klaasen

Verslaving · Check-in 2u geleden

Hoog · 3 signalen

Briefing card — nieuw patroon

Het kerncomponent van de proactieve dagbriefing. Elk signaal volgt één vast format: Signaal → Onderbouwing → Voorgestelde actie → Bevestigen / Aanpassen / Afwijzen → Feedback. Geldt voor alle vier niveaus.

Signal → Onderbouwing → Actie → Beslissing → Feedback

Hoog · Terugval risico Gisteren 13:11

Maria Pietersen

Gebaseerd op privégesprek — inhoud niet zichtbaar

Waarom dit signaal?

Hunkering 8/10 op 2 opeenvolgende dagen

Gemiste afspraak gisteren

Betrouwbaarheid:

72% Actie aanbevolen

Voorgestelde actie

Kort telefonisch contact vandaag (5–10 min). Vraag hoe het gaat — niet meteen over de gemiste afspraak.

Wat doe je?

Was dit signaal nuttig?

Feedbackknoppen voeden de Gravety Database — het systeem leert welke signalen waardevol zijn en welke ruis zijn.

Signal cards

Two-directional: warning signals (red/orange) and progress signals (green). Every signal shows reasoning and confidence. Private conversation signals show no source content.

Kritiek · Zelfschade risico

Jan Klaasen

"Cliënt noemde dat hij het gevoel had er niet meer te willen zijn."

Nu · 14:22

Waarom dit signaal?

Directe uitspraak van zelfschade-intentie
3 opeenvolgende lage stemmings-check-ins
Slecht geslapen afgelopen 2 nachten

Betrouwbaarheid:

91%

Hoog · Terugval risico

Maria Pietersen

Gebaseerd op privégesprek — geen details beschikbaar

1u · 13:11

Waarom dit signaal?

Hunkering 8/10 op 2 opeenvolgende dagen
Gemiste afspraak gisteren
Kortere, negatiever chat-berichten

Betrouwbaarheid:

72%

Vooruitgang · Stabiele week

Ahmed Hassan

"Cliënt heeft consistent positieve stemming gemeld en noemt zijn doelen."

3u geleden

Waarom dit signaal?

7 dagen op rij check-in ingevuld
Stemming stijgende lijn deze week
Noemde eigen doel in gesprek

Consent items

Required items use brand color. Optional items are white. Sub-items (items 3 & 4 nested under item 2) are visually indented. All copy is available in the client's preferred language.

Badges & labels

Signal severity badges are color-coded. Plan phase labels use full signaleringsplan colors. Counselor-only elements — clients never see severity scores.

Signal severity

Kritiek Hoog Laag Vooruitgang Wacht op data

Signaleringsplan phase labels

Groen Oranje Rood

Confidence score display

91% Actie

54% Monitor

28% Onvoldoende data