Styleguide
foundationThe single component library. Pages may only use what appears here.
Color — semantic tokens
Components reference these aliases only, never raw hex. The same hue means the same thing across chips, flashes, and the dispatch timeline.
Typography — type scale
System font stack; tables use tabular figures (--numeric).
Spacing, radius & shadow
Buttons
Status chips
Semantic vocabulary (top) and the domain ticket-status mapping (bottom). Hover for the next-action hint.
Page header pattern
Title + context chip + primary-action slot. Used at the top of every page (this styleguide's own header is one).
Ticket #641
pending_reviewCommunication under Rule 71(3) EPC
Cards
Matter
AIP record
Dispatch summary
Prose — long-form content
Rendered markdown for docs / the Help user manual (WP-3.1). Re-establishes heading, list, code, blockquote and table rhythm using tokens only, scoped to .prose. Tables inside prose reuse the .table component. Wrap it in a card body on a page.
Processing a ticket
A ticket is one piece of work derived from an inbound email. Open the top one in your Inbox and work down.
- Inbox → click Open on a ticket.
- Review the LLM-extracted fields; fix anything wrong.
- Stage any
IpigluCRUD, then click Approve.
Linked staged changes must be dispatched / rejected / discarded before this ticket can be marked actioned.
| Where | What it is |
|---|---|
| Left pane | The attachment(s) — PDFs render inline |
| Right pane | The 60-field form — what you fill out |
Tables
Dense variant for queues/history (paralegal scanning); roomy variant for forms/detail. Status cells reuse the chip component; numeric columns use tabular figures.
| Docket ref | Subject | Status | Assignee | Due |
|---|---|---|---|---|
| EP3821994 | Communication under Rule 71(3) EPC | pending_review | Priya Nair | 2026-07-24 |
| US11482931 | Non-Final Office Action | in_progress | Sam Okoro | 2026-08-02 |
| WO2025123456 | Written Opinion (ISA) | actioned | Priya Nair | 2026-07-19 |
| EP4012887 | Notice of Loss of Rights | dispatched_with_errors | Unassigned | 2026-07-17 |
| Docket ref | Subject | Status | Assignee | Due |
|---|---|---|---|---|
| EP3821994 | Communication under Rule 71(3) EPC | pending_review | Priya Nair | 2026-07-24 |
| US11482931 | Non-Final Office Action | in_progress | Sam Okoro | 2026-08-02 |
| WO2025123456 | Written Opinion (ISA) | actioned | Priya Nair | 2026-07-19 |
| EP4012887 | Notice of Loss of Rights | dispatched_with_errors | Unassigned | 2026-07-17 |
Form fields
Label + control + help / error / disabled-with-reason states. Disabled fields explain WHY (never silently hidden). Note: grant/annuity fields stay always-enabled — see §11.3.
As it appears on the Office Action.
Enter a valid email address.
Select the current AIP matter status.
Enabled when Matter Status is Granted.
Visible to the manager on approval.
Empty state
No tickets in triage
Inbox zero
Flash messages
Persistent (not toasts that vanish) — see the live examples in the flash region at the top of this page. All four levels:
htmx loading indicator
Hidden until htmx adds .htmx-request during a request (the hx-indicator contract). Shown here forced-visible for documentation, plus a live button that fires a real request.
Confirm dialog
Replaces the legacy two-click + st.rerun soft-confirm. htmx opens the dialog into a slot; confirm hx-posts and the result swaps back. Warn, never block: a soft-limit shows a warning but the confirm button stays enabled — the user can always proceed (§11.4 / §11.7).
Dispatch ticket EP3821994?
Assign ticket to Sam Okoro?
This is a soft warning — you can still proceed.
Structured deadline editor & deadline picker
A structured form (not a free-text blob) built on the grouped deadline-name combobox: choosing a category hx-gets the matching names (dependent selects), grouped under the category via <optgroup>. Saving swaps in a read-only summary. Unblocks wizard Step 4 and Doc Review Group C.
Sanitized email preview
Untrusted email HTML rendered in a sandboxed iframe (srcdoc + sandbox, no allow-scripts) — scripts, forms and same-origin access all disabled. Phase 3 feeds it the existing pure-Python sanitizer output; the sandbox is defence-in-depth.
Staged-change workbench
Pending staged changes as before → after cards (green/red) instead of JSON blobs; “Add change” opens a dialog that appends a new card, and each card can be discarded. Used by My Work + Document Review (the manual workbench is on the “lose nothing” list, §11.7).