# Marketplace design

Design the marketplace around finding a server by task, understanding where it runs and taking its next available action. This chapter records the visual reference, component behavior and accessibility checks.

## Visual reference and decisions

The owner chose a dark streaming-library composition. The reference home has a broad illustrated feature with left-aligned serif type, a single pale action, search directly below it, three covers per shelf and a compact glass navigation dock. These observations come from the supplied local page at a 1522 × 882 viewport. The product artwork, language, icons and tool descriptions must be original to Daedro.

The official MCP registry supports search and provides one-click access to developer documentation. Docker's catalog distinguishes where a server runs and puts its tools and configuration on the detail view. For Daedro, those distinctions inform the tile's availability label and the setup information beneath the primary action. [Official MCP Registry](https://registry.modelcontextprotocol.io/) · [Docker MCP Catalog](https://docs.docker.com/ai/mcp-catalog-and-toolkit/catalog/)

## Proposed desktop layout

~~~text
╭─────────────────────────────────────────────────────────────────╮
│ Daedro MCP Marketplace                     original feature art │
│ Featured task                                                   │
│ Large serif first line                                          │
│ Italic second line                                              │
│ Brief outcome · execution context                               │
│ [Explore Text stats]                                                  │
╰─────────────────────────────────────────────────────────────────╯
[ Search by task, server or tool                                  ]
Data                                                              5
[ cover + title + action ] [ cover + title + action ] [ cover ... ]
Social                                                            1
[ cover + title + action ]

          [ Discover      Workspace      Upload      Docs ]
~~~

Shelf names and counts here illustrate the arrangement. Counts in the interface are derived from the live catalog. Give each service one canonical detail and stable identifier. The hero can feature an item already in a shelf. An open detail retains an obvious way back to the filtered catalog.

At phone widths use a single readable column or a partial next cover with an accessible way to reach all items. Search, task name, outcome and the main action remain usable without zoom. The dock shortens its labels where needed, keeps icons accompanied by text and respects the safe-area inset. A visible strip of the next shelf helps convey that there is more to explore.

## Proposed design tokens

| Use | Direction |
|---|---|
| Canvas and glass | Near-black charcoal canvas (`#09090b`), with control surfaces near `#17171d`. Use a subtly tinted translucent surface with a fine light border for the dock, captions and overlays. Provide an opaque fallback. |
| Text | Warm off-white (`#f5f1ea`) for titles, soft neutral grey for secondary text. Keep the area behind text dark using a gradient scrim with a solid endpoint. Verify the final composite at its brightest point. |
| Accent | Pale lavender (`#c7b5f5`) marks the italic display line. A pale primary control stands out on charcoal. Keep destructive actions separate with text and a restrained danger color. |
| Typography | The system Georgia serif for the large hero title, with a contrasting italic line. Use a compact sans-serif for titles, captions, controls and guide text. Use monospace for tool IDs, endpoints and commands. |
| Spacing | A four-pixel spacing scale. Use 12–16 px gutters between covers, at least 24 px before a shelf heading and 16–24 px page gutters on phones. |
| Shape and motion | Rounded cover edges, a slightly larger radius on the hero, a pill-shaped dock. A short transition can acknowledge focus or selection. Reduced-motion mode uses the final state immediately. |

## Components and states

- **Featured server.** Use a relevant illustration, two-line editorial heading, a succinct capability and one primary action. The art has a subject and focal point that survive a narrow crop. Decorative art has an empty alternative.
- **Search and shelves.** Show a count for each populated shelf and an announced result count during search. Search by service, task or tool name. A zero-result state retains the query and offers a one-step reset.
- **Product tile.** Give the whole tile one keyboard-operable entry point. Give its cover a distinct visual motif. Place the title, one concrete task and availability where they can be scanned. Do not invent ratings, usage counts or verified status.
- **Product detail.** The name and outcome precede credentials and protocol. A public example shows a sample request and how to run it. In managed HTTPS, the selected built-in opens its deployment settings. A real call offers an editable input, a named Run control and feedback from the endpoint. Preserve entered text on errors. Include the actual command or configuration for external integrations.
- **Workspace.** Clearly separate deploying a server, calling it and publishing a package. Identify the active profile, instance and access policy before execution. Distinguish an in-progress request, success with copyable endpoint, an empty instance list and a recoverable rejection.
- **Navigation.** Highlight the current destination. Use descriptive links and a focus ring visible on every surface. An inline detail opens with Enter or Space. Its disclosure has the product name in its accessible label, remains reachable after expansion and retains focus when collapsed. Bottom padding must cover the dock height and its safe-area inset.

Acceptance includes a mobile-size browser inspection, keyboard activation, a reduced-motion check where motion exists, contrast over real cover art and the user tasks listed in the product specification. [Product specification](product.md)