Pathly Design System

Back to demo home · Components v0.2 · Light theme only · built on tokens.css

Status pill

Shows the state of a document, request, application or payment. Always icon + label + color, so color is never the only signal.

Comfortable (client portal)

Needed Received In review Needs fixing Complete Expired Waiting on third party Locked Not applicable

Compact (staff console)

Needed Received In review Needs fixing Complete Expired Waiting on third party Locked Not applicable

Deadline marker

Shows when something is due. It is separate from the state: a Needed item can also be overdue. Overdue is the only solid red element in the portal.

Due Thu 22 Oct, in 12 days Due Wed 14 Oct, in 4 days Due today Overdue by 2 days
Needed Overdue by 2 days The marker sits next to the state; it never replaces it.

Button

One primary action per screen. Say exactly what happens: "Upload document", not "Submit". Comfortable is 48px high for the client portal; Compact is 36px for staff.

Comfortable

Compact

Form field

The label is always visible. Errors say what is wrong and how to fix it. Identity fields use "Full name (as on passport)" because spelling must match the passport exactly.

Comfortable

Spelling must match your passport.
Focus state.
Your passport shows "SARA AHMADY". Enter your name exactly as it appears there.
Locked after your case officer verified it.

Compact

Printed on the contract.
Choose a date after today.

Request card

The core client pattern: "What we need from you". One card per request, each with a state, a deadline and one clear action. Waiting-on-third-party items show no button and no due date.

What we need from you

4 items

Bank statement

Last 3 months, PDF, issued by your bank.

NeededDue Wed 14 Oct, in 4 days

Study plan questionnaire

Two answers are missing. See the note from your case officer.

Needs fixingOverdue by 2 days

Choose your universities

We shortlisted 4 options that match your profile.

NeededDue today

Application fee: example university

Pay by bank transfer, then upload your proof of payment.

NeededDue Thu 22 Oct, in 12 days

Other states

Passport copy

Approved on Mon 5 Oct.

Complete

Application: example university

Submitted on Sat 3 Oct. Nothing for you to do. We will tell you when it changes.

Waiting on third party

Language test result

This test is no longer valid (older than 2 years). Please send a new result by Mon 26 Oct.

ExpiredDue Mon 26 Oct, in 16 days

Visa application form

Available after your offer letter is received.

Locked

Document upload slot

Camera-first for phones, with the requirement visible at the point of upload. Uploads resume after a lost connection. A rejected document always shows the reason and a new deadline.

Empty

Bank statement

Needed

PDF, JPG or PNG, up to 10 MB. Last 3 months, showing your name and account number. See a sample

  • Place the page flat in good light.
  • Make sure all four corners are visible.
  • No glare or shadows over the text.
Due Wed 14 Oct, in 4 days
Uploading

Bank statement

Needed
bank-statement-oct.pdf3.2 MB · Uploading 62%
Paused (connection lost)

Bank statement

Needed
bank-statement-oct.pdf3.2 MB · Paused at 62%
Connection lost. Your upload will continue by itself when you are back online. You can close this page.
Uploaded

Bank statement

Received
bank-statement-oct.pdf3.2 MB · Sent today, 09:40

We have it and will review it soon. We will email you when it is checked.

Upload error

Bank statement

Needed
Rejected by staff

Bank statement

Needs fixing
We could not accept this file. Reason: the statement is older than 3 months. Please send one issued after 10 July.
New deadline: Mon 19 Oct, in 9 days

Stage tracker

Shows where the case is across a 6 to 18 month journey. Progress uses the brand color, not status green. The summary is for the dashboard; the full list is for the case page.

Summary

Step 4 of 9

Choose your universities

Next: we start your applications as soon as you choose. Reply by Wed 14 Oct.

Full list
  1. Contract signed

    Done on Mon 7 Sep

  2. Initial documents

    Done on Fri 2 Oct

  3. Document review

    Done on Thu 8 Oct

  4. Choose your universities (current step)

    You are here. 1 decision needed.

  5. Applications

    We submit them for you

  6. Offers

  7. Visa preparation

  8. Visa application

  9. Decision

