# 20 The Directory

**Philosophy and fit.** Help users narrow a large collection and compare candidates efficiently. Suitable for professional listings, software catalogues, resource collections, local services, and structured recommendations.

**Visual grammar.** Use prominent search, a stable facet column, a concise results summary, and information-rich horizontal listings. A crisp sans, white and pale blue-grey surfaces, deep charcoal text, and restrained teal selections make the contents easy to scan. Each record exposes the same useful attributes; small thumbnails remain secondary. An optional comparison tray collects chosen records.

**Specimen and flow.** _Useful Places_ catalogues fictional workspaces. Visitors filter by equipment and opening day, compare selected venues, and inspect a detailed listing. Supporting states show no matching results with removable filters and a comparison view that highlights differing attributes.

**Adaptation and identity.** Mobile uses an explicit filter panel, visible active filters, and stacked comparison attributes. Preserve comparability, predictable facets, and clear result feedback; avoid marketplace promotion modules, arbitrary recommendation ordering, and a wall of image-led cards. Motion is unnecessary. **Effort: medium.**

## Implemented sample

Useful Places is an expansive, bounded design reference. All organisations, events, prices, statistics and research claims are fictional fixtures. The page includes a complete primary composition and two local supporting routes that show its interaction and content hierarchy.

## Defining features

- Comparable attributes in every row
- Visible result feedback
- A practical shortlist

## Adaptable choices

Brand, subject, accent and equivalent licensed typefaces can change. Preserve composition and navigation. Do not turn the hierarchy into a uniform collection of cards.

## Tokens and typography

Heading: DM Sans. Reading: DM Sans. Local WOFF2 fonts with system fallbacks. Page #f7f9f8; surface #ffffff; text #263d3d; accent #2b6b65. Eight-pixel base spacing; reading measure 65ch; width 1240px. See tokens.css for role values and Demo.vue for composition. Palette and type match the working specimen.

## States

- Entry: /preview/20-the-directory/start
- Venue detail: /preview/20-the-directory/detail
- Workspace comparison: /preview/20-the-directory/compare

## Neighbours and adaptation

- [21 Utility Storefront](../21-utility-storefront/DESIGN.md) uses compact purchasable sku matrix with a category tree and compatibility filters, part codes, and a local basket. This reference keeps stable facet rail and comparable horizontal venue listings and facets, detail pages, and a short comparison tray.
- [50 Infinite Index](../50-infinite-index/DESIGN.md) uses dense finite visual index with discrete overview, medium, and detail densities and anchored search, medium filters, pagination, and return-to-results. This reference keeps stable facet rail and comparable horizontal venue listings and facets, detail pages, and a short comparison tray.

## Assets

See [asset record](../../../docs/ASSETS.md). All vector diagrams and sample writing are original to this repository. Photos are illustrative, not evidence of the fictional brands. Font faces: DM Sans.

## Verification

Reviewed working sample. Browser checks cover entry-page reflow at 320, 390, 768, and 1440 pixels, keyboard entry, direct routes, and automated accessibility; both supporting routes are checked at 390 pixels. Capture metadata is stored in public/previews/20/capture.json and names the source content hash. Accessibility scans are supplementary; no formal WCAG certification or field-performance claim is made.