Marketing

01

Site masthead

The marketing site opens like the front page of a reporter: the seal and wordmark, the place of publication, and a dateline between an ink rule and a hairline. There is no navigation bar and no theme switch.

Anatomy

.preceda-site-masthead: The <header>.
.preceda-site-masthead__word: The front-page link, set as T2’s masthead lockup (preceda-lockup preceda-lockup--masthead): 40 px type, 30 px below 640 px.
.preceda-site-masthead__seal: T2’s <Seal>, decorative, 0.7em beside the wordmark (lockup proportions), currentColor.
.preceda-site-masthead__place: “Established MMXXVI · New Delhi”, the folio at right.
.preceda-site-masthead__dateline: Date · line · volume and number, ink rule above, hairline below.
.preceda-site-masthead__line: The one small-caps line. Today “For practising counsel”; “Admitted by introduction” only after the admission gate ships (D-008).

Variants

Front page

Paper

Lamp

State matrix

StatePaperLamp

default

focus-visible (wordmark)

At 390 px

At 390 px the wordmark steps down to 30 px, the place folio sits under it, and the dateline puts date and number on one line with the small-caps line beneath.

390 px

Accessibility

The wordmark link is named “Preceda, front page”; the seal is decorative.
The date is a <time> element with the ISO date; the build writes the Asia/Kolkata date.
The dateline is a paragraph, not a table: it reads in order.

Do

Write the date at build time in Asia/Kolkata.
Keep the dateline line truthful to the current sign-in flow.

Don’t

Add a sticky nav bar, a theme toggle or a “Request invite” pill.
Print “Admitted by introduction” while any email can sign in.

Usage

HTML

<header class="preceda-site-masthead">
  <div class="preceda-site-masthead__top">
    <a class="preceda-site-masthead__word preceda-lockup preceda-lockup--masthead" href="/">
      <svg class="preceda-seal preceda-lockup__seal preceda-site-masthead__seal" viewBox="0 0 100 100" fill="currentColor" aria-hidden="true">…</svg>
      <svg class="preceda-wordmark preceda-lockup__word" viewBox="…" fill="currentColor" role="img" aria-labelledby="wm"><title id="wm">Preceda, front page</title>…</svg>
    </a>
    <p class="preceda-site-masthead__place">Established MMXXVI · New Delhi</p>
  </div>
  <p class="preceda-site-masthead__dateline">
    <span><time datetime="2026-09-22">Tuesday, 22 September 2026</time></span>
    <span class="preceda-site-masthead__line">For practising counsel</span>
    <span>Vol. I · No. 1</span>
  </p>
</header>

02

Section head

A section opens on an ink rule with its folio in small caps — “01 · Foundations” — then, if it needs one, a serif title and a standfirst. What follows is ruled, not boxed: three acts, or two columns divided by a hairline.

Anatomy

.preceda-section-head: The <header>, an ink rule above. --quiet uses the rule colour.
.preceda-section-head__kicker: Small caps, ink-2. Holds __folio (the number, binding ink, tabular), a middot, and the name.
.preceda-section-head__title: Title role (30 px), at most 24ch.
.preceda-section-head__standfirst: Reading role, ink-2.
.preceda-acts: An ordered list of three __act: roman __number in binding ink, __title, __body.
.preceda-columns: Two columns on an ink rule with a __rule between; each has a __title and a list.

Variants

Folio head

Paper

01Foundations

Paper, ink, binding.

The materials of a bound report, set as tokens so both lighting conditions keep one hierarchy.

Lamp

01Foundations

Paper, ink, binding.

The materials of a bound report, set as tokens so both lighting conditions keep one hierarchy.

Quiet (inside a page)

Paper

01Foundations

Paper, ink, binding.

The materials of a bound report, set as tokens so both lighting conditions keep one hierarchy.

Lamp

01Foundations

Paper, ink, binding.

The materials of a bound report, set as tokens so both lighting conditions keep one hierarchy.

Head with three acts

Paper

How a matter is worked

I
Counsel states the objective.
A sentence and the file. Preceda resolves the instrument, the forum and the posture; it asks only when two remedies remain genuinely plausible.
II
The associate reads and drafts.
Supreme Court and High Courts, read as one corpus. Each authority is traced to its source where the corpus holds it; the draft is prepared with the working in the margin.
III
What cannot be verified is marked.
A citation quoted from the corpus carries a pilcrow. One the corpus cannot quote is marked VERIFY. One that is not found is struck through, where counsel can see it.

