Duna · Tada · REV-528

Shape & color

To discuss — flip the options live

1 · Accepted — black or green?
Accepted Rejected

Accepting is the happy path, so it stays quiet — in finance, black reads as positive ("in the black"). Green is the conventional "good" reading if analysts expect it. Either way, rejected keeps the one loud color. Flipping this re-renders every Accepted mark on the page.

2 · External realm — purple or blue?
Awaiting reply Worth knowing
Awaiting reply — follow-up sent Jul 12
Could you upload a bank statement for the third UBO?

Purple is the current pick — the connection's cool hue, "not the analyst's move." Blue is worth a look: "warm, not blue" governs our side, and the connection's realm sits outside it, so a cool blue there could reinforce "not us." Flip to blue and it recolours every external mark; it's a one-off, not a main token.

3 · Awaiting sign-off — the approver's color?
Awaiting sign-off
Awaiting sign-off — decisions are locked
To make changes, retract the request.

Green is the pick — sign-off is approval, so it leans on the familiar "cleared / go" reading. Sand is the quieter alternative; gray is the neutral holding option.

4 · Recommendation — model or rule, one mark
Rule — UBO threshold met: 3 owners above 25%.
Model — source of funds looks consistent with declared turnover.

A recommendation can come from a deterministic rule or a model — the analyst shouldn't have to care which. Both carry the same Duna asterisk. Shown here just to illustrate the mark; not an either/or to decide.

5 · Low risk — which colour?
Low risk
Nothing needs attention on this review.

The top of the ladder is loud on purpose (alarm → critical → needs attention). The open question is the bottom: should low risk carry a colour at all? My lean is neutral — it matches the decided principle that the happy path stays quiet, so colour always means action. Green or sand are here if a visible all-clear tests better. Flipping this updates the Low-risk card in the Risk score section.

Awaiting sign-off — colour lab

Try a candidate hue for the approver state. Background, tinted and tinted-muted derive from the one main colour, and it drives the Awaiting sign-off badge, lock banner and Decide preview live. Picking an option in the topic above hands control back.

Hue140°
Saturation22%
Lightness55%
Awaiting sign-offusing the option selected in the topic above

Principles

Never color aloneEvery status is icon + label; color is the accelerator, not the message.
Every color has meaningNo hue is decorative. Each one is assigned a single job — whose move, how urgent, what was decided — and never reused for anything else. About six carry the whole dashboard.
Accepted is quiet, rejected is loudAccepting is the happy path, so it stays black. The rare rejection earns the one loud color: a faint red badge.

Color & meaning

Every hue earns its place by meaning, not decoration. Our side stays warm; purple is the one cool hue, reserved for the external realm.

Accentsand
The everyday accent — "worth knowing." Gentle emphasis and recommendations. The default when something wants a touch of color but isn't a problem.
Needs attentionorange
A gap or problem to look at. Also what an Open review wears (your move), and what marks NOW on a timeline.
Criticalred
Stop. Critical severity and rejected outcomes — one shared color. The single loud, un-muted hue, used rarely and on purpose.
Final passblue
Approval — the final pass. A calm blue sets the approver's state apart from the active-work hues, so a review parked with an approver reads as on its way through.
Externalpurple
The connection's realm — the one cool hue. Anything waiting on the outside (replies, submissions, messages out). Its AI-adjacent feel reinforces "not the analyst's move."
Neutralclay
No signal — the quiet baseline. Low-risk reviews and anything that shouldn't spend colour. Built on the clay scale.

Statuses & outcomes

Statuses

The icon carries the state; color reinforces it. Open ⇅ Awaiting reply with the connection; from Open it goes to sign-off, then finalizes.

Open ⇅ Awaiting reply
→ Awaiting sign-off → Finalized | Canceled
  • Open — saffron: in your hands, ready to work.
  • Awaiting reply — lilac: with the connection; their clock.
  • Awaiting sign-off — green: parked with an approver.
  • Finalized — neutral end-state; no checkmark (it can contain rejections).
  • Canceled — muted: the path ended without a conclusion.
