Correspondence

Anatomy

.preceda-letter

The entry (<article>). A hairline above; the first letter in a column has none.

.preceda-letter__head

Sender and time on one line.

.preceda-letter__sender

Counsel, Associate or Note in serif small caps, ink-2.

.preceda-letter__time

<time> in chrome sans, ink-3, tabular figures.

.preceda-letter__body

Serif body at 15/1.55 (17 on the mobile sheet). Paragraphs, lists and quotes.

.preceda-letter__quote

A quoted excerpt: indented italic on a hairline left rule, with an optional <cite>.

.preceda-letter__attachments

One line: “Attached: FIR.pdf · 2 pages”. Never pills. attachmentsProps names the line for assistive technology.

.preceda-letter__after

What follows the body: a fact request, next steps, a memo pointer.

.preceda-letter--note

The clerk’s note for system messages, bounded partials and errors. Body in ink-2.

.preceda-letter--streaming

Set while text arrives (with aria-busy). The text grows; there is no caret.

.preceda-correspondence

The column: __letters (scrolls), __status (working line and notes), __composer.

Variants

State matrix

At 390 px

On the correspondence sheet the body rises to the 17 px reading size and the column runs edge to edge at 16 px gutters. Sender and time stay on one line; long names wrap under the time, never beside it.

Accessibility

• Each letter is an <article>; put letters in an ordered list (or a role="feed") so the order is announced.
• The time is a <time> with a machine-readable dateTime.
• Streaming sets aria-busy="true" on the letter. Announce the finished letter once (the product’s live region), not every token.
• An error note may carry role="alert" when it reports the result of counsel’s own action; routine notes do not.
• Sender is a word, not a colour or an alignment: counsel and associate are distinguished in the accessibility tree.

Usage

<ol class="preceda-correspondence__letters">
  <li>
    <article class="preceda-letter preceda-letter--counsel" data-sender="counsel">
      <header class="preceda-letter__head">
        <p class="preceda-letter__sender">Counsel</p>
        <time class="preceda-letter__time" datetime="2026-09-20T10:42">10:42</time>
      </header>
      <div class="preceda-letter__body"><p>Client arrested yesterday under 498-A…</p></div>
      <p class="preceda-letter__attachments">
        <span class="preceda-letter__attachments-label">Attached:</span>
        <span class="preceda-letter__attachment"><span class="preceda-letter__attachment-name">FIR.pdf</span> · 2 pages</span>
      </p>
    </article>
  </li>
</ol>

import { Letter, LetterQuote } from '@luvkapur/preceda-design-system/react';

<Letter sender="associate" time="10:43" dateTime={sentAt} streaming={isStreaming}
  after={<NextSteps steps={steps} onSelect={runStep} />}>
  <p>I have read the FIR…</p>
</Letter>

<Letter sender="note" tone="error" time="10:59">
  <p>Your instruction was not sent. It is kept in the composer; send it again.</p>
</Letter>

Anatomy

.preceda-working-notes

Native disclosure beneath the active working line, collapsed by default.

.preceda-working-notes__summary

From the desk and the latest recorded step.

.preceda-working-notes__entries

Hairline ledger of observed stages and elapsed times.

.preceda-working-notes__link

Optional route to a saved draft or authority on the desk.

Variants

State matrix

At 390 px

The summary stays one line; opening correspondence reveals the observed work and desk links.

Accessibility

• Native details and summary support Enter and Space.
• The active working line is the polite live region; the ledger is read on demand.
• Desk links are buttons with explicit destinations.

Usage

<details class="preceda-working-notes"><summary class="preceda-working-notes__summary">From the desk · Drafting began</summary><ol class="preceda-working-notes__entries"><li>Instruction recorded</li><li>Instruction review began</li><li>Working brief prepared</li><li>Legal research began</li><li>Drafting began</li></ol></details>

import { WorkingNotes } from '@luvkapur/preceda-design-system/react';

<WorkingNotes status="running" entries={closedEventBackedEntries} />

Anatomy

.preceda-fact-request

A <form>, labelled by its title. data-state: unanswered, partially-answered, ready, submitting, accepted, partial, rejected.

.preceda-fact-request__title

Small caps, e.g. “Two facts the file does not hold”. __progress at right: “1 of 2 answered”.

.preceda-fact-request__item

One question: __number in the gutter, __question (the <label>), __hint, the control, actions and __outcome.

.preceda-fact-request__input

The answer on a printed underline: text (with an optional native <datalist> of known values), date, <select> (with __select-chevron), or <textarea>.

.preceda-fact-request__group

Grouped fields (a party roster): one fieldset per __entry, labelled sub-fields, “Add another …”.

.preceda-fact-request__basis