Lamp

How a matter is worked

I
Counsel states the objective.
A sentence and the file. Preceda resolves the instrument, the forum and the posture; it asks only when two remedies remain genuinely plausible.
II
The associate reads and drafts.
Supreme Court and High Courts, read as one corpus. Each authority is traced to its source where the corpus holds it; the draft is prepared with the working in the margin.
III
What cannot be verified is marked.
A citation quoted from the corpus carries a pilcrow. One the corpus cannot quote is marked VERIFY. One that is not found is struck through, where counsel can see it.

Two ruled columns

Paper

Terms of membership

Membership is for practising counsel; members sign in with their email address.
A member may introduce colleagues. The account page shows the introductions remaining.

What a member receives

The matter workspace: research, drafting, verification, filing readiness.
The reporter: Supreme Court and High Courts, with treatment shown where the corpus records it.

Lamp

Terms of membership

Membership is for practising counsel; members sign in with their email address.
A member may introduce colleagues. The account page shows the introductions remaining.

What a member receives

The matter workspace: research, drafting, verification, filing readiness.
The reporter: Supreme Court and High Courts, with treatment shown where the corpus records it.

State matrix

StatePaperLamp

default

01Foundations

Paper, ink, binding.

The materials of a bound report, set as tokens so both lighting conditions keep one hierarchy.

01Foundations

Paper, ink, binding.

The materials of a bound report, set as tokens so both lighting conditions keep one hierarchy.

At 390 px

Below 1024 px the acts stack and the columns stack with a rule between them; the title steps down to the heading size at 390 px.

390 px

How a matter is worked

I
Counsel states the objective.
A sentence and the file. Preceda resolves the instrument, the forum and the posture; it asks only when two remedies remain genuinely plausible.
II
The associate reads and drafts.
Supreme Court and High Courts, read as one corpus. Each authority is traced to its source where the corpus holds it; the draft is prepared with the working in the margin.
III
What cannot be verified is marked.
A citation quoted from the corpus carries a pilcrow. One the corpus cannot quote is marked VERIFY. One that is not found is struck through, where counsel can see it.

Accessibility

The title is a real heading at the level the page needs; the kicker is a paragraph above it.
The middot between folio and name is aria-hidden.
Acts are an ordered list: their order is the argument.

Do

Number sections with two-digit folios.
Use roman numerals for acts, in binding ink.

Don’t

Put icons on the acts.
Use cards or tinted panels for sections.

Usage

HTML

<header class="preceda-section-head">
  <p class="preceda-section-head__kicker">
    <span class="preceda-section-head__folio">01</span><span aria-hidden="true">·</span><span>Foundations</span>
  </p>
  <h2 class="preceda-section-head__title">Paper, ink, binding.</h2>
</header>
<ol class="preceda-acts">
  <li class="preceda-acts__act">
    <span class="preceda-acts__number">I</span>
    <h3 class="preceda-acts__title">Counsel states the objective.</h3>
    <p class="preceda-acts__body">A sentence and the file…</p>
  </li>
</ol>

03

Hero

The front page states the promise once, in the display serif, and stops: a standfirst that says what Preceda does, then the admission acts. No typing effect, no motion, no outcome promised.

Anatomy

.preceda-hero: The lead section. --with-aside makes the two-column front: __lead, __rule, __aside.
.preceda-hero__headline: The <h1>, display role (56 px; 40 at 390). One <em> may carry the binding ink.
.preceda-hero__standfirst: Subheading role in ink-2, about 40ch.
.preceda-hero__kicker: Optional small-caps line above the headline.
.preceda-hero__aside: Holds the edition card.

Variants

Front page (with the edition)

Paper

Counsel states the objective. Preceda prepares the matter.

Preceda is a reporter that drafts. It reads the corpus, traces each citation to its source where the corpus holds it, and prepares the instrument your matter needs, with the working shown in the margin.

Members sign in Request an introduction

Lamp

Counsel states the objective. Preceda prepares the matter.

Preceda is a reporter that drafts. It reads the corpus, traces each citation to its source where the corpus holds it, and prepares the instrument your matter needs, with the working shown in the margin.

Members sign in Request an introduction

Lead only

Paper

Counsel states the objective. Preceda prepares the matter.

Preceda is a reporter that drafts. It reads the corpus, traces each citation to its source where the corpus holds it, and prepares the instrument your matter needs, with the working shown in the margin.

