> 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/developers/frontend-and-design-system/website-and-application-design-guide.md). # Website & Application Design Guide Developer-facing design-system and frontend implementation guide for SONIC website and application surfaces. Canonical visual baseline: **SONIC AI Works 1.0.0**. This guide owns the shared visual, interaction, responsive and product-truth rules for the public website, authenticated creator application, Studio, Projects, Community, Marketplace, Tokenomics, Governance, Finance and administrative surfaces. ## Core design principle > **Show the product before explaining the ecosystem.** SONIC should read first as a serious creative production platform, then progressively reveal AI, creator collaboration, marketplace, rewards, governance and Solana infrastructure. The public product journey is: ``` Create → Build → Collaborate → Publish → Participate → Govern ``` Do not position SONIC primarily as a token, membership system or generic Web3 community. ## Product-first visual formula ``` 70% product/UI clarity 20% cinematic SONIC identity 10% Solana / technical detailing ``` Cinematic red-moon, waveform and headphone artwork frames the product. It must not replace real product proof. ## Canonical brand identity Use the **SONIC waveform mark** as the primary product identity. The canonical token presentation artwork is the **supplied circular red 3D SONIC coin with the white SONIC mark**. Preserve that coin artwork rather than redrawing or restyling it. Compact product surfaces use a separate vectorized SONIC icon system derived from the canonical mark. The token coin is decorative economic artwork and must not replace the waveform mark in navigation, authentication, dashboards or app chrome. ### Brand usage ``` Light surfaces → dark/black SONIC logo Dark/cinematic → white SONIC logo Dark-red brand → white SONIC logo Accent/icon → red waveform icon Token artwork → canonical circular red SONIC coin Compact token UI → circular vector SONIC token icon ``` ## Asset organization ``` public/ ├── assets/brand/ ├── icons/ └── images/ ├── coin.webp ├── hero.webp ├── screenshots/ └── illustrations/ ``` Use real vector brand assets where available. Do not extract logos from screenshots, and do not convert a simplified tracing of the 3D coin into the master token artwork. ## Page templates ```ts type MarketingPageTemplate = | "hero-product" | "editorial" | "technical" | "marketplace" | "campaign"; ``` Recommended mapping: | Page | Template | Identity | | ----------- | ------------ | -------------------------------- | | Homepage | hero-product | light + cinematic | | Studio | hero-product | dark / generative | | Projects | editorial | light / structured | | Creators | editorial | white / portfolio | | Community | editorial | light gray / production activity | | Marketplace | marketplace | black + white / commercial | | Challenges | campaign | cinematic | | Pricing | editorial | light | | Tokenomics | technical | dark / financial | | Governance | technical | dark / civic / protocol | | Solana | technical | black/red / infrastructure | ## Header system The floating header is the default homepage treatment. ``` 16px inset SONIC Home Create Studio Projects Marketplace Community More ▾ Search Theme Login Launch Studio → ``` Rules: * floating header → no Topbar; * standard page → dark-red Topbar + standard Header is allowed; * dashboard → application shell only; * floating header starts translucent and becomes more opaque after scroll; * one strong marketing CTA: **Launch Studio →**. ### Navigation hierarchy Primary desktop navigation: ``` Home Create Studio Projects Marketplace Community More ▾ ``` `More` may contain: ``` Creators Challenges Tokenomics Governance Blinks Developers Docs Pricing ``` Do **not** add a generic Membership navigation concept. Governance is the canonical participation/governance destination where governance features are enabled. ## Homepage architecture The homepage should tell one product story: ``` IDEA ↓ AI CREATION ↓ PROJECT ↓ COLLABORATION ↓ PUBLISH ↓ PARTICIPATE ↓ GOVERNANCE / OWNERSHIP ``` Canonical section order: ``` Floating Header Hero + Studio product preview Capability Proof AI Studio Project Builder Creator Collaboration Community Challenges Marketplace Rewards & Ownership Governance Solana Infrastructure Pricing FAQ Final CTA Dark-red Footer ``` Avoid repeated sections that restate “AI + creators + blockchain.” ## Hero ### Eyebrow **THE CREATIVE PRODUCTION PLATFORM** ### H1 **Turn an idea into a finished creative project.** ### Supporting copy Generate music with AI, shape ideas into structured productions, collaborate with creators, and manage your work from concept to release in one connected workspace. ### CTAs **Launch Studio →** **Explore Projects** ### Proof line **AI creation · Project production · Creator collaboration · Solana infrastructure** Hero copy should normally stay within 12–14 words for the main headline. ## Hero visual composition Use `hero.webp` as a cinematic brand layer, not as the sole proof surface. Desktop composition: ``` Left: value proposition + CTAs Right: real Studio/Product UI Background: controlled red moon / headphone / waveform treatment ``` Target ratio: ``` Product UI clarity dominant Cinematic artwork supporting Technical details subtle ``` Do not place key text across faces or dense waveform areas. ## Capability proof Immediately after the hero, use verified capability proof rather than invented statistics. ``` AI MUSIC PROJECT BUILDER CREATOR COLLABORATION MARKETPLACE SOLANA ``` Use real metrics only when backed by authoritative production data. ## AI Studio AI Studio communicates creation only. ``` Prompt → Model → Generation progress → Generated track → Open in Project ``` Marketing previews may simulate UI states but must not imply a real generation has occurred. Recommended section copy: **Create the starting point.** Turn a prompt into music and creative assets, refine the result, and move successful generations directly into a structured project. ## Project Builder Project Builder is a signature product visual and should receive strong emphasis. ``` PROMPT Create a cinematic rock video about surviving after the end of civilization. ↓ THE LAST HORIZON Cinematic Rock 12 scenes 27 creative tasks 14-day production plan [ Open Project → ] ``` Product positioning: > AI can generate assets. SONIC turns the idea into a production. ## Community Community should look like **production activity**, not generic social media. Cards prioritize: ``` Project Contribution needed Creator role Deadline Reward Status ``` Do not imply rewards are funded unless funding is verified. ## Challenges Challenges are premium campaign moments. Use cinematic art, minimal metadata, one dominant reward figure and one CTA. Use explicit status language for rewards and funding. ## Marketplace Marketplace uses product-focused black + white surfaces with restrained SONIC red accents. Connect Wallet is contextual and should appear only when the user reaches an on-chain action. ## Rewards and ownership Reward UX must distinguish: ``` estimated eligible allocated claimable submitted confirmed settled reconciled ``` Leaderboard position, community activity, token ownership or challenge participation alone does not create a claimable entitlement. ## Governance Governance is a distinct product area, not a generic membership layer. Governance surfaces should explain: * proposal lifecycle; * eligibility source; * voting power source; * delegation where supported; * quorum / threshold policy where configured; * proposal state; * wallet/signature requirements; * execution state; * verification and reconciliation. Marketing copy must distinguish **planned**, **configured**, **verified**, **Live** and **paused** governance capabilities. Do not imply that holding SONIC automatically grants governance rights unless the canonical governance policy explicitly says so. ## Solana section Keep Solana explanation outcome-focused: * fast settlement; * wallet-based ownership; * verifiable participation; * transparent rewards; * marketplace transactions. Technical depth belongs behind **Explore Solana Integration →**. ## Tokenomics Use the **canonical supplied red 3D SONIC coin** as the primary token presentation visual. Do not alter the coin artwork itself. Use separate vectorized SONIC token icons for metrics, allocation cards, tables, Wallet, Swap, Rewards and compact finance surfaces. Token identity is deployment-registry driven. Never identify SONIC solely through symbol, logo, coin artwork, metadata or marketing content. Preferred token summary: ``` Token SONIC Network Solana Standard Token-2022 Initial maximum supply 18,446,000,000 SONIC Decimals 9 Atomic initial maximum supply 18,446,000,000,000,000,000 Launch transfer-fee rate 2% / 200 bps Maximum transfer-fee rate policy cap 5% / 500 bps Token-2022 maximum fee amount TBA / deployment-verified Quarterly burn 2% — calculation base TBA Streamflow lock 3,000,000,000 SONIC designated Mint TBA / deployment-verified ``` **Token-2022, 9 decimals, the 2% launch transfer-fee rate and 5% rate-policy cap are approved policy.** Production mint, Token-2022 maximum fee amount, authorities, Streamflow identifier, lock schedule and burn calculation base remain deployment-controlled. The **5% / 500 bps policy cap is not the Token-2022 `maximumFee` amount**. UI labels and API fields must keep the rate cap and absolute token-amount cap separate. Do not hard-code a production mint, Token-2022 maximum fee amount, authority address, Streamflow ID or burn-base value before deployment verification. Do not mix platform usage metrics into monetary-policy summary cards. ## Typography Preferred family: **Satoshi** where licensed web delivery is available. Do not redistribute font binaries. | Role | Desktop | | ----- | --------------- | | Hero | 72px / 0.95–1.0 | | H1 | 60px | | H2 | 44–48px | | H3 | 30–32px | | Lead | 20px | | Body | 16px | | Small | 13–14px | | Label | 11–12px | Reading widths should generally remain around 680–760px for long-form body copy. ## Surface rhythm Recommended marketing distribution: | Surface | Approximate use | | ------------- | --------------- | | White / light | 55–65% | | Light gray | 15–20% | | Near-black | 10–15% | | Dark red | 8–12% | Dark red is reserved for high-value brand moments: topbar, footer, premium promotion, final CTA, wallet marketing card and occasional campaign features. Bright SONIC red is primarily an interaction/accent color. ## Spacing Desktop: ``` Hero → next section 112–144px Normal sections 96–120px Dense product sections 72–96px ``` Mobile: ``` 56–72px ``` Prefer spacing over excessive borders, shadows and nested cards. ## CTA governance Canonical CTA roles: | Role | Example | | ---------------------- | ---------------------------- | | Primary conversion | Launch Studio → | | Section progression | Explore Projects → | | Contextual transaction | Connect Wallet | | Documentation | Explore Solana Integration → | Avoid multiple labels for the same action across pages. ## Theme behavior Theme changes neutral surfaces only. Strong branded surfaces remain branded. ``` Light mode → dark-red footer stays dark red Dark mode → dark-red footer stays dark red ``` Theme toggle locations: desktop header, footer and mobile drawer. Avoid unnecessary duplication. ## Footer Default website footer remains dark red. Recommended structure: ``` SONIC AI WORKS Create what comes next. AI creation, structured production, creator collaboration, and supported Solana-native participation in one connected platform. [ Launch Studio → ] PRODUCT ECOSYSTEM RESOURCES COMPANY Studio Community Docs About Projects Creators Developers Partners Marketplace Challenges Whitepaper Careers Pricing Tokenomics Help Contact Governance Status ``` Bottom row: ``` © 2026 SONIC AI Works Terms Privacy Cookies System theme ``` ## Mobile composition Mobile changes composition rather than scaling desktop. ``` Floating Header Single-column Hero Focused Product Preview Horizontal capability strip Stacked product sections Accordion FAQ Dark-red Footer ``` Complex split layouts should reduce to the most important panel. ## Interaction states Every interactive component defines: ``` default hover focus pressed selected disabled loading error success ``` SONIC red generally indicates active/selected state rather than every hover. ## Motion tiers ``` Functional 120–220ms Product 250–600ms Cinematic 4–12s ``` Cinematic motion is sparse and must respect `prefers-reduced-motion`. ## Authentication and wallet UX Authentication remains identity-first. Wallet connection is contextual. A connected wallet proves availability of an address/session context; it does not authorize arbitrary transactions. Desktop wallet modal: ``` Dark-red SONIC marketing card | Light provider card ``` Mobile: provider-first bottom sheet with compact branded header. ## Application shell Authenticated desktop baseline: ``` sidebar 232px header 64px main fluid footer 20px ``` Collapsed sidebar: `72px`. Application navigation is role- and permission-aware. Do not add marketing navigation concepts such as Membership into authenticated product IA unless a real product capability requires them. ## Accessibility and shipping gates Required before release: ``` □ one primary CTA above the fold □ no more than one H1 □ no fabricated metrics □ no fake wallet/network state □ no unverified reward/funding claims □ no excessive red □ no unnecessary nested cards □ responsive at 375px □ keyboard usable □ visible focus □ WCAG AA contrast □ reduced-motion supported □ optimized images □ no avoidable layout shift □ light/dark themes tested □ metadata complete □ footer/header variant correct ``` ## Product-truth rule ``` design ≠ configured ≠ verified ≠ live ``` Never turn mock/reference imagery into claims of live balances, liquidity, provider status, governance rights, payments, token deployment, user activity or rewards. ## Final design invariant ``` premium product UI + cinematic music identity + restrained deep-red brand surfaces + precise Solana infrastructure + creator-focused storytelling + explicit governance state = SONIC production website baseline ``` --- # 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/developers/frontend-and-design-system/website-and-application-design-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.