Where a suggestion came from, in italic. The suggestion needs “Confirm suggestion” (aria-pressed).

.preceda-fact-request__attached

Per-question files: “Attached: passport.pdf · 4 pages”, with Remove, and an “Attach …” text link. With onOpenAttachment a finished file’s name opens it.

.preceda-fact-request__recorded

Particulars recorded as not available at present: listed in a disclosure, with “Provide now”.

.preceda-fact-request__outcome

Per-question result after a save: “saved”, or “not saved” with the reason inline.

.preceda-fact-request__foot

What remains (“1 still open”) and the one act: “Save 2 answers”.

.preceda-fact-request__note

A clerk’s note for partial and rejected results.

.preceda-fact-request--history

An earlier or superseded request as a read-only disclosure.

Variants

State matrix

At 390 px

On the correspondence sheet the questions and answers rise to 17 px, targets to 44 px, and grouped fields stack to one column. Opening the sheet from “1 question waiting” scrolls to the first open item (scroll-margin keeps it clear of the sheet head).

Accessibility

• The form is labelled by its title. Each question is the <label> of its answer; hints, suggestion bases and failure reasons are tied in with aria-describedby.
• A failed answer sets aria-invalid and keeps its value. The outcome is announced once through a polite status region.
• Grouped answers are a role="group" labelled by the question; each entry is a <fieldset> with its own legend.
• “Confirm suggestion” is a toggle (aria-pressed). A rendered suggestion is never counted as answered.
• The submit stays disabled until every open question is answered and no file is uploading; “1 still open” says why.
• Answers never depend on the display index: questions are keyed by their canonical id.

Usage

<form class="preceda-fact-request" data-state="partially-answered" aria-labelledby="fr-title">
  <div class="preceda-fact-request__head">
    <h3 class="preceda-fact-request__title" id="fr-title">Two facts the file does not hold</h3>
    <span class="preceda-fact-request__progress">1 of 2 answered</span>
  </div>
  <ol class="preceda-fact-request__list">
    <li class="preceda-fact-request__item">
      <span class="preceda-fact-request__number" aria-hidden="true">1</span>
      <div class="preceda-fact-request__body">
        <label class="preceda-fact-request__question" for="fr-1">Dates the brother-in-law was outside India.</label>
        <div class="preceda-fact-request__control">
          <input id="fr-1" class="preceda-fact-request__input" placeholder="Answer…" aria-required="true">
        </div>
      </div>
    </li>
  </ol>
  <div class="preceda-fact-request__foot">
    <span class="preceda-fact-request__remaining">1 still open</span>
    <button type="submit" class="preceda-fact-request__submit" disabled>Save 1 answer</button>
  </div>
</form>

import { FactRequest } from '@luvkapur/preceda-design-system/react';

<FactRequest
  data-testid="fact-request-card"
  title="Two facts the file does not hold"
  questions={items.map(toFactQuestion)}       // id = canonicalKey
  defaultValues={prefills}
  attachments={filesByQuestion}
  onAttach={uploadForQuestion}
  onSubmit={async (values) => deliver(values)} // → { disposition, items }
  disabled={turnInProgress}
/>

Anatomy

.preceda-next-steps

A <nav> named “Suggested next”.

.preceda-next-steps__list

An inline list; items wrap as a line of text wraps.

.preceda-next-steps__item

Each item but the last is followed by a presentational middot, so a wrapped line ends on the separator.

.preceda-next-steps__link

A <button> (runs a prompt) or an <a> (goes somewhere), serif, binding ink on a hairline underline.

Variants

State matrix

At 390 px

At 390 px each step is a 44 px target in the 17 px serif; the line wraps at the middots.

Accessibility

• A <nav aria-label="Suggested next"> with a list, so the count of steps is announced.
• Middots are CSS content with empty alternative text: they are not read.
• Each step is a real button or link with a 40 px target (44 on mobile).
• Disabled steps use the disabled attribute and lose their underline; the word stays legible in ink-3.

Usage

<nav class="preceda-next-steps" aria-label="Suggested next">
  <ul class="preceda-next-steps__list">
    <li class="preceda-next-steps__item"><button type="button" class="preceda-next-steps__link">Draft the application</button></li>
    <li class="preceda-next-steps__item"><button type="button" class="preceda-next-steps__link">Check each citation</button></li>
  </ul>
</nav>

import { NextSteps } from '@luvkapur/preceda-design-system/react';

<NextSteps
  steps={actions.map((action, index) => ({ id: String(index), label: action.label }))}
  onSelect={(step) => onActionClick(actions[Number(step.id)].prompt)}
/>

Anatomy

.preceda-memo-pointer

The ruled line (hairlines above and below).

.preceda-memo-pointer__open

The control: a toggle button (aria-pressed = on the desk).

