Marks

Anatomy

ring

Outer ring, 3.4% of the diameter.

inner ring

Inset 7% inside the ring, 1.2% stroke. Dropped in the small master, where it would be noise.

P

Newsreader wght 400 at opsz 24, 56% of the diameter, optically centred (PR #1249).

small master

Below 28 px: Newsreader wght 500 at opsz 12, an 8% ring, no inner ring, a 62% P. <Seal> switches automatically when it knows its size.

Variants

State matrix

At 390 px

The seal does not change at 390 px. In the compact running head it sits at 24 px (small master) as the home link inside a 44 px target; the target is the link, not the drawing.

Accessibility

• Beside the PRECEDA wordmark the seal is decorative: aria-hidden, focusable="false". Omit title.
• Standing alone as a link or brand, name it: <Seal title="Preceda" /> or aria-label on the link.
• Filled with currentColor, so forced-colours mode draws it in CanvasText with no extra rule.
• Ink and gilt-ink both exceed 3:1 against every Paper and Lamp surface (WCAG 1.4.11 for meaningful graphics).

Usage

<!-- Inline the file (e.g. import seal from '@luvkapur/preceda-design-system/mark/seal.svg?raw') -->
<svg class="preceda-seal" viewBox="0 0 100 100" fill="currentColor" aria-hidden="true" focusable="false">
  <path fill-rule="evenodd" d="…ring…"/>
  <path fill-rule="evenodd" d="…inner ring…"/>
  <path d="…P…"/>
</svg>
<!-- Size with the custom property, not width/height: -->
<style>.letterhead .preceda-seal { --preceda-seal-size: 2.75rem; }</style>

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

<Seal size={32} />                  // decorative, beside the wordmark
<Seal size={44} gilt title="Preceda" /> // standing alone
<Seal size={16} />                  // small optical master, automatically

Anatomy

letters

Seven capitals at 0.7 of the font size (synthesised small caps), kerned, ligatures off.

tracking

.22em of the font size between letters; none after the A, so the box ends on ink.

box

Cap top to baseline overshoot. Its bottom sits on the text baseline (vertical-align is generated).

Variants

At 390 px

At 390 px the masthead wordmark steps down to 30 px type (the title role) and the header keeps 17 px. Never below 12 px type (54 px wide).

Accessibility

• Always named: role="img" with a <title> “Preceda”. Override title only to add context, e.g. “Preceda, home”.
• Inside a link that already has text, keep the wordmark as the link’s only content so the name is read once.
• currentColor: ink on Paper, lamp ink on Lamp; both far above 4.5:1.

Usage

<!-- Inline wordmark.svg; it sizes from font-size. -->
<span style="font-size: var(--preceda-type-size-40)">
  <svg class="preceda-wordmark" viewBox="0 -1407.556 12816.762 1466" fill="currentColor" role="img" aria-labelledby="wm">
    <title id="wm">Preceda</title>
    <path d="…"/> <!-- seven letters -->
  </svg>
</span>
<!-- Sealed: wordmark-sealed.svg with class="preceda-wordmark preceda-wordmark--sealed" -->

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

<Wordmark size={40} />
<Wordmark variant="sealed" size={40} />
<Wordmark title="Preceda, home" /> // sized by the parent's font-size

Anatomy

.preceda-lockup

The link. Inline-flex, centred on the cap height, never underlined; --preceda-lockup-size sets the type size.

.preceda-lockup__seal

A decorative <Seal>, sized by --preceda-seal-size: 24 px in the header, 0.7em in the masthead, 1.1em stacked.

.preceda-lockup__word

The named <Wordmark>, sized from the lockup’s font-size.

--masthead · --stacked

40 px type (30 px below 640 px). Masthead gap 0.35em; stacked gap 0.55em, seal above.

Variants

State matrix

At 390 px

The header lockup keeps 17 px and a 24 px seal; its link target is padded to 44 px by the compact head. Masthead and stacked step to 30 px type below 640 px.

Accessibility

• One link, one name: the seal is aria-hidden and the wordmark is named “Preceda, home”.
• Focus ring: 2 px focus colour, offset 8 px so it clears the seal’s ring.
• No hover colour change: the lockup is a quiet mark; the cursor and focus ring say it is a link.
• It is not the H1. On the front page the promise is the H1; in the app, the matter or page title.

Usage

<a class="preceda-lockup" href="/">
  <svg class="preceda-seal preceda-lockup__seal" viewBox="0 0 100 100" fill="currentColor" aria-hidden="true" focusable="false">…</svg>
  <svg class="preceda-wordmark preceda-lockup__word" viewBox="…" fill="currentColor" role="img" aria-labelledby="home">
    <title id="home">Preceda, home</title>…
  </svg>
</a>
<!-- Front page / letterhead: class="preceda-lockup preceda-lockup--masthead" -->
<!-- Gate / splash:           class="preceda-lockup preceda-lockup--stacked" -->

import { Seal, Wordmark } from '@luvkapur/preceda-design-system/react';

// Header (24 px seal: the small master)
<a className="preceda-lockup" href="/">
  <Seal className="preceda-lockup__seal" optical="small" />
  <Wordmark className="preceda-lockup__word" title="Preceda, home" />
</a>

// Masthead
<a className="preceda-lockup preceda-lockup--masthead" href="/">
  <Seal className="preceda-lockup__seal" />
  <Wordmark className="preceda-lockup__word" title="Preceda, home" />
</a>

Anatomy

Seal clear space

A quarter of the diameter on every side.

Wordmark clear space

One cap height on every side.

Lockup clear space

One cap height; in the masthead, the seal’s diameter above and below the rule.

Minimum sizes

Seal 16 px (small master below 28 px). Wordmark 12 px type, 54 px wide. Sealed wordmark 23 px type, where its seal reaches 16 px; below that use the header lockup.

Variants

At 390 px

Clear space scales with the mark; minimum sizes are absolute. At 390 px the header lockup is the smallest lockup allowed.

Accessibility

• Misuse demos carry a visible “Not this” label; colour is never the only signal.
• Below the minimum sizes the marks stop being legible for low-vision readers; use the name in text instead.

Usage

<!-- Clear space is layout, not a class: give the lockup's container
     padding of at least one cap height (0.49em of the lockup's font-size). -->
<header style="padding-block: 0.49em"> <a class="preceda-lockup" href="/">…</a> </header>

Anatomy

favicon.svg

Small master on a Paper disc; switches to Lamp under prefers-color-scheme: dark.

favicon.ico · favicon-32.png

16, 32 and 48 px in one ICO (PNG payloads); 16 and 32 use the small master.

apple-touch-icon.png

180 px, full-bleed Paper (iOS rounds the corners), seal at two thirds.

icon-192/512.png

Purpose “any”: the seal as a coin on transparency.

icon-maskable-192/512.png

Full-bleed Paper; the seal is 60% wide, inside the 80% safe circle for every mask shape.

manifest.webmanifest

Name, the four PWA icons (any and maskable) and Paper as theme and background colour; icon URLs resolve beside it.

splash-*.png

1170×2532, 1179×2556, 1290×2796, 2048×2732: Paper, stacked seal and wordmark on the optical centre.

Variants

Browser tab

Shown at 1×. The 16 px render is the acceptance check: it must still read as the seal.

Paper

Lamp

Home screen

Paper

Lamp

Splash

Paper

Lamp

At 390 px

Installed from Safari or Chrome at 390 px the home-screen icon is the maskable or touch icon and the launch image is the matching splash. The app manifest and <link> tags adopt these files in a later slice (WP-B adoption).

Accessibility

• Raster icons are named by the page title and manifest name (“Preceda”), not alt text.
• The tab icon keeps a Paper disc so it reads on both light and dark browser chrome.

Usage

<!-- Written by headTags(meta, { assetBase: '/mark/' }) from ./head; see Head and preview. -->
<link rel="icon" href="/mark/favicon.ico" sizes="32x32">
<link rel="icon" href="/mark/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/mark/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/mark/manifest.webmanifest">

Anatomy

PageMeta

Required: title, description, canonical (https), image { url (https), width 1200, height 630, alt }. Optional: siteName, type, robots, locale. A missing field is a type error and a runtime error.

headTags(meta, { assetBase })

The head as HTML. headDescriptors returns the same tags as TanStack Start head() arrays.

renderPreviewCard({ kicker, title, description?, host })

Node only (./preview). 1200 × 630 PNG: oxblood binding, small-caps kicker over an ink rule, Newsreader title in up to three lines, a deck, the sealed lockup and the address. Byte-deterministic.

renderSealCard({ line, host })

Node only (./preview). The sealed card for a link whose subject must not travel with it (a private or shared matter): the seal, PRECEDA and one neutral small-caps line (“A matter in chambers”) over the bare host. No title, deck or path; a host with a path is refused. Byte-deterministic.

validateHead(html) · preceda-validate-head

Lists every violation; the CLI walks built HTML and exits 1. CI runs it on every published surface.

Variants

The preview card

This page’s own card, as a link to it arrives. Title and deck share four lines; longer text ends in an ellipsis.

Paper

Lamp

At 390 px

Chat apps show the card at about 300–400 px wide: the title is set at 56–72 px on a 1200 px card so it still reads at a third of the size, and the address stays legible in the footer.

Accessibility

• og:image:alt and twitter:image:alt say what the card says, for readers who cannot see it.
• The card is Paper with ink text at 4.5:1 or better; the kicker and address use the secondary and tertiary inks tested on Paper.
• theme-color follows the reader’s colour scheme, so the browser chrome matches Paper or Lamp.

Usage

import { headTags } from '@luvkapur/preceda-design-system/head';

const head = headTags({
  title: 'Arnesh Kumar v. State of Bihar',
  description: 'Arrest under s. 41 CrPC only on recorded reasons: the checklist the Supreme Court laid down in 2014.',
  canonical: 'https://app.preceda.ai/case/2014-sc-arnesh-kumar-v-state-of-bihar',
  image: { url: 'https://app.preceda.ai/og/case/2014-sc-arnesh-kumar.png', width: 1200, height: 630,
           alt: 'Supreme Court of India: Arnesh Kumar v. State of Bihar, (2014) 8 SCC 273.' },
}, { assetBase: '/mark/' });

// Node: the card
import { renderPreviewCard } from '@luvkapur/preceda-design-system/preview';
const png = await renderPreviewCard({ kicker: 'Supreme Court of India', title: 'Arnesh Kumar v. State of Bihar',
  description: '(2014) 8 SCC 273', host: 'preceda.ai/case/2014-sc-arnesh-kumar-v-state-of-bihar' });

// CI
// npx preceda-validate-head dist/

// TanStack Start route
import { headDescriptors } from '@luvkapur/preceda-design-system/head';

export const Route = createFileRoute('/case/$slug')({
  head: ({ loaderData }) => headDescriptors(loaderData.pageMeta, { assetBase: '/mark/' }),
});