# Form Atlas design contract

Form Atlas helps humans choose public UI references and gives coding agents source context. The product is a searchable directory, collections, resource detail pages and a local brief builder.

## Visual direction

Atmosphere A7 Clean Void / Type T2 Sans with one serif italic headline phrase / Density D2 Hybrid / Chroma C4 Cool Paper / Motif M4 Inline Art Band. Profile: openai-core. The primary screen has an editorial headline, a small interactive shadcn example, search, category rail and visual resource cards. Inner pages reuse the same typography and tokens.

Use a pure white canvas, neutral graphite text, hairline structural dividers, tight 8px cards and 44px touch targets. Inter is the interface font. Instrument Serif italic appears only in one headline phrase. No decorative lead-in labels, warm backgrounds, colorful chrome or gradient buttons.

## Semantic tokens

See /tokens.json and /style.css. Background #ffffff, foreground #292929, body #5d5d5d, muted foreground #656565, subtle surface #f7f7f8, structural border #e6e6e6. Actual input borders #949494. Structural dividers do not carry essential control information.

## Composition and type

Desktop shell is at most 1392px with 56px gutters. Hero uses a split headline/example composition. Search spans the content width. Below, a 170px filter rail sits beside a three-column card grid. Below 1150px, use two columns. Below 760px, use 20px gutters, a horizontal scrolling category rail and no hero example. Below 380px, use a single-column grid.

Hero sans is 40-58px with 1.08 line height and a 1.17x serif accent. Body is 14-17px. Resource titles are 16px. Metadata is 11-12px. Body text meets 4.5:1 contrast. Never use marketing display type for a control.

## Component contract

Use shadcn/ui Button and Switch. Search has a persistent accessible name and clear action. Filters update real results. Cards link to dedicated, crawlable resource pages. The plus button saves locally and becomes a check when selected. Brief controls remain disabled until browser storage loads. Every failure receives an actionable visible message.

Resource preview scenes are original editorial illustrations, not upstream screenshots or exact implementations. The detail page states this clearly. Do not use these samples as evidence of upstream behavior. Registry counts include variants/examples and are not unique-free-component counts.

## Motion contract

Hover border transitions: 150ms. Illustrative motion panels move at most 8px with 250ms cubic-bezier(.2,0,0,1), only on fine-pointer hover. Switch state uses the upstream component's transition. No continuous page animation. Under prefers-reduced-motion, remove movement and transition duration. Never delay search or keyboard actions.

## States and quality

Cover empty search, unknown resource (404), empty brief, browser-storage failure, clipboard failure, disabled pre-hydration saves, mobile overflow and long source names. Search supports Cmd/Ctrl+K. Keep visible focus indicators, semantic headings, native links, labels and status announcements.

## Agent instructions

Read /llms.txt before consuming the catalog. Confirm exact upstream files, license and dependencies. Select a coherent foundation, composition and motion direction. Do not copy proprietary source or treat a free preview as a license grant. Finish with a real build, keyboard checks, desktop/mobile rendering and accessibility checks.