> For the complete documentation index, see [llms.txt](https://sonic-ai-works.gitbook.io/sonic-networks-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sonic-ai-works.gitbook.io/sonic-networks-docs/sonic-1.0.0-rc-production-architecture/reference-ui-and-components.md).

# Reference UI & Components

Reference-backed SONIC Token Sale, Marketplace, Studio, AI Agent, footer and media component contracts.

The supplied SONIC product imagery is the visual reference for r26. It defines a premium white/light-gray editorial system, restrained burgundy, large music-first typography, cinematic media, clear transaction review and product UI that remains understandable without exposing infrastructure first.

{% hint style="info" %}
The original reference images are retained in the r26 source under `apps/tokensale/public/reference/` and `docs/assets/reference/`. Values visible inside screenshots are representative design data unless an authoritative runtime endpoint verifies them.
{% endhint %}

## Reference surfaces

* Token Sale completion and wallet-connection modal.
* Marketplace discovery and collectible/media cards.
* AI Agent cards in light, dark and burgundy variants.
* Creator Studio multitrack generation workspace.
* Ecosystem and footer compositions.
* Media preview cards in light and dark variants.

## Reusable media player

`plugins/music/music-player.tsx` owns playback behavior and media state. `ui/music-player.tsx` is the stable design-system re-export used by Marketplace, Studio, releases, Blinks and embeds.

The player supports light, dark and burgundy presentation without changing the underlying media state contract. It never fabricates a playable result when no media URL exists.

## Rewards and cards

`components/rewards/` and `components/cards/` must distinguish `estimated`, `eligible`, `allocated`, `claimable`, `submitted`, `confirmed`, `settled` and `reconciled`. A leaderboard position, token balance or community action alone does not create a claimable entitlement.

## Design invariant

```
70% product clarity
20% cinematic SONIC identity
10% technical detail
```

No gradients, neon, crypto glow or hidden transaction fees. Technical metadata stays below the creator/commercial meaning.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://sonic-ai-works.gitbook.io/sonic-networks-docs/sonic-1.0.0-rc-production-architecture/reference-ui-and-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.