jobnest · design

Tokens

Colours, type scale and radii. Everything is a CSS variable, so light, dark and any accent re-theme every component at once.

--accent
--card
--chip
--left
--nav
--btn
--inp
--line
--ring
--rcard
--red-bg
--orange-bg
--green-bg
--blue-bg
--purple-bg
--grey-bg
Display 48Title 28Heading 18Body 14Caption 12
r-sm
r-md
r-lg
r-xl
r-pill

Icons

One line-icon set. Add a path to Icon.tsx and it is available everywhere by name.

home
building
board
mail
check
tick
wallet
users
user
plus
close
clock
shield
pen
trash
arrow
back
chev
cal
play
stop
note
table
flag
search
bell
ban
history
split
bill
copy
list
key
send
star
chat
lock
sun
moon
spinner
grip
upload
file

Button

Variants, sizes, leading and trailing icons, loading and disabled states. Pass href to render a link.

<Button>Save application</Button>

Props

IconButton

Round icon-only button. A label is required for accessibility.

<IconButton />

Props

Chip

Small status or tag pill with an optional icon. Tones come from the token set.

Verified
<Chip>Verified</Chip>

Props

StatusChip

Maps a domain value (stage, priority, payment, account) to a tone and icon in one place, so a status looks identical on every screen.

RequestedApprovedTo be paidPaidRejectedLocked
<StatusChip />

Props

Avatar and AvatarStack

Initial avatar with a stable colour per name, and an overlapping stack with a +N overflow.

JSO+2
<AvatarStack />

Props

Form fields

Input, Textarea, Select, Checkbox, Toggle, Segmented and FileDrop. Labels, hints and errors are wired for screen readers.

The login email for this account.
Enter a number

Banner

Inline message with a tone, icon, title, body and optional action.

Task done: Review payment request
Closed automatically when you approved it.
<Banner>Closed automatically when you approved it.</Banner>

Props

EmptyState, Skeleton, ProgressBar

The three states every list needs: nothing here, loading, and progress.

No payments yet
Payments you record will show up here.
<ProgressBar />

Props

Toast

Call useToast() anywhere under the provider.

Tabs

Pill tabs with icons and counts. Controlled or uncontrolled.

Selected: overview

Stepper

Shows where a record is in a workflow, such as Requested → Approved → Paid.

  1. Requested
  2. Approved
  3. Paid
<Stepper />

Props

KpiTile

Headline number with a tag, in white, accent or black.

To be paid
$1,840
4 work orders
<KpiTile />

Props

BarChart

Simple accessible bars. The highest bar takes the accent.

<BarChart />

Props

DataTable

Sortable columns, row selection, a bulk-action bar and row click. Click headers, tick rows.

Status
JJames BrownMeridial$600To be paid
SSara LinHalcyon$480Paid
OOmar ReyesNorthwind$360Requested
EElena VossMeridial$400To be paid
<DataTable />

Props

Timeline (audit log)

System entries are locked and cannot be changed. Notes can be edited or deleted.

Oct 2 • Amara OkoyeSystem

Payment request sent: $150, WO-1043

Oct 1 • YouSystem

Payment request approved. Amount and split edited

Sep 24 • You

Payout went through the Meridial portal, ref TX-48213

CountdownPill

Red when overdue, accent under 24 hours, neutral otherwise.

4h 18m left
<CountdownPill />

Props

AccountRow

Account list row with company, email, and Working, Verified or Terminated status.

JJames BrownMeridialcareers.alt@mail.comVerifiedWorking$600 to be paid
<AccountRow />

Props

TaskCard

Manual tasks have a checkbox. Auto tasks are created by events, show what closes them, and link to the page where the action happens.

Review payment request, $600

James Brown · Meridial · from Amara Okoye
High
Auto taskPayment request
20h left
Done when: you approve, reject or send back
<TaskCard />

Props

Auto task lifecycle (live)

Click the button: the review task leaves, and the follow-on task is created by a rule, with motion. This is the feel every event-driven change should have.

Review payment request, $600

James Brown · Meridial · from Amara Okoye
High
Auto taskPayment
20h left
Done when: you approve, reject or send back

MoneyInput

Amount, currency and the rate you type. Shows what it counts as in your main currency.

Counts as 3.47 USD in your totals

SplitEditor

Divide a payment between parties, each tagged Own or Bill, with a live check that it adds up.

Split adds up to 600

ProofAttachment

Proof of payment is optional: a message, a file, or both.

Proof is optional

ApprovalBar

Request → approve → paid, with the actions that apply at each stage. Locked once paid or rejected.

  1. Requested
  2. Approved
  3. Paid
Status: Requested

AccountPicker + VariableTextEditor

Create one task for many accounts. Variables like {account} are filled in per account in the preview.

2 of 4 accounts selected
JJames BrownMeridial · careers.alt@mail.comAmara Okoye
SSara LinHalcyon · jobs.main@mail.comAmara Okoye
OOmar ReyesNorthwind · portfolio@mail.comDaniel Mwangi
EElena VossMeridial · elena.v@mail.comAmara Okoye
Insert:
Preview per account
James Brown · sent to Amara Okoye
Confirm payout method for James Brown
Sara Lin · sent to Amara Okoye
Confirm payout method for Sara Lin

TimerWidget

Counts from a start timestamp, so the server is the source of truth.

Tracking
01:24:36
Meridial · Ticket review

AppShell

The two-panel layout: cream working panel on the left with navigation, charcoal context panel on the right.

Working Accounts

6 working • 3 verified • 1 terminated

JJames BrownMeridialcareers.alt@mail.comVerifiedWorking$600 to be paid
PPriya NairLumen Labspriya.n@mail.comTerminatedPaid $1,070 in Sep
To be paid
$1,840