> 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/documentation/reference/sonic-studio-brand-guide.md). # SONIC Studio Brand Guide Canonical SONIC AI Creative Studio identity, theme, component, avatar, music/NFT and desktop-dashboard usage rules. **Design baseline: `1.0.0`**\ **Scope: desktop web, dashboards, documentation, brand assets and music/NFT presentation** {% hint style="info" %} This guide is the canonical visual-reference page for the **SONIC AI Creative Studio** studio-brandkit. Mobile screens and mobile-only components are intentionally deferred from this package. {% endhint %} ## Canonical identity The supplied **waveform mark** is the canonical SONIC studio-brandkit brand and app-icon geometry. Preserve the relative bar heights, spacing, center bar, end dots and overall proportions exactly. Primary lockup: **\[waveform] SONIC**\ **AI CREATIVE STUDIO** The `AI CREATIVE STUDIO` descriptor is always smaller, lighter and more widely tracked than the main `SONIC` wordmark. ### Approved color roles * **Light:** burgundy waveform + black/graphite wordmark. * **Dark:** burgundy or dim-white waveform + off-white wordmark. * **Full Burgundy:** off-white wordmark + controlled burgundy/red icon. * **Luxury Gold:** gold waveform + warm off-white wordmark on charcoal/black. * **Monochrome:** black, white or graphite. ## Use Use the SONIC identity for: * application header and sidebar identity; * desktop app icon and favicon; * authentication and wallet-connect surfaces; * audio/player components where brand continuity is useful; * music/NFT cards as a small publisher, collection or record-label stamp; * documentation covers, architecture diagrams and charts. Use burgundy as the default brand accent. Use graphite/dim-gray icons for normal states and reserve burgundy for active, selected or important creative states. ## Do not use * Do not stretch, skew, rotate, crop or redraw the waveform. * Do not change individual bar heights, spacing or end dots. * Do not add bevels, glows or colored shadows to the master logo. * Do not use pink or neon-magenta as core brand accents. * Do not use yellow as a substitute for Luxury gold. * Do not make every icon red/burgundy. * Do not recolor generated album/NFT artwork merely to match the active UI theme. * Do not use the waveform as proof of token, NFT, creator or ownership state. * Do not add mobile-only components to the current desktop brandkit. ## Clear space and minimum size Keep clear space around the lockup equal to at least the width of one medium waveform bar. Recommended digital minimums: * icon-only: **20px**; * compact horizontal lockup: **120px** minimum width; * standard application lockup: **160–220px**. At small sizes, hide the descriptor before shrinking the main wordmark below a legible size. ## Theme system | Theme | Role | Core direction | | ----------------- | --------------------- | ----------------------------------------------- | | **Light** | Default | Warm white, light gray, graphite, dark burgundy | | **Dark** | Secondary | Charcoal, dark gray, off-white, muted burgundy | | **Full Burgundy** | Immersive brand theme | Deep burgundy shell with neutral contrast | | **Luxury Gold** | Premium | Charcoal/black with true gold accents | | **Classic** | Editorial | Warm ivory, graphite and wine/burgundy | ### Light — default ``` Canvas #F7F7F6 Sidebar #F3F3F2 Surface #FFFFFF Surface soft #F1F1F0 Text #111111 Secondary #565656 Border #E3E3E1 Accent #6D1D2D Hover #5A1725 Accent soft #F4E9EC ``` ### Dark Use charcoal and dark-gray hierarchy rather than pure black for every layer. ``` Canvas #0D0D0E Sidebar #111112 Surface #171718 Raised #242426 Text #F5F5F4 Secondary #B9B9BC Border #2B2B2E Accent #7B1F31 ``` ### Luxury Gold Luxury uses **gold, not yellow**. Gold is reserved for premium accents, selected controls, dividers and icon details while surfaces remain charcoal/black. ## Typography Primary product UI: **Inter**.\ Editorial serif: reserved for hero headlines, quotes, album/NFT titles and selected brand moments. Do not use the editorial serif for operational labels, forms, tables or navigation. Recommended hierarchy: | Role | Size | Weight | | -------------------- | ----: | -----------------: | | Display | 48–64 | 600–700 | | Page H1 | 32–40 | 650–700 | | H2 | 24–30 | 600–700 | | Card title | 16–18 | 600 | | Body | 14–16 | 400 | | Metadata | 12–13 | 450–500 | | Descriptor / eyebrow | 10–12 | 500–700 + tracking | ## Geometry and spacing * Button/input radius: **8px**. * Compact cards: **10–12px**. * Large content cards: **12–14px**. * Use an **8px spacing grid**. * Reserve pill shapes for badges/chips where compact metadata is the intent. ## Pricing cards Pricing hierarchy: 1. Plan name. 2. Main fiat price. 3. Billing interval. 4. Smaller SOL equivalent and `Solana` label beneath the fiat price. 5. Features. 6. CTA. Featured-plan badges are **centered on the top edge of the card**. Example: **$19** / month\ `0.19 SOL · Solana` The SOL value is secondary metadata and must never visually compete with the fiat plan price. ## Desktop dashboards Every primary dashboard uses the shared application shell while owning its own sidebar information architecture. ### Studio `Overview · Create · Characters · Voice · Mix & Master` ### Projects `All Projects · In Progress · Collaborations · Published · Archive` ### Marketplace `Discover · Music · Characters · Visuals · Plugins` ### Community `For You · Trending · Following · Events · Collaborations` Each dashboard page includes: * eyebrow/product section; * clear H1 title; * one-line description; * horizontal subcategory navigation; * contextual workspace content. ## Characters and avatars Avatars should look like professional music/creative profiles rather than generic SaaS placeholders. Keep portrait lighting, crop, contrast and background treatment consistent. Selected character cards use the current theme accent sparingly through a border, rail, status or small waveform. Do not flood the entire card with red unless the Full Burgundy theme is active. ## Music and NFT cards Album artwork is the primary visual object. UI themes affect the **container**, not the artwork itself. Recommended metadata: * cover art; * title; * artist/creator; * edition; * royalty when applicable; * blockchain/network; * primary price; * optional smaller fiat/SOL reference; * verified state; * play/listen action when audio exists. {% hint style="warning" %} Do not invent edition counts, royalties, prices, ownership, chain state or verification. Presentation artwork is not ownership proof. {% endhint %} ## Audio player The shared desktop player may appear across Studio, Library, Projects and Marketplace. It supports album art, track/creator identity, play/pause, previous/next, progress, duration, volume, queue, lyrics, output device, quality state and compact/docked/embed variants. Primary waveform/playhead uses the theme accent. Inactive waveform uses neutral gray. ## Authentication and wallet boundary Authentication and wallet connection are separate concepts. * Email/Google/Apple authenticate the SONIC account. * Solana wallet sign-in may be offered as passwordless authentication. * Wallet connection links an existing account to a wallet for on-chain actions. Do not imply that wallet connection alone proves entitlement, verified identity or asset ownership beyond the connected address. ## Brandkit architecture ```mermaid flowchart LR A[Brand Core] --> B[Theme Tokens] B --> C[Component Library] C --> D[Desktop Product Shells] D --> E[Documentation & Reference] D --> S[Studio] D --> P[Projects] D --> M[Marketplace] D --> CMT[Community] ``` Theme inheritance: ```mermaid flowchart TD A[SONIC Brand Core] --> B[Global Theme] B --> C[Workspace Theme] C --> D[Character Theme - optional] D --> E[Project / Scene Theme] ``` Protected semantics include logo geometry, network identity, verification, success/warning/error states and accessibility minimums. Customizable layers include surfaces, accent tone, typography pairing, density, radius, sidebar mode and background scene. ## Repository reference ``` studio-brandkit/ ├─ shared/ │ ├─ brand/ │ ├─ themes/ │ └─ types/ ├─ components/ui/ ├─ packages/sonic/ │ ├─ sdk/ │ └─ ui/library/ ├─ public/ │ ├─ architectures/ │ ├─ charts/ │ ├─ brand/ │ ├─ icons/avatars/ │ ├─ images/screenshots/ │ ├─ assets/ │ ├─ illustrations/ │ ├─ characters/ │ └─ docs/ └─ brandguide/ ``` Documentation assets: * `public/architectures/brand-system-architecture.svg` * `public/architectures/theme-inheritance.svg` * `public/architectures/desktop-dashboard-architecture.svg` * `public/charts/theme-token-reference.svg` * `public/charts/theme-support-matrix.svg` * `public/charts/brand-mark-usage.svg` ## Release checklist Before shipping a desktop component or dashboard: * Light theme verified. * Dark theme verified. * Full Burgundy verified. * Luxury Gold verified where supported. * Classic verified. * Focus state visible. * Disabled state visible. * Error state readable. * Loading/skeleton state defined. * No pink accents. * No colored shadows. * No clipped text. * No invented product, financial or blockchain claims. * Desktop behavior verified before mobile work begins. ## Related references * [Brand & UI System](/sonic-networks-docs/documentation/reference/brand-and-ui-system.md) * [Frontend & Design System](/sonic-networks-docs/documentation/developers/frontend-and-design-system.md) * [Website & Application Design Guide](/sonic-networks-docs/documentation/developers/frontend-and-design-system/website-and-application-design-guide.md) {% hint style="info" %} This page controls visual identity and component usage. It must not silently override Tokenomics, API Reference, deployment registry or on-chain truth. {% endhint %} --- # 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/documentation/reference/sonic-studio-brand-guide.md?ask=&goal= ``` `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.