Onboarding statuses
Not started Awaiting submission Open Awaiting reply Finalized Canceled Expired

One shape for the connection's realm: Not started, Awaiting submission, and Awaiting reply all use the purple broken circle — they're all with the connection, not with us. Not started looks the same as Awaiting submission on purpose. Expired stays muted dashed (it withered while waiting) — colorless, because the clock ran out.

Outcomes

Accepted Rejected

Outcomes record what was decided. Accepted is the happy path — a black check on the quiet chip. Rejected is the rare loud case — a faint red badge, mark and label one deep red. A review can hold several at once, which is why a Finalized review shows marks but never wears a checkmark itself.

Severity — four levels

Worth knowing
This connection had 2 previous reviews.
Needs attention
Bank statement covers only 2 of 3 UBOs.
Critical
Screening returned a sanctions match for the primary UBO.
Alarm
Confirmed sanctions match — the review is blocked and escalated to the MLRO.

Four levels, each a faint tint of its own colour with a dot — worth knowing (sand) · needs attention (orange) · critical (red). Alarm inverts critical — solid, white text — the rare drop-everything case. The same tints grade risk chips; all AA-checked.

The external realm — lilac

One hue for everything that crosses to the connection. It shows three faces in the UI:

1 · Status badges — review and onboarding

Awaiting reply Awaiting submission

2 · The state call-out — on the review Overview

Awaiting reply — follow-up sent to Toscana Cantine Srl · Jul 12
Could you upload a bank statement for the third UBO?
The review reopens when they respond.

3 · The message field — writing to the outside

Message to Connection ⓘ

Recommendation — the Duna mark

