JUNIOR DESIGN LANGUAGE · V1.0

Calm Clinical + AI Glow

Safe, Effective, Compliant, Feature Rich… yet Beautiful and Easy to Use. A light, trustworthy clinical base with one vivid gradient reserved exclusively for AI — so provenance is legible at a glance, everywhere.

01 · Surfaces & Ink

Paper
#FAFAF7
Surface
#FFFFFF
Surface 2
#F3F4F0
Border
#E3E5DE
Ink
#171A1E
Ink 2
#4A5058

02 · Marine (brand primary) & the AI gradient

Marine 900
#063B38
Marine 600 · actions
#0E6E65
Marine 100 · tint
#DDF0ED
AI Gradient ✦
#6D5EF3→#19B8D9
AI Indigo
#6D5EF3
AI Cyan
#19B8D9

The provenance rule: the gradient and the ✦ glyph mark AI-originated content and actions — and nothing else. Ordinary chrome never uses it. White-label partners may replace Marine; the AI gradient is platform trust infrastructure and stays constant.

03 · Type

Sora 300 · 28–36px · greetings/numbers
Good morning, Maria.
Sora 600 · 18–22px · workspace titles
Forms Library
Inter 600 · 13–14px · labels, buttons
Request publish
Inter 400 · 14–15px / 1.7 · body
The form is language-aware: the practitioner sees one form, intelligently applied.
JetBrains Mono · 12px · expressions
Patient.name.given.first()

04 · Buttons

05 · Status chips — form lifecycle & governance

Not started Prepped In progress Complete Approved Pending review Rejected ✦ AI draft

06 · AI provenance — draft vs verified

✦ AI DRAFT

Smoking History section — 2 fields, conditional on Smoker = Yes. Awaiting your review.

✓ VERIFIED · M. Bennett

Smoking History section — approved Aug 3. The glow is gone forever: verification is visible state.

Working states: shimmer = retrieving · streaming text = generating · pulse = agent executing · amber hatch = low-confidence, excluded from bulk-accept. Motion 100–300ms, state changes only.

07 · The omnibox

Ask Junior anything — design a form, find anything, run a report…
🎙

One input = navigation + command search + prompt. Hold space to talk: speech in → streaming transcript + cards out, same surface. Composer always states its scope ("Junior can see: … · No PHI in chat").

08 · Form fields — fill states

Enter value…
Jane prefill · Patient.firstname
12 years 🎙 from voice
jane.doe@
Enter a valid email — the confirmation below must match.

09 · The three-layer rule

L1 Shell — chat/omnibox everywhere: intent, search, drafting, Q&A.
L2 Workspaces — direct-manipulation screens (Library, Designer, Governance, Analytics) with docked chat.
L3 Deterministic ceremonies — signature adopt/apply, PIN entry, EULA, payment, publish, permissions: fixed layouts, never generated, identical every time. Chat drafts; humans sign.

Tokens: tokens.css · Mockups: 01-portal-home-shell.html · 02-forms-library.html · 03-form-designer.html