Print and legal documents

Field	Value
Type	Skill Resource
Source	~/.copilot/skills/design/references/css/print-and-legal.md
Description	Not specified

Source Content

Print and legal documents

• Print discipline — the rules for paper output
• Black & white, never color
• One central print stylesheet
• Page-break discipline
• Show link destinations
• Strip interactive chrome, expand hidden content
• Vendored reference assets
• How to adopt the vendored assets

Paper is a real output target, not an afterthought. Design it once, centrally, and assume the printer has no color. For tokens and theming see ../tokens-and-theming.md; for where files live see ./architecture.md.

Print discipline

Color ink is expensive and unreliable across printers, so print always works in black & white and never assumes color. Status, severity, and meaning must survive on a monochrome page.

Black & white, never color

Force a paper look: black text on white, and strip everything decorative that costs ink or disappears in grayscale.

/* print.css — central paper stylesheet, loaded with media="print".
   WHY: color ink is costly and grayscale flattens hues to mud. Force
   black-on-white so every page is legible and cheap to print. */
@media print {
  * {
    /* Strip shadows, gradients, and tinted backgrounds — they waste ink
       and turn into gray smears on paper. */
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
  }

  body {
    background: #fff;
  }
}

Convey status by text or pattern, never color alone — a green/red dot is invisible in grayscale. Pair every signal with a word, glyph, or border style.

@media print {
  /* WHY: "Paid"/"Overdue" status reads as color on screen. On paper the
     hue is gone, so emit the label and a border pattern instead. */
  .badge--paid::after    { content: " (paid)"; }
  .badge--overdue::after { content: " (overdue)"; }
  .badge--overdue        { border: 2px dashed #000; }
}

One central print stylesheet

All @media print rules live in one file. Components must not carry their own @media print blocks — scattered print rules are impossible to audit and silently conflict. The single file is the only place paper behavior is authored, which also lets it be loaded separately for performance.

<!-- Load print rules as their own file so the browser fetches them only
     when printing — zero cost to the on-screen render path. -->
<link rel="stylesheet" href="/styles/print.css" media="print" />

This pairs with utility hooks defined once in the same file: .no-print (hide on paper), .print-only (hide on screen, show on paper), and a [data-no-print] attribute variant.

Page-break discipline

Keep logical units whole and never strand a heading at the bottom of a page.

@media print {
  /* Keep a card/row/figure on a single page instead of splitting it. */
  .card, .table__row, figure {
    break-inside: avoid;
  }

  /* Never orphan a heading: don't break right after it. */
  h1, h2, h3, h4 {
    break-after: avoid;
  }

  /* Repeat table headers on every printed page of a long table. */
  thead {
    display: table-header-group;
  }
}

Show link destinations

A printed <a> loses its href, so print the URL inline — with sensible exclusions so fragment, mailto:, tel:, and javascript: links don’t add noise.

@media print {
  /* WHY: paper can't be clicked. Expose the destination so the reader
     can follow it manually. */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
    word-break: break-all;
  }

  /* Skip links where the printed URL is useless or already shown. */
  a[href^="#"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

Strip interactive chrome, expand hidden content

Remove anything that only makes sense on screen, and reveal anything that print would otherwise drop.

@media print {
  /* Interactive-only chrome has no meaning on paper. */
  nav, .toolbar, .button, [data-no-print] {
    display: none !important;
  }

  /* Expand collapsed disclosures so their content isn't lost. */
  details {
    display: block;
  }
  details > summary {
    display: none;
  }
}

Vendored reference assets

These files are already copied into ../assets/ as reference implementations — battle-tested print and legal-document styles for any project needing court-grade paper output. They contain project-specific selectors and tokens; treat them as a starting point to adapt, not a drop-in.

File	What it is	When to reach for it
../assets/print.css	Central @media print stylesheet	The canonical worked example of every rule above — read it before authoring your own print.css. It also declares the native @page legal geometry: letter size, strict 1in margins, and a @bottom-center page-number footer.
../assets/legal/legal.css	Entry point that imports the legal bundle	When a project needs the full legal pipeline; this is the single file to include.
../assets/legal/legal-document.css	Full legal-document component styling	Long structured documents: tokens, table of contents, signature blocks, heading hierarchy, and page-break discipline.

How to adopt the vendored assets

Copy only what you need, rename the project-specific selectors and --legal-* / project tokens to your own (see ../tokens-and-theming.md), but keep the structure and the @page and print rules intact — those encode the hard-won paper and court-formatting behavior that is the reason to start from these files at all.