Members sign in Request an introduction

Lamp

Counsel states the objective. Preceda prepares the matter.

Preceda is a reporter that drafts. It reads the corpus, traces each citation to its source where the corpus holds it, and prepares the instrument your matter needs, with the working shown in the margin.

Members sign in Request an introduction

State matrix

StatePaperLamp

default

Counsel states the objective. Preceda prepares the matter.

Preceda is a reporter that drafts. It reads the corpus, traces each citation to its source where the corpus holds it, and prepares the instrument your matter needs, with the working shown in the margin.

Members sign in Request an introduction

Counsel states the objective. Preceda prepares the matter.

Preceda is a reporter that drafts. It reads the corpus, traces each citation to its source where the corpus holds it, and prepares the instrument your matter needs, with the working shown in the margin.

Members sign in Request an introduction

At 390 px

At 390 px the headline sets at 40 px, the standfirst at 17 px, and the edition card follows the lead with no vertical rule.

390 px

Counsel states the objective. Preceda prepares the matter.

Preceda is a reporter that drafts. It reads the corpus, traces each citation to its source where the corpus holds it, and prepares the instrument your matter needs, with the working shown in the margin.

Members sign in Request an introduction

Accessibility

One <h1> per page, the promise itself.
The emphasised word is <em>, so its stress survives without colour.
Text wrapping is balanced in CSS; nothing is split into spans for effect.

Do

Use “Counsel states the objective. Preceda prepares the matter.” as the H1.
Keep “An associate who has read every judgment.” for campaign copy, not the H1.

Don’t

Animate the headline or add a cursor.
Promise an outcome (“your winning edge”).

Usage

HTML

<section class="preceda-hero preceda-hero--with-aside">
  <div class="preceda-hero__lead">
    <h1 class="preceda-hero__headline">Counsel states the objective. Preceda <em>prepares</em> the matter.</h1>
    <p class="preceda-hero__standfirst">Preceda is a reporter that drafts…</p>
    <div class="preceda-admission"><div class="preceda-admission__acts">…</div></div>
  </div>
  <div class="preceda-hero__rule" aria-hidden="true"></div>
  <div class="preceda-hero__aside"><aside class="preceda-edition">…</aside></div>
</section>

04

Edition card

“In this edition” tells a reader what the page holds before they read it: three short items under an ink rule, each a serif title and a line or two. On its own it becomes a raised card, with the edition number in gilt ink.

Anatomy

.preceda-edition: The <aside>. --card adds the raised sheet for use away from the front grid.
.preceda-edition__head: “In this edition” in small caps over an ink rule; an optional __number at right.
.preceda-edition__number: The edition number in gilt-ink (text-bearing gilt).
.preceda-edition__item: One item: __title (serif 17) and __body (ink-2). Hairlines between.

Variants

In the front grid

Paper

Lamp

Card

Paper

Lamp

State matrix

StatePaperLamp

default

hover / focus-visible (linked title)

At 390 px

Full width under the lead; items keep their hairlines.

390 px

Accessibility

An <aside> named “In this edition”; item titles are headings one level below the page’s section.
The gilt number uses gilt-ink, which passes 4.5:1; decorative gilt never carries it.

Do

Keep to three items.
Write items as statements, not features.

Don’t

Add icons or illustrations to items.
Set the number in decorative gilt.

Usage

HTML

<aside class="preceda-edition" aria-label="In this edition">
  <p class="preceda-edition__head"><span>In this edition</span></p>
  <ul class="preceda-edition__list">
    <li class="preceda-edition__item">
      <h3 class="preceda-edition__title">The matter, not the search</h3>
      <p class="preceda-edition__body">Counsel states the objective; Preceda resolves the instrument…</p>
    </li>
  </ul>
</aside>

05

Admission form

“Members sign in” is the one binding act; “Request an introduction” is a quiet link to a form that asks only for an email. The form claims nothing the flow does not do: it sends a request to Chambers, it does not admit anyone.

Anatomy

.preceda-admission: The block. data-state: default, invalid, submitting, received, failed.
.preceda-admission__acts: The pair of acts: __primary (binding, serif) and __link.
.preceda-admission__form: The request form on a rule: __form-title, __lede, __row (label, __input, submit).
.preceda-admission__field: The label and input together; the flexible part of the row.
.preceda-admission__input: Email on a printed underline, reading size so iOS does not zoom.
.preceda-admission__help / __error: One line under the field, tied by aria-describedby.
.preceda-admission__received: The confirmation, a polite status line; the row hides once received.

