---
version: 22
name: InventList
description: A precise, warm-paper system for technical pages, diagrams, comparisons, and implementation evidence.
colors:
  ink: "#141414"
  ink-soft: "#57534E"
  ink-muted: "#8A8780"
  accent: "#7C3AED"
  accent-soft: "#F4F0FB"
  accent-deep: "#6D28D9"
  background: "#FBFAF8"
  paper: "#FFFFFF"
  rule: "#E7E5E4"
  ok: "#15803D"
  warn: "#92400E"
  bad: "#991B1B"
  tone-ai: "#F3E9F7"
  tone-client: "#E6EEF6"
  tone-server: "#F8EFD6"
  tone-data: "#ECF1DF"
typography:
  display:
    fontFamily: Inter
    fontSize: 44px
    fontWeight: 800
    lineHeight: 0.92
    letterSpacing: -0.045em
  body:
    fontFamily: Inter
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.55
  eyebrow:
    fontFamily: JetBrains Mono
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.14em
spacing:
  space-1: 4px
  space-2: 8px
  space-3: 12px
  space-4: 16px
  space-5: 20px
  space-6: 24px
  space-7: 32px
  space-8: 48px
rounded:
  code: 3px
  meta: 4px
  control: 8px
  card: 12px
  pill: 999px
components:
  document:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    maxWidth: 1000px
    padding: "{spacing.space-7} {spacing.space-6} {spacing.space-8}"
  card:
    backgroundColor: "{colors.paper}"
    borderColor: "{colors.rule}"
    rounded: "{rounded.card}"
    padding: "{spacing.space-5} {spacing.space-6}"
  status-pill:
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: "2px {spacing.space-2}"
  data-table:
    backgroundColor: "{colors.paper}"
    borderColor: "{colors.rule}"
    typography: "{typography.body}"
  diagram-panel:
    backgroundColor: "{colors.paper}"
    borderColor: "{colors.rule}"
    rounded: "{rounded.card}"
    padding: "{spacing.space-6}"
---

# InventList DESIGN.md

## Overview

InventList v22 is a compact technical-document system. It pairs near-black ink with warm white paper, a violet orientation accent, quiet rules, and four restrained role tones. It is intended for readable specifications, structured evidence, comparison grids, and diagrams.

Apply the token class to the Page container:

```html
<main class="inventlist-v22">…</main>
```

The artifact is deliberately scoped. Do not copy its variables onto `:root` and do not create generic aliases such as `--ink` or `--paper`.

## Typography

Use Inter for display and body text. Display headings are dense, heavy, and tightly tracked. Use JetBrains Mono only for short eyebrows, paths, commands, metadata, and compact statuses. Keep body text at a calm 1.55 line height.

## Color

Ink provides hierarchy; violet provides orientation and emphasis. Green, amber, and red are meaning-only state colors. The four pastel tones distinguish roles or layers and should not become decoration. Keep normal text on paper or the warm background.

## Layout

Use a centered reading width near 1000px with 24px desktop gutters. Cards use a 12px radius, quiet border, and minimal shadow. At 620px and below, reduce the display size to 32px and gutters to 16px. Wide tables and diagrams scroll inside their own containers instead of widening the Page.

## Components

- Eyebrow: uppercase mono, 11px, generous tracking, muted ink.
- Display: 44px/0.92 on desktop and 32px on mobile; use the accent sparingly for an emphasized phrase.
- Card: white paper, one-pixel rule, 12px radius, restrained shadow.
- Status pill: compact mono label with a semantic soft background, matching ink, and border.
- Table: horizontal scrolling wrapper, uppercase mono headers, left-aligned cells, quiet row rules.
- Diagram panel: white paper with a quiet border; use the four role tones to distinguish nodes or layers.

## Do's and Don'ts

- Do scope the system with `.inventlist-v22`.
- Do preserve the 4/8/12/16/20/24/32/48 spacing rhythm.
- Do make wide structures independently scrollable on narrow screens.
- Don't inject these tokens into the document root.
- Don't use role tones without a stable semantic meaning.
- Don't embed product copy, source-page metadata, identities, or access information in reusable artifacts.