.preceda-memo-pointer__kind

“Memorandum” in small caps.

.preceda-memo-pointer__title

The memorandum’s title in the serif, underlined like a link.

.preceda-memo-pointer__meta

Pages and time in chrome sans.

.preceda-memo-pointer__action

“Open on the desk ›”, or “On the desk” once opened.

.preceda-memo-pointer__back

“Back to current draft”, shown while the memorandum is on the desk.

Variants

State matrix

At 390 px

On the phone the pointer closes the correspondence sheet and opens the memorandum on the desk; the title wraps under the kind and the action moves to its own line.

Accessibility

• The line is one button; aria-pressed says whether the memorandum is on the desk.
• Opening moves the desk, not focus: announce “Memorandum on the desk” from the desk’s live region.
• “Back to current draft” is a separate button so it is reachable without toggling.

Usage

<div class="preceda-memo-pointer">
  <button type="button" class="preceda-memo-pointer__open" aria-pressed="false">
    <span class="preceda-memo-pointer__kind">Memorandum</span>
    <span class="preceda-memo-pointer__title">Strategy on anticipatory bail</span>
    <span class="preceda-memo-pointer__meta">4 pages · 10:47</span>
    <span class="preceda-memo-pointer__action">Open on the desk</span>
  </button>
</div>

import { MemoPointer } from '@luvkapur/preceda-design-system/react';

<MemoPointer
  data-testid="strategy-artifact"
  title={strategy.title}
  meta={`${strategy.pages} pages`}
  onDesk={selectedDocument === strategy.id}
  onOpen={() => selectDocument(strategy.id)}
  onBack={restorePreviousDraft}
/>

Anatomy

.preceda-composer

A <form>; the whole composer is the drop target. data-state: empty, ready, sending, disabled.

.preceda-composer__sheet

Hairline border on paper-raised. The focus ring is drawn on the sheet, not the textarea.

.preceda-composer__input

The textarea, “Ask a question or instruct the associate…”, growing with its content to about eight lines.

.preceda-composer__attached

“Attached: FIR.pdf · Order 12 Aug.pdf”, each with a quiet remove mark; uploading and refused files say so.

.preceda-composer__attach

A <label> around a hidden file input: “Attach FIR, orders, correspondence · PDF, DOCX”.

.preceda-composer__send

The ink Send button (type="submit"). Pass data-matter-send through sendButtonProps.

.preceda-composer__drop

The ruled overlay while a file is held over the composer.

.preceda-composer--dock

The mobile line: Send inside the box, attach below.

Variants

State matrix

At 390 px

In the dock the composer is one line with Send inside the box (ph-desk-paper). Targets are 44 px, the text is 17 px so iOS does not zoom, and the dock respects the safe-area inset and the keyboard.

Accessibility

• The textarea is named “Instruction to the associate”; the placeholder is not the label.
• Enter sends and Shift+Enter breaks the line (unchanged from today). Cmd/Ctrl+Enter always sends. IME composition never sends.
• Send is a real submit button, disabled until there is text or a finished file, and while sending or uploading; aria-busy is set while sending.
• The attach control is a native file input inside a visible label; its focus ring is drawn on the label.
• Each remove mark is named “Remove FIR.pdf” and has a 40 px hit area (44 on mobile).
• Attachment and send errors are announced with role="alert" and tied to the textarea.

Usage

<form class="preceda-composer preceda-composer--sheet" data-state="empty">
  <div class="preceda-composer__sheet">
    <textarea class="preceda-composer__input" rows="1" placeholder="Ask a question or instruct the associate…"
      aria-label="Instruction to the associate"></textarea>
  </div>
  <div class="preceda-composer__row">
    <label class="preceda-composer__attach">
      <input type="file" class="preceda-composer__file-input" multiple accept=".pdf,.docx">
      <span><span class="preceda-composer__attach-verb">Attach</span> FIR, orders, correspondence · PDF, DOCX</span>
    </label>
    <button type="submit" class="preceda-composer__send" data-matter-send disabled>Send</button>
  </div>
  <div class="preceda-composer__drop" aria-hidden="true">Drop to attach · PDF, DOCX</div>
</form>

import { Composer } from '@luvkapur/preceda-design-system/react';

<Composer
  value={draft}
  onValueChange={setDraft}
  onSend={send}
  sending={turnInProgress}
  uploadsPending={batchSettling}
  files={pendingFiles.map((f) => ({ id: f.localId, name: f.filename, status: f.status, error: f.error }))}
  onFilesSelected={uploadFiles}
  onRemoveFile={removeFile}
  inputRef={textareaRef}
  sendButtonProps={{ 'data-matter-send': '' }}
  variant={isMobile ? 'dock' : 'sheet'}
/>