Variants

Live (type “fail@…” to see the failure)

Paper

Members sign in Request an introduction

Lamp

Members sign in Request an introduction

Acts only (hero)

Paper

Members sign in Request an introduction

Lamp

Members sign in Request an introduction

State matrix

StatePaperLamp

default

Members sign in Request an introduction

invalid

Members sign in Request an introduction

submitting

Members sign in Request an introduction

received

Members sign in Request an introduction

failed

Members sign in Request an introduction

hover / focus-visible

Members sign in Request an introduction

At 390 px

At 390 px the acts wrap to two lines, the field takes the full width with the button beneath it, and every target is 44 px.

390 px

Members sign in Request an introduction

Accessibility

The form is labelled by its title; the email input has a visible label and autocomplete="email".
An invalid address sets aria-invalid and points aria-describedby at the error line.
Received is announced through a polite status line; a failure uses role="alert".
While sending, the form is aria-busy and the button reads “Sending…”.

Do

Post to the existing /api/request-invite with the email only.
Keep “Members sign in” while ordinary sign-in stays open.

Don’t

Ask for chambers, firm or “introduced by” until the gate spec defines them.
Write “You’re in!”, “Access granted” or anything that implies admission.

Usage

HTML

<div class="preceda-admission" data-state="default">
  <div class="preceda-admission__acts">
    <a class="preceda-admission__primary" href="https://app.preceda.ai/login">Members sign in</a>
    <a class="preceda-admission__link" href="/admission">Request an introduction</a>
  </div>
  <form class="preceda-admission__form" novalidate aria-labelledby="req-title">
    <h2 class="preceda-admission__form-title" id="req-title">Request an introduction</h2>
    <div class="preceda-admission__row">
      <div class="preceda-admission__field">
        <label class="preceda-admission__label" for="req-email">Email address</label>
        <input id="req-email" class="preceda-admission__input" type="email" autocomplete="email" aria-describedby="req-help">
      </div>
      <button type="submit" class="preceda-admission__primary">Send the request</button>
    </div>
    <p class="preceda-admission__help" id="req-help">Used only to reply to you.</p>
    <p class="preceda-admission__received" role="status"></p>
  </form>
</div>

06

Footer

One ruled line closes every page: where Preceda is published, three links, and the legal line. The legal entity may appear here once and nowhere else in the chrome.

Anatomy

.preceda-site-footer: The <footer>, a rule above, three parts in a grid.
.preceda-site-footer__links: Colophon · Terms · Privacy, middot-separated; aria-current on the page you are on.
.preceda-site-footer__legal: “Preceda provides legal information, not legal advice.”

Variants

Default

Paper

Lamp

State matrix

StatePaperLamp

default

hover / focus-visible / current

At 390 px

Below 1024 px the three parts stack, centred, with 44 px link targets.

390 px

Accessibility

A <footer> landmark with a list of links.
Middots are CSS content with empty alternative text.
The current page link carries aria-current="page".

Do

Keep the three parts in this order.
Name the publishing entity only in the colophon, once.

Don’t

Add social icons or a newsletter box.
Repeat the navigation here.

Usage

HTML

<footer class="preceda-site-footer">
  <p>Preceda is published from New Delhi.</p>
  <ul class="preceda-site-footer__links">
    <li><a href="/colophon">Colophon</a></li><li><a href="/terms">Terms</a></li><li><a href="/privacy">Privacy</a></li>
  </ul>
  <p class="preceda-site-footer__legal">Preceda provides legal information, not legal advice.</p>
</footer>

07

Colophon

How the edition is made, in a few sentences at the end of a page or on /colophon: the type, the corpus, the method, the publisher. It replaces “About”; it is not a company page.

Anatomy

.preceda-colophon: The section, a hairline above, reading measure. --centered for the end of a letter or the gate.
.preceda-colophon__head: The seal (gilt, decorative) and “Colophon” in small caps.
.preceda-colophon__body: Short serif paragraphs in ink-2; <em> in ink; <code> in the citation mono.
.preceda-colophon__entity: The one line that names the legal entity.

Variants

Page end

Paper

Colophon

Set in Newsreader for reading, Inter for controls and JetBrains Mono for citations such as (2014) 8 SCC 273.

The corpus is the judgments of the Supreme Court and the High Courts, read as one register. Each authority a draft relies on is quoted from it or marked for counsel to verify.