System suggestions (model-generated or deterministic — the analyst shouldn't have to care) carry the Duna asterisk on the quiet sand treatment. Marker still open for discussion; asterisk shown as the current favorite.

Duna suggests AI
Mark "Verify ownership structure" as complete — registry extract and shareholder ledger match.
Based on 2 documents · always shows its evidence
AI assessment, may contain errors

Shape language

Circles are statuses. The circle is the case's container; what's done to it — empty, broken, filling, solid, struck-through — says where the case sits. Read like a battery.

Bare marks are outcomes. A verdict isn't a position, so Accepted and Rejected go unenclosed. Circle = status, no circle = outcome. The Duna asterisk sits outside both.

Circle family · statuses

OpenEmpty circle — nothing concluded yet.
ConnectionBroken outline — the case is with the connection; their clock. Purple in use.
Awaiting sign-offNearly filled — one act remains.
FinalizedSolid disc — an end-state, not an approval.
CanceledCircled ✕ — ended without a conclusion (bare cross = Rejected).

Bare marks · outcomes & system

AcceptedThe decision "yes" — a bare check, in black.
RejectedThe decision "no" — red, the loudest outcome.
RecommendationThe Duna asterisk — model or rule, one mark.

Dashboard preview

Not the actual product design — these are demo mock-ups, only here to give a sense of how the tokens read in a real dashboard UI.

Overview — awaiting reply (reviewer's view)

Toscana Cantine Srl
Review
Overview›››Decide
Awaiting reply
Awaiting replyfollow-up sent Jul 12: "Could you upload a bank statement for the third UBO?" The review reopens when Toscana Cantine responds.
Food production company in Italy. Mid-sized operation. Active for 27 years.
✳ Generated by Duna, may contain errors
Key risk signals
Bank statement covers 2 of 3 UBOs 2 previous reviews
Access
Maintain access to Payments processing Approved
Maintain access to Business banking Approved

Review queue

Review queue · 95 results — demo data
Connection
Progress
Status
Decision(s)
Priority
Last activity
Assignee
TToscana Cantine Srl
Finalized
2
High
April 30
Bas
MMilano Tessuti Srl
Awaiting reply
Pending
Medium
April 30
Joost
BBarcelona Tech Studios SL
Open
Pending
Medium
April 30
Unassigned
SSevilla Aceite SL
Finalized
2
Medium
April 30
Joost
BBayern Bio Lebensmittel GmbH
Awaiting sign-off
1
High
April 29
Mara
FFrankfurt Finanzberatung GmbH
Finalized
1
High
April 29
Me
EEdinburgh Whisky Casks Ltd
Open
Pending
Medium
April 29
Joost
JJutland Smoked Fish ApS
Finalized
11
Medium
April 29
Avital

Decide — awaiting sign-off (approver's view)

Bayern Bio Lebensmittel GmbH
Review
Overview›››Decide
Awaiting sign-off
Awaiting sign-offDecisions are locked while awaiting sign-off. To make changes, retract the request.
Lending
Accepted Ownership chain verified — remaining source-of-funds question is covered in the note to the approver.
Sign-off
Requested by Mara Jansen · Jun 30, 14:20
Check source of funds — bank statement covers only 2 of 3 UBOs.
Waiting for an approver to sign offNOW
If approved, the review is finalized. If returned, it goes back to the reviewer.

The lock banner and header badge stay in the sign-off sand (deeper tint — sign-off state information); the risk chip grades on the severity tones; the outcome marks (black check, red cross) appear only where a judgement lives. The decision area itself stays skeletal — that design is TBD.

Components

Where the system lands on real components — the current Shadcn variant first, the color-system variant beneath. Flip light / dark (top-right) to check both.

Badges

Current · Shadcn
Default
Secondary
Destructive
Outline
Status badges — circle family + colour
OpenAwaiting replyAwaiting sign-offFinalizedCanceled
Outcome badges — bare marks, own icons
AcceptedRejected
Coloured badges — solid main, white text
AccentNeeds attentionCriticalSign-offExternal

Buttons

Current · Shadcn
Decision buttons — primary
Decision buttons — secondary

Callouts new

A new component — the Shadcn Alert, restyled: alpha fill, hairline border, neutral title, tinted body, and an icon slot (a placeholder here; the previews pass the real marks). Two layouts — block and inline — in every colour, plus the solid alarm variant.

Block
Recommendation
Registry data matches the submitted details.
Needs attention
Bank statement covers only 2 of 3 UBOs.
Critical
Screening returned a sanctions match for the primary UBO.
Awaiting sign-off
Ready for the MLRO’s final pass.
Awaiting reply
Follow-up sent to the connection · Jul 12.
Alarm
Confirmed sanctions match — the review is blocked and escalated to the MLRO.
Inline
RecommendationRegistry data matches the submitted details.
Needs attentionBank statement covers only 2 of 3 UBOs.
CriticalScreening returned a sanctions match for the primary UBO.
Awaiting sign-offReady for the MLRO’s final pass.
Awaiting replyFollow-up sent to the connection · Jul 12.
AlarmConfirmed sanctions match — the review is blocked and escalated to the MLRO.

Risk score

How the treatments ladder up as risk rises — a quiet low-risk state through to the inverted alarm when a review is blocking. The icon carries each level’s colour.

Low risk
QuietNothing to act on — the calm end of the scale. Colour chosen in To discuss below.
Medium risk
Needs attentionWorth a look before moving on.
High risk
CriticalA real problem the analyst has to resolve.
Blocking
AlarmStop everything — the inverted alarm (solid critical, white).

Primitives & tokens

Six colours — five semantic hues plus a clay-based neutral — each a full scale (50–950). Every colour exposes four tokens: --{color}-background (main × opacity, so it composites with the surface), --{color} (main), and two tinted text levels --{color}-foreground-tinted (body) and -tinted-muted (secondary). The values below reflect the token tuner (top-right) live; primary text uses the neutral --foreground.

backgroundsurfaces · fills · callouts
maindots · icons · marks
tintedbody on the tint
tinted-mutedsecondary text
accent
Accent
8% · 1.00×
500
800
700
attention
Needs attention
9% · 1.20×
500
800
700
critical
Critical
8% · 1.00×
600
800
700
signoff
Sign-off
9% · 1.30×
500
800
700
external
External
9% · 1.40×
500
800
700
neutral
Neutral
4% · 1.70×
500
800
700

The underlying scales — --{color}-50 … 950.

50
100
200
300
400
500
600
700
800
900
950
accent
attention
critical
signoff
external
neutral