Skip to content
Documentation

ADR-030: Legal Document Architecture

Decision

Legal document UI is organized into four layers — Components, Templates, Case files, Data files — each depending only on the layers below it. All visual styling lives in a single legal-document.css; templates are thin slot shells with no hardcoded strings.

Key rules

  • Four layers, strict downward dependency: Components depend on nothing in the stack; Templates depend on Components; Case files depend on Templates; Data files depend on nothing and are consumed by Case files. A layer never reaches up.
  • src/components/patterns/myfreelawyer/components/legal-document.css is the single source of truth for all legal document visual styling. Nowhere else.
  • Never use style={{}} inline styles for visual properties in legal document components.
  • No tokens.ts file. Token values come from CSS custom properties, not JS constants.
  • Screen and print share the same visual CSS. print.css (@media print) handles only layout geometry — margins, page breaks — and show/hide. No color or type rules in print CSS.
  • Templates are under 30 lines and contain zero hardcoded strings. They are slot-composition shells only.
  • Canonical slot vocabulary: header, body, signature, certificate (plus any additional slots defined per template). Use these names; do not invent ad hoc slots.
  • Data files are .ts, not .tsx. They expose segments: TextSegment[] and contain no JSX.
  • Storybook args use a flat structure with table: { category } grouping, not nested objects.

Why

A single CSS source plus a geometry-only print layer keeps one visual design in sync across screen and paper, and removing tokens.ts and inline styles eliminates the parallel styling paths that drift apart. The four-layer split with downward-only dependencies keeps templates trivially reviewable (under 30 lines, no strings) and pushes all copy into typed, JSX-free data files. This record reconciles ADR-030 (component styling discipline) and the former ADR-030 (MyFreeLawyer architecture) into one Legal Domain record; where the sources expressed visual values as raw rules, current dmwd-io practice is that those CSS custom properties resolve to semantic tokens (ADR-001, ADR-006) and that print always renders light mode (ADR-007), which this record assumes rather than restates.

Applies when

You are building or editing any legal document component, template, case file, or data file under src/components/patterns/myfreelawyer/, or adding print styles to a legal document.

  • ADR-001 — design tokens (the CSS custom properties resolve to these).
  • ADR-006 — color & theming (semantic tokens, never raw values).
  • ADR-007 — print discipline (geometry-only print layer, print is light mode).
  • ADR-010 — component architecture & catalog (layering principles applied domain-wide).