Jinnee OS · Design Language v1

The interface for managing a digital workforce.

A dark, premium, motion-aware system built for AI teammates that never stop working. Every token, surface and status below is reusable across the product.

color

Color system

A near-black canvas, one raised surface family, Cyber Grape for intent and Acid Lime reserved for live, energetic moments.

Background

#09090B

Surface

#111113

Surface raised

elevated

Border

hairline

Primary

#6D28D9

Accent

#D7FF00

Muted

text rail

Destructive

critical

typography

Typography

Geist at tight tracking. Display for statements, tabular mono for every number an agent produces.

Display · 72/1.02

Your workforce, always on

Heading 1 · 48

Twelve agents working right now

Heading 3 · 20

Revenue Operations Agent

Body · 17/1.6

Agents report their reasoning in plain language, so a manager can audit a decision the same way they'd review a colleague's work.

Numeric · tabular mono

1,284 tasks · 99.2% · $412.60

buttons

Buttons

Pill geometry, spring press, glow only on the primary intent.

inputs

Inputs

Sunken fields on raised surfaces, with a soft primary halo on focus.

status

Status system

Six states describe the life of an agent. Live states breathe; static states stay quiet.

ThinkingWorkingWaitingReviewingConnectedOffline

agents

Agent cards

The atom of the product: identity, live task, progress and trust metrics in one surface.

AV

Ada Vance

Working

Revenue Operations Agent

Current task

Reconciling 412 invoices against the Q3 ledger

Progress68%

34

Tasks today

99%

Accuracy

NI

Noor Idris

Thinking

Research Analyst Agent

Current task

Synthesising competitor pricing across 9 markets

Progress24%

12

Tasks today

97%

Accuracy

KI

Kepler Ito

Waiting

Support Triage Agent

Current task

Awaiting approval to refund order #A-3391

Progress90%

128

Tasks today

96%

Accuracy

cards

Cards & surfaces

One radius, one hairline, three elevations. Nothing floats without reason.

default surface
24px radius, 1px hairline border, soft shadow tuned for near-black backgrounds.
raised surface
24px radius, 1px hairline border, soft shadow tuned for near-black backgrounds.
accent surface
24px radius, 1px hairline border, soft shadow tuned for near-black backgrounds.

charts

Charts

Sparse, unlabelled where possible. Data reads as texture first, detail on hover.

Tasks completed

1,284
12%vs last week

Avg. handling time

2.4min
8%faster

Fleet capacity

Headroom before the next agent is provisioned.

72%

in use

Throughput by day

Mon
Tue
Wed
Thu
Fri
Sat
Sun

tables

Tables

Hairline rows, tabular numbers, status as the only color in the grid.

AgentWorkflowStatusDurationCost
Ada VanceInvoice reconciliationWorking04:12$0.42
Noor IdrisMarket synthesisThinking11:48$1.86
Kepler ItoRefund triageWaiting00:37$0.05
Mira SolveigContract reviewReviewing07:02$0.94
Otto LindqvistNightly data syncOffline—$0.00

feed

Activity feed & timeline

The heartbeat of the workspace — proof that the workforce never stopped.

Live activity

  • Ada Vance closed Invoice #4482

    12s

  • Noor Idris is reading 9 pricing pages

    1m

  • Kepler Ito needs approval on Refund A-3391

    4m

  • Mira Solveig flagged Clause 7.2

    9m

  • Otto Lindqvist went offline

    22m

Run timeline

  1. Task assigned

    09:02

    Reconcile Q3 ledger against Stripe payouts.

  2. Plan drafted

    09:03

    Seven steps, two requiring human approval.

  3. Executing step 4/7

    09:11

    Matching 412 invoices by reference.

  4. Awaiting approval

    09:26

    Two mismatches above the $5k threshold.

motion

Motion & spacing

Slow easing (0.22, 1, 0.36, 1), 2px lifts, breathing indicators. Nothing bounces, nothing snaps.

Fade + rise

600ms · entrances

Scale in

320ms · overlays

Breathe

2.6s · live agents