01 Overview

Overview

What the package owns, how to install it, and how the six tiers complete it.

§ 1 Principles

A law report, not a dashboard.

The Reporter takes its cues from a bound law report: composed, sourced, quiet and exact. The materials make the hierarchy, so counsel can read and decide without ornament competing for attention.

Principle	In practice
The work is the page.	Interfaces begin with readable matter, not cards, dashboards or decorative chrome.
Provenance is visible.	Authorities, citations, verification notes and unresolved facts keep a distinct typographic form.
Oxblood binds.	Binding is the only functional accent. No local colour for a feature, jurisdiction or status.
Gilt admits; it does not operate.	Gilt marks edition and admission detail. Required gilt text uses gilt-ink.
Rules structure the record.	Whitespace and printed rules, not nested rounded containers.
Two lighting conditions.	Paper and Lamp keep one semantic hierarchy; they are not two palettes.

§ 2 Boundary

The package owns how it looks. Products own what it does.

The package owns the visual contract of every element: classes, tokens, anatomy, states and accessibility semantics, with a React component where there is interaction. Products own fetching, routing, persistence, agent state and the mapping from domain types to props. Nothing here depends on the monorepo at runtime, and React is optional.

CSS

@import '@luvkapur/preceda-design-system/tokens.css';
@import '@luvkapur/preceda-design-system/fonts.css';
@import '@luvkapur/preceda-design-system/primitives.css';

Structure

packages/design-system/
  src/tokens/            typed tokens: themes, type roles, space, layers,
                         breakpoints, tones, verification status
  src/icons/             icon path data → dist/icons.svg + <Icon>
  src/components/<name>/
      <name>.css         the visual contract (preceda-<block>__<el>--<mod>)
      <Name>.tsx         optional React component
  src/react/index.ts     re-exports every React component
  catalogue/             this catalogue: pages/, entries/, SSR + hydration

§ 3 Editions

Six tiers to a complete contract.

0.2 is complete when every element the app, the marketing site and the matter workspace render has a package contract, and three full screens are built only from the package.

Tier	Contract	Scope	State
T1	Foundations+	Type roles, space, layers, breakpoints, tones, verification status, icons, this catalogue.	This edition
T2	Marks	Seal, wordmark and lockups; favicon and PWA images.	Next
T3	Controls + navigation	Buttons, links, fields, selects, combobox, attach, tabs, masthead.	Next
T4	Feedback + overlays	Working line, notes, toasts, dialogs, menus, popovers, sheets.	Next
T5	Record + legal	Ledger, table, timeline, citation, authority entry, verification mark, document sheet.	Next
T6	Correspondence + compositions	Letters, fact requests, composer, marketing blocks and full screens.	Next