Library UI design system

```meta
title: Library UI design system
subtitle: Type, controls, and page patterns for finding and reserving a book.
tag: UI DESIGN SYSTEM · EXAMPLE
```

This example defines a small catalogue interface for library members. The main
task is to find an available book and place a hold. Staff administration is
outside this document's scope.

## Use a small type scale

Use headings to identify the page and result groups. Keep book titles distinct
from author names and availability text; availability must remain understandable
without relying on color.

```typescale
id: library-type
sample: Find your next book
items:
  - { name: Page title, size: 32, weight: 700, font: display }
  - { name: Section heading, size: 22, weight: 600, font: display }
  - { name: Book title, size: 18, weight: 600 }
  - { name: Body and controls, size: 16, lineHeight: 1.5 }
  - { name: Supporting text, size: 14, lineHeight: 1.5, note: "Author, edition, and branch" }
```

## Make the next action explicit

A hold is a request for a copy, not a promise that the book can be collected
immediately. Use the same wording on the button, confirmation, and account page.

```dodont
id: library-controls
dos:
  - { text: Name the action on its button, example: Place hold }
  - { text: Include the branch in the confirmation, example: "Hold placed at Central Library" }
  - { text: Explain an unavailable action beside the control, example: "Sign in to place a hold" }
  - { text: Keep the query when a search returns no results }
donts:
  - { text: Use a generic label for the main action, example: Submit }
  - { text: Show availability with color alone }
  - { text: Erase the search when a filter changes }
```

## Track component readiness

These statuses describe this example's proposed component set. They do not
report the status of a published library.

```inventory
id: library-components
items:
  - { name: Search field, status: stable, note: "Visible label and clear-query control" }
  - { name: Book result, status: stable, note: "Title, author, branch, and availability" }
  - { name: Availability label, status: stable, note: "Text accompanies the status color" }
  - { name: Hold confirmation, status: beta, note: "Confirm the pickup-branch wording in usability sessions" }
  - { name: Saved searches, status: planned, note: "Outside the first release" }
```

## Reuse the pattern on narrow screens

The wireframes show content order, not a finished visual design. On a narrow
screen, filters follow the search field and results form a single column.

```wireframe
id: library-screens
screens:
  - device: browser
    title: Library catalogue
    url: library.example/catalogue
    label: Search results
    elements:
      - { type: nav, label: "Catalogue, My holds, Account" }
      - { type: header, label: Find a book }
      - { type: search, label: Search title or author }
      - { type: tabs, label: "All branches, Central, Riverside" }
      - { type: text, label: "3 results for garden" }
      - { type: card, label: "A small garden · Lee Morgan · Available at Central", rows: 2 }
      - { type: button, label: Place hold, tone: accent }
  - device: phone
    label: Narrow screen
    elements:
      - { type: header, label: Find a book }
      - { type: search, label: Search title or author }
      - { type: button, label: Filters }
      - { type: text, label: "3 results for garden" }
      - { type: card, label: "A small garden · Central · Available", rows: 3 }
      - { type: button, label: Place hold, tone: accent }
```

Before shipping, check keyboard navigation, focus visibility, text resizing,
and the empty, loading, error, and confirmation states in the implemented UI.