Listune Brand Identity
The definitive visual reference guide and digital asset library for the Listune Discord music bot ecosystem. Designed for high audio fidelity, clean modern interfaces, and frictionless group listening.
Brand Overview
Listune is a modern Discord music bot that delivers studio-grade audio playback, interactive Activities, and intuitive controls for online communities.
Voice Channels
Instant, low-latency audio streaming directly in community voice rooms. Engineered for flawless group playback without stutter or audio degradation.
Discord Activity
An interactive visual window inside Discord where friends can see synchronized live lyrics, manage song queues, and share music discoveries together.
Web Companion Player
A sleek companion web dashboard offering deep audio equalization, custom playlist sorting, and server music controls accessible from any desktop browser.
Brand Messaging and Taglines
Direct, conversational statements that state what Listune does plainly and concisely without artificial buzzwords.
2.3 Brand Summary Principles
A modern Discord music bot with studio-grade audio and companion web dashboard.
Seamless group listening, rich audio customization, and clean digital interfaces.
Logo System and Brandmarks
The Listune logo exists in two primary configurations: the Circular Symbol (App Icon) and the Horizontal Wordmark. Each asset has dedicated contrast specifications.
Background and Contrast Simulator
Solid circular badge in Listune Pink (#f3678e) with white curved headphones and soundwave emblem. Optimal on dark surfaces, profile avatars, and app stores.
Primary brand identifier for dark surfaces. Use the toggle above to preview how the white wordmark delivers crisp contrast against Brand Pink backgrounds.
Dedicated identifier for dark and white surfaces. Use the toggle to preview on charcoal vs pure white. Never place pink wordmarks on pink surfaces.
High-contrast black identifier for white documents, light mode collaterals, and paper printing. Never place on dark surfaces.
Transparent raster pink wordmark for video editing, social media collaterals, and quick image overlays on dark surfaces.
Extended brand composition asset combining circular emblem and geometric typography for marketing displays.
Logo Usage Guidelines
Clear space boundaries, background contrast specifications, and minimum rendering sizes.
4.1 Clear Space Perimeter
Always preserve an exclusion zone around all sides of the logo equal to at least the height of the lowercase letter "e" in the Listune wordmark. No text, competing symbols, borders, or graphics may encroach within this boundary.
4.2 Background Contrast Rules
- Dark Backgrounds: Use the White wordmark or Pink wordmark.
- Brand Pink Backgrounds: Always use the White wordmark. Never place pink logos on pink backgrounds.
- Light and White Backgrounds: Use the Monochrome Black wordmark or Pink wordmark. Never place white logos on white backgrounds.
- Complex Imagery: Place the wordmark over a dark translucent backdrop to guarantee legibility.
4.3 Minimum Display Dimensions
- Digital Wordmark: Do not render smaller than 120 pixels wide.
- Circular Symbol: Do not render smaller than 24 x 24 pixels on digital screens.
- Always ensure the curved soundwave detail remains sharp and unblurred.
Color Palette
The Listune color system balances electric pink accents with deep dark foundations and crisp white typography. Click any swatch below to copy its hex code.
Brand Typography and Font System
Clean, digital-first sans-serif typography engineered for legibility across computer screens, community chats, and web applications.
abcdefghijklmnopqrstuvwxyz 1234567890 (!@#$%^&*.,?)
Contemporary geometric sans-serif that closely reflects the curves and bold weights of the Listune logo lettering. Open source under the SIL Open Font License 1.1.
abcdefghijklmnopqrstuvwxyz 1234567890 (!@#$%^&*.,?)
Renowned for clean tall x-height, readable numbers, and neutral modern presentation across digital monitors. Open source under SIL Open Font License 1.1.
6.1 Logo Lettering Anatomy
The Listune wordmark uses custom geometric sans-serif lettering characterized by bold stroke weight, a clean vertical capital L, smooth terminal curves on lowercase t, and circular geometry on e, u, and n. It is custom lettering rather than a single stock font.
6.4 Typography Personality
- Clean & Legible: Content always takes precedence over decorative font styling.
- Geometric & Confident: Strong, clear headlines with balanced tracking and comfortable leading.
- Discord-Native: Modern and tech-centric, fitting naturally inside community environments.
Visual Style and Atmosphere
The aesthetic atmosphere of Listune feels like a late-night music listening lounge: calm, dark, atmospheric, illuminated by vibrant pink accents.
Dark-First Elegance
Listune lives in dark mode. Interfaces use deep charcoal and soft black foundations rather than stark neutral grays, creating a calm late-night listening environment.
Electric Pink Focus
Vibrant Listune Pink (#f3678e) is applied intentionally to key action buttons, active playing states, and brand marks, guiding user attention without visual noise.
Translucent Surfaces
Layered cards with subtle 1px border strokes (rgba(255,255,255,0.08)) convey depth, polish, and structure without heavy drop shadows or clutter.
Rounded Geometry
Approachable rounded corners (14px on panels, pill shapes on status tags) produce a friendly, community-centric aesthetic that feels native to modern Discord apps.
Promotional and Community Assets
Every media file in the repository is rendered and inspectable below. Click any asset to open the high-resolution lightbox inspector.
Favicon and Web App Icon System
Complete suite of web icons, progressive web app icons, and mobile shortcuts stored in favicon/.
Android Chrome 512
favicon/android-chrome-512x512.png
Android Chrome 192
favicon/android-chrome-192x192.png
Apple Touch Icon (180x180)
favicon/apple-touch-icon.png
Motion and Animation Identity
Motion reflects the continuous rhythm of music. Transitions feel fluid and responsive without jarring speed changes.
Smooth & Continuous
The signature 3D rotating logo turns in a continuous, frictionless 360-degree loop, reflecting the perpetual flow of audio playback.
Fluid Easing
State changes and interface transitions use natural ease-in and ease-out timing curves rather than abrupt linear transitions.
Subtle & Ambient
Animations draw attention to playback status, volume adjustments, and primary actions without distracting from conversations.
Transparent Alpha Channels
Transparent 3D animations are packaged in lightweight WebM and transparent GIF formats, delivering crisp alpha channel rendering across modern browsers and web engines.
Brand Voice and Tone
Listune speaks with clarity, musical awareness, and friendly respect for Discord server communities.
Approachable
Friendly and conversational without being overly casual or unprofessional.
Direct & Concise
Explains features and instructions clearly without technical jargon or artificial buzzwords.
Music-Centric
Respects audio fidelity, playlists, album artists, and shared listening culture.
Discord-Native
Understands server communities, voice chat habits, and bot slash command conventions.
Brand Personality
If Listune were a person, it would be the reliable friend who always has the best playlist.
Attentive
Ready to queue and play immediately upon request without delay.
Modern
At home in digital chat communities, gaming voice rooms, and modern web apps.
Tasteful
Prefers clean aesthetics, smooth audio fidelity, and uncluttered presentation.
Social
Built to bring friends together around albums, queues, and shared moments.
Brand Do and Don't Guidelines
Essential rules for maintaining visual consistency across community touchpoints, graphics, and integrations.
- Use the white logo variant on dark backgrounds and navigation headers.
- Use the circular symbol for profile pictures, avatars, and app icons.
- Preserve the exact primary Listune Pink (#f3678e).
- Keep the full clear space boundary around the emblem.
- Maintain strong contrast between text and background surfaces.
- Use rounded geometry for containers and interactive buttons.
- Pair the vibrant pink accent with calm, deep dark backgrounds.
- Keep card surfaces subtle with thin 1px border strokes.
- Use Inter for body text, descriptions, and user interfaces.
- Use Plus Jakarta Sans for display headlines and promotional titles.
- Maintain comfortable line heights (1.5 to 1.6) for sustained reading.
- Use bold weights (700/800) for strong visual hierarchy.
- Do not distort, stretch, or alter the logo aspect ratio.
- Do not rotate the logo or place it at tilted angles.
- Do not recolor the logo with unauthorized rainbow or neon hues.
- Do not add outer glows, heavy shadows, or bevel filters.
- Do not build light-gray or all-white interface layouts; Listune is dark-first.
- Do not clutter banners with excessive decorative elements.
- Do not use generic clip-art or random music emojis in place of brand assets.
- Do not use low-contrast text that compromises legibility.
- Do not use ornate, gothic, or novelty fonts for brand communications.
- Do not use inconsistent font weights across related marketing collateral.
- Do not set body text below 14px on desktop interfaces.
- Do not use artificial letter spacing on body paragraphs.
Complete Brand Asset Directory
A comprehensive catalog of all 31 verified media assets, master vectors, animations, and typography packages in the workspace.
| Category | Asset File Path | Format | Primary Use Case |
|---|---|---|---|
| Brand Identity | logo/listune-logo.png |
PNG (1024x1024) | Discord bot profile avatar, app store listings, circular badge |
| Brand Identity | logo/listune-logo.svg |
SVG Vector | Scalable vector master for high-resolution graphics |
| Brand Identity | brand/listune-brand-white.svg |
SVG Vector | Primary wordmark on dark surfaces and header bars |
| Brand Identity | brand/listune-brand-pink.svg |
SVG Vector | Pink wordmark for dedicated marketing showcases |
| Brand Identity | brand/listune-brand-black.svg |
SVG Vector | Monochrome black wordmark for light papers and printing |
| Brand Identity | other/listune-text.png |
PNG Raster | Transparent pink wordmark for overlays |
| 3D Motion | animated/webm-transparent/listune-white-alpha.webm |
WebM Alpha | Transparent rotating 3D white logo for hero web stages |
| 3D Motion | animated/webm-transparent/listune-pink-alpha.webm |
WebM Alpha | Transparent rotating 3D pink logo for promotional video |
| 3D Motion | animated/gif-transparent/listune-white-transparent.gif |
GIF Transparent | Rotating 3D white logo for markdown docs and Discord chat |
| 3D Motion | animated/gif-transparent/listune-pink-transparent.gif |
GIF Transparent | Rotating 3D pink logo for presentations |
| Banners | animated/banner/listune-banner-animated.gif |
GIF / MP4 | Official animated Discord community banner (Pink) |
| Banners | animated/banner/listune-banner-white-animated.gif |
GIF / MP4 | Official animated Discord community banner (White) |
| Banners | og-image/og-image.png |
PNG (3576x1184) | OpenGraph social card for link embeds and Twitter shares |
| Discord Utility | other/listune-music-card.png |
PNG Card | Now Playing audio layout template for track announcements |
| Discord Utility | other/create-ticket.png |
PNG Banner | Header banner for community support ticketing panels |
| Discord Utility | other/listune-req.png |
PNG Banner | Header banner for dedicated #song-request channels |
| Discord Utility | other/listune-welcomer.png |
PNG Banner | Greeting banner background for welcoming new members |
| Discord Utility | other/welcy.png |
PNG Banner | Alternative greeting card graphic |
| Discord Utility | other/bg-logo.png |
PNG Wallpaper | Desktop wallpaper background logo composition |
| Discord Utility | other/brands.png |
PNG Graphic | Extended branding lockup graphic |
| Discord Utility | other/preview-card.png |
PNG Card | Social preview card template |
| Favicon Suite | favicon/android-chrome-512x512.png |
PNG (512x512) | High-res Progressive Web App icon |
| Favicon Suite | favicon/android-chrome-192x192.png |
PNG (192x192) | Standard mobile web app icon |
| Favicon Suite | favicon/apple-touch-icon.png |
PNG (180x180) | iOS home screen bookmark icon |
| Favicon Suite | favicon/favicon-32x32.png |
PNG (32x32) | Desktop browser tab icon |
| Favicon Suite | favicon/favicon-16x16.png |
PNG (16x16) | Small browser address bar icon |
| Favicon Suite | favicon/favicon.ico |
ICO Multi | Legacy browser compatibility icon |
| Typography | fonts/Inter/Inter[opsz,wght].ttf |
Variable TTF | Official body font (SIL Open Font License 1.1) |
| Typography | fonts/PlusJakartaSans/PlusJakartaSans[wght].ttf |
Variable TTF | Official display font (SIL Open Font License 1.1) |
License (CC BY-NC-ND 4.0)
Standard strict creative license governing all brand assets, logos, animations, and media in this repository.
Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International
The standard strict license for creative brand assets on the internet. You are free to share and display the assets for non-commercial community purposes provided you credit Listune Official, make no modifications or derivative works, and respect trademark integrity. Software licenses (such as MIT or GPL) applicable to code do not grant trademark rights.
You may not use the material for commercial purposes, merchandise, or paid packages without prior written consent.
If you remix, transform, or build upon the material, you may not distribute the modified material.
You must give appropriate credit to Listune Official and provide a link to the license.