Timeline

A running history of the case. It answers "what is happening?" without a phone call. Most recent first. Dates are absolute plus relative.

  1. University options sent to you

    We shortlisted 4 options. Please choose by Wed 14 Oct.

    Today, 09:10 · Your case officer
  2. All documents approved

    Your file is complete.

    Thu 8 Oct, 16:25 · Document team
  3. Bank statement needs fixing

    The statement was older than 3 months. New deadline: Mon 19 Oct.

    Tue 6 Oct, 11:02 · Document team
  4. You uploaded 6 documents

    Fri 2 Oct, 20:44 · You
  5. Contract signed. Welcome!

    Your document checklist is ready.

    Mon 7 Sep, 14:00 · Your case officer

Message thread

Secure messages tied to the case. They replace email back-and-forth. Incoming messages align to the start, the client's own to the end, so the layout mirrors automatically in a right-to-left language.

Your case officer · Today, 09:12

Hello! I sent you 4 university options. Which ones would you like us to apply to?

You · Today, 09:30

Thank you. Can I choose two now and decide on the others later?

Your case officer · Today, 09:41

Yes. Please choose the first two by Wednesday. I attached the fee overview.

fee-overview.pdf · 180 KB

Empty state

Used when there is nothing to show. For long waits, it reassures: it says what is happening and what the client should do (often nothing).

Nothing needed from you right now

Your case officer is preparing your applications. We will email you as soon as something changes.

No messages yet

When your case officer writes to you, the message will appear here.

Review panel (staff)

Where a document specialist approves or rejects a file. Compact density. A rejection needs a reason and a new deadline, and shows a preview of the message the client will see.

bank-statement-oct.pdf

In review

Bank statement

Example client · CA-STU-0142 · Uploaded today, 09:40

Requirement checks

  • Format is PDF
  • Size is 3.2 MB (maximum 10 MB)
  • Name matches passport
  • Issued within the last 3 months: statement ends 30 June
Decision
The client will see: "We could not accept this file. Reason: the statement is older than 3 months. Please send a statement issued after 10 July by Mon 19 Oct."
Your case officer · 09:12

Hello! I sent you 4 university options.

You · 09:30

Thank you. I will choose today.

Connection lost. Your upload will continue when you are back online.

KPI card and icon chips

Several figures in one white card, each with a tinted icon chip. Used for the summary row at the top of a dashboard. The tint adds meaning only together with the label.

2 of 6Documents complete
4Open requests
34Days since your contract
TodayNext deadline

Side card, help card and meters

The side card holds one headline figure, an illustration, two thin meters and one dark action. The help card sits in the sidebar and offers support in a friendly voice.

Contract payments

40%of your contract is paid
Paid 40%
Remaining 60%

Next: application fee, due Thu 22 Oct.

See payment details
Questions about your case?

Your case officer replies on working days.

Send a message

Illustrations

Line illustrations use the text color for outlines and the brand tints for fills. Decorative: hidden from screen readers.

Path chart

A smooth curve with one highlighted point and a dark tooltip. On a client dashboard it shows the case journey; on the staff console it shows weekly volume. The chart always has a text alternative, and scrolls sideways on narrow screens instead of shrinking its text.

Your path

Step 4 of 9
Your path: step 4 of 9 You have finished contract signed, initial documents and document review. You are now on choose your universities. Step 4 of 9Choose your universities ContractDocumentsReviewUniversitiesApplicationsOffersVisa prepVisaDecision

Table card, tabs and switch

Staff work lists: a title, tabs, a search field and a switch above a data table. The table scrolls sideways on narrow screens. Row actions name the row for screen readers.

Work queue

Example work queue
ClientCaseDocumentWaitingStatusAction
Hamid R.CA-STU-0150Language test result5 daysIn review
Ali M.CA-STU-0119Transcript (translated)2 daysIn review
Sara A.CA-STU-0142Bank statement2 hIn review

Page shells

The full screens, live. Open them in their own tab to test keyboard use and zoom.

Client dashboard Document upload Case timeline Staff review queue