Preceda is published from New Delhi by Corpus Law AI.

Lamp

Colophon

Set in Newsreader for reading, Inter for controls and JetBrains Mono for citations such as (2014) 8 SCC 273.

The corpus is the judgments of the Supreme Court and the High Courts, read as one register. Each authority a draft relies on is quoted from it or marked for counsel to verify.

Preceda is published from New Delhi by Corpus Law AI.

Centred

Paper

Colophon

Set in Newsreader for reading, Inter for controls and JetBrains Mono for citations such as (2014) 8 SCC 273.

The corpus is the judgments of the Supreme Court and the High Courts, read as one register. Each authority a draft relies on is quoted from it or marked for counsel to verify.

Preceda is published from New Delhi by Corpus Law AI.

Lamp

Colophon

Set in Newsreader for reading, Inter for controls and JetBrains Mono for citations such as (2014) 8 SCC 273.

The corpus is the judgments of the Supreme Court and the High Courts, read as one register. Each authority a draft relies on is quoted from it or marked for counsel to verify.

Preceda is published from New Delhi by Corpus Law AI.

State matrix

StatePaperLamp

default

Colophon

Set in Newsreader for reading, Inter for controls and JetBrains Mono for citations such as (2014) 8 SCC 273.

The corpus is the judgments of the Supreme Court and the High Courts, read as one register. Each authority a draft relies on is quoted from it or marked for counsel to verify.

Preceda is published from New Delhi by Corpus Law AI.

Colophon

Set in Newsreader for reading, Inter for controls and JetBrains Mono for citations such as (2014) 8 SCC 273.

The corpus is the judgments of the Supreme Court and the High Courts, read as one register. Each authority a draft relies on is quoted from it or marked for counsel to verify.

Preceda is published from New Delhi by Corpus Law AI.

At 390 px

Full width at 16 px gutters; nothing changes but the measure.

390 px

Colophon

Set in Newsreader for reading, Inter for controls and JetBrains Mono for citations such as (2014) 8 SCC 273.

The corpus is the judgments of the Supreme Court and the High Courts, read as one register. Each authority a draft relies on is quoted from it or marked for counsel to verify.

Preceda is published from New Delhi by Corpus Law AI.

Accessibility

A labelled section, not a footer landmark (the footer follows it).
The seal is decorative and aria-hidden.

Do

Keep it to a few hundred words on /colophon, two or three sentences at a page end.

Don’t

Put team photos, logos or claims of completeness in the colophon.

Usage

HTML

<section class="preceda-colophon" aria-label="Colophon">
  <p class="preceda-colophon__head">Colophon</p>
  <div class="preceda-colophon__body"><p>Set in Newsreader for reading…</p></div>
  <p class="preceda-colophon__entity">Preceda is published from New Delhi by Corpus Law AI.</p>
</section>

The front page, at the width of the page.

Counsel states the objective. Preceda prepares the matter.

Counsel states the objective. Preceda prepares the matter.

Anatomy

Variants

State matrix

At 390 px

Accessibility

Do

Don’t

Usage

Anatomy

Variants

Counsel states the objective.

The associate reads and drafts.

What cannot be verified is marked.

Counsel states the objective.

The associate reads and drafts.

What cannot be verified is marked.

Terms of membership

What a member receives

Terms of membership

What a member receives

State matrix

At 390 px

Counsel states the objective.

The associate reads and drafts.

What cannot be verified is marked.

Accessibility

Do

Don’t

Usage

Anatomy

Variants

Counsel states the objective. Preceda prepares the matter.

Counsel states the objective. Preceda prepares the matter.

Counsel states the objective. Preceda prepares the matter.

Counsel states the objective. Preceda prepares the matter.

State matrix

Counsel states the objective. Preceda prepares the matter.

Counsel states the objective. Preceda prepares the matter.

At 390 px

Counsel states the objective. Preceda prepares the matter.

Accessibility

Do

Don’t

Usage

Anatomy

Variants

State matrix

At 390 px

Accessibility

Do

Don’t

Usage

Anatomy

Variants

Request an introduction

Request an introduction

State matrix

Request an introduction

Request an introduction

Request an introduction

Request an introduction

Request an introduction

Request an introduction

Request an introduction

Request an introduction

Request an introduction

Request an introduction

At 390 px

Request an introduction

Accessibility

Do

Don’t

Usage

Anatomy

Variants

State matrix