0.1 primitives

Anatomy

.preceda-prose

Newsreader 17/1.55, ink, max 66ch. Apply to the container of paragraphs.

Variants

At 390 px

The measure is a maximum; at 390 px prose fills the column with the page gutter.

Accessibility

• Keep 17px and 1.55 leading for anything read at length.
• Text resizes with the user’s root font size; the measure is in ch.

Usage

<div class="preceda-prose"><p>…</p></div>

<div className="preceda-prose">{paragraphs}</div>

Anatomy

.preceda-running-head

Inter 12, 600, tracked uppercase, secondary ink. Above a sheet or section.

.preceda-label

The same face for a form label; pair with htmlFor.

.preceda-type-label

The 0.2 serif small-caps label role, as in the approved screenshots.

Variants

At 390 px

Running heads truncate before they wrap; keep them to one line at 390 px.

Accessibility

• Uppercase is CSS only; the source text stays in sentence case for screen readers.
• Secondary ink passes 4.5:1 on every surface.

Usage

<p class="preceda-running-head">Draft instrument</p>
<label class="preceda-label" for="objective">Objective</label>

<p className="preceda-running-head">Draft instrument</p>

Anatomy

.preceda-citation

JetBrains Mono 13, tabular figures. Inline in serif text.

Variants

At 390 px

Citations do not break inside a reporter reference; allow the line to wrap before it.

Accessibility

• Screen readers read the characters as written; do not substitute symbols for words.

Usage

<span class="preceda-citation">(2014) 8 SCC 273</span>

<span className="preceda-citation">{citation}</span>

Anatomy

.preceda-rule

A 1px <hr> in the rule colour.

Variants

Accessibility

• An <hr> is a thematic break; use a CSS border for purely visual separation.

Usage

<hr class="preceda-rule" />

<hr className="preceda-rule" />

Anatomy

.preceda-sheet

Raised surface, rule border, small radius, sheet shadow. Padding is the consumer’s.

Variants

At 390 px

At 390 px a sheet runs to the gutters; the numbered document sheet (T5) sets its own margins.

Accessibility

• Use a landmark or article element when the sheet is a document.
• The shadow is not a boundary; the rule is.

Usage

<article class="preceda-sheet">…</article>

<article className="preceda-sheet">{children}</article>

Anatomy

.preceda-button

Binding fill, action ink, 40px minimum height.

.preceda-button--quiet

Transparent with a binding rule; binding-tint on hover.

Variants

State matrix

At 390 px

In a narrow dialog, stack actions full width with the primary act last (nearest the thumb).

Accessibility

• Native <button>; 40px minimum target.
• Focus ring is opaque and passes 3:1.
• Disabled buttons explain why nearby; prefer an error on submit.

Usage

<button class="preceda-button" type="button">Prepare the matter</button>
<button class="preceda-button preceda-button--quiet" type="button">Save draft</button>

<button className="preceda-button" type="button" onClick={prepare}>Prepare the matter</button>
// Button and IconButton components arrive in T3.

Anatomy

.preceda-link

Inter 14/600, binding ink, rule-strong underline at 0.25em offset.

Variants

State matrix

Accessibility

• Underlined, so it does not rely on colour.
• Link text names the destination.

Usage

<a class="preceda-link" href="/case/…">Read authority</a>

<a className="preceda-link" href={href}>Read authority</a>

Anatomy

.preceda-field

Raised surface, rule-strong border, inherits the font.

[aria-invalid="true"]

Border turns to the error colour.

.preceda-field-error

The associated message, Inter 13 in error ink.

State matrix

At 390 px

Fields fill the column at 390 px; inputs stay at 16px effective size or larger to avoid zoom.

Accessibility

• Every field has a <label>; placeholder is a hint, never the label.
• Link the error with aria-describedby and set aria-invalid.

Usage

<label class="preceda-label" for="court">Court and jurisdiction</label>
<input class="preceda-field" id="court" aria-invalid="true" aria-describedby="court-error" />
<p class="preceda-field-error" id="court-error">Court and jurisdiction are required.</p>

<input className="preceda-field" id="court" aria-invalid={Boolean(error)} aria-describedby="court-error" />

Anatomy

.preceda-tabs

The ruled tab row (role="tablist").

.preceda-tab

One tab; [aria-selected="true"] draws the binding underline.

<TabList>

React: roving focus with arrows, Home and End. Selection stays with the consumer.

Variants

State matrix

At 390 px

At 390 px the row scrolls horizontally; it never wraps to two lines. Swipe arrives with T3 Tabs.

Accessibility

• WAI-ARIA tab pattern: one tab stop, arrows move, Home/End jump.
• Each tab controls a panel via aria-controls.

Usage

<div class="preceda-tabs" role="tablist" aria-label="Desk">
  <button class="preceda-tab" role="tab" aria-selected="true">Draft</button>
  <button class="preceda-tab" role="tab" aria-selected="false" tabindex="-1">Authorities</button>
</div>

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

<TabList aria-label="Desk">
  <button className="preceda-tab" role="tab" aria-selected>Draft</button>
</TabList>

Anatomy

:focus-visible

Shared by button, link, field, tab and dialog.

State matrix

Accessibility

• The focus colour reaches 3:1 on every adjacent surface in both themes.
• Never remove outline without an equal replacement.

Usage

@import '@luvkapur/preceda-design-system/css/focus.css';

// Focus is CSS-only; no component is required.

Anatomy

.preceda-dialog

Native <dialog>: raised sheet, rule-strong border, dialog shadow, dimmed backdrop.

.preceda-dialog__sheet

Padding container.

.preceda-dialog__title

Serif 30; labels the dialog.

.preceda-dialog__description

Secondary ink; describes the dialog.

<DialogShell>

React: wires aria-labelledby/-describedby. Opening policy stays with the consumer.

Variants

At 390 px

At 390 px the dialog is the viewport width less 2rem; actions stack. The bottom Sheet arrives in T4.

Accessibility

• showModal() gives focus trapping and Escape for free.
• Title and description are wired automatically by DialogShell.
• Return focus to the invoking control on close.

Usage

<dialog class="preceda-dialog" aria-labelledby="q">
  <div class="preceda-dialog__sheet">
    <h2 class="preceda-dialog__title" id="q">Which court passed the impugned order?</h2>
    <div class="preceda-dialog__body">…</div>
  </div>
</dialog>

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

<DialogShell ref={ref} title="Which court passed the impugned order?" description="…">
  {answer}
</DialogShell>