Sore — Official Brand Book & Asset Guidelines

Philosophy & Identity

Acoustic Harmony at Dusk

The name "Sore" (Indonesian for twilight / late afternoon / golden hour) evokes the relaxing ambiance of listening to your favorite songs as day turns into night — unwinding with pure, warm audio clarity.

Acoustic Warmth

Warm coral rose and sunset amber tones radiate a cozy, intimate, and relaxing listening atmosphere for communities.

Modern & Minimalist

Clean design with ample breathing room. Distraction-free interface built for both desktop displays and mobile screens.

Studio-Grade Fidelity

Studio precision and lossless audio performance mirrored in pixel-perfect assets scaling up to 4K and vector formats.

Community Centered

Crafted to empower Discord servers and music communities with cohesive banners, ticket channels, and playback embeds.

Logo Guidelines

Logo Mark & Construction

The official Sore emblem embodies acoustic waveforms and the serene solar disc at dusk. Ensure all implementations strictly adhere to clear space rules and background contrast.

Clear Space = 0.5X

Master Logo with Sunset Aura Halo & Soundmark

Construction Specifications

The Sore monogram is engineered with geometric precision and subtle curve transitions.

Clear Space: Maintain a minimum clear space of 0.5X around the perimeter of the mark.
Minimum Digital Size: 24×24 px for UI icons, 48×48 px for bot avatars.
Background Pairing: Always place on dark carbon/obsidian (#090A0D) or high-contrast backgrounds.

Download SVG Vector Download 4K PNG (4096px)

Do's & Don'ts (Usage Standards)

✓ DO

Use Official Variants
Always render official vector or high-resolution PNG marks on dark or transparent backgrounds.

✗ DON'T

Do Not Recolor to Blue or Purple
The official Sore identity is Sunset Rose & Carbon. Never tint or recolor to blue, purple, or indigo.

✗ DON'T

Do Not Stretch or Distort
Always preserve the 1:1 square aspect ratio. Never skew, squash, or deform the logo.

✗ DON'T

Do Not Rotate or Tilt
Keep the mark horizontally aligned. Never tilt, slant, or rotate the orientation.

Color System

Color Palette & Semantic Tokens

The Sore color system revolves around warm sunset rose (#F05789) and dusk amber paired with deep obsidian carbon. Strictly free from blue or purple tones, delivering an exclusive, eye-friendly, and soothing visual identity.

Click to Copy HEX

Sore Sunset Rose

--sore-rose

#F05789 Primary Accent

rgb(240, 87, 137) • hsl(340, 83%, 64%)

Click to Copy HEX

Dusk Amber

--sore-amber

#E58B43 Warm Atmosphere

rgb(229, 139, 67) • hsl(27, 77%, 58%)

Click to Copy HEX

Obsidian Canvas

--bg-base

#090A0D App Background

rgb(9, 10, 13) • Base dark canvas

Click to Copy HEX

Carbon Surface

--bg-card

#16191E Cards & Containers

rgb(22, 25, 30) • Component background

Click to Copy HEX

Elevated Slate

--bg-elevated

#22262F Modals & Popovers

rgb(34, 38, 47) • Floating dialogs

Click to Copy HEX

Pure Light

--text-main

#FFFFFF Primary Text / Heading

rgb(255, 255, 255) • Maximum contrast

Click to Copy HEX

Muted Silver

--text-muted

#9CA3AF Secondary Text

rgb(156, 163, 175) • Body description

Click to Copy HEX

Emerald Playing

--status-playing

#10B981 Online / Active Voice

rgb(16, 185, 129) • Streaming indicator

Typography

Type Hierarchy & Font Pairing

Sore typography pairs Plus Jakarta Sans for sharp, modern user interface legibility with JetBrains Mono for music metadata, track timecodes, and technical tokens.

Display Heading 48px / Bold (800)

Studio-Grade Acoustic Music at Twilight.

Heading 1 32px / Bold (700)

Sore Music Bot & Audio Player Interface

Heading 2 24px / SemiBold (600)

Warm Melodies & Crystal-Clear Sound Delivery

Body Text 16px / Regular (400)

Sore delivers gapless, lossless audio streaming to your Discord community. Featuring interactive controls, modular now-playing cards, and effortless queue management.

Monospace Code 13px / JetBrains Mono

sore.play("Lofi Sunset Sessions - 24/7 High-Bitrate FLAC") [03:42 / 24-bit 96kHz]

Live Interactive Type Tester

Font Size: 24px

Asset Repository

Complete Asset Catalog (43 Files)

All official production assets across brand, logo, banner, bg, favicon, and motion directories are indexed below (the discord and other folders are excluded).

Showing 43 of 43 assets

Preview	Asset Name & Path	Category	Resolution	Format	File Size	Actions

Motion Studio

Motion & Video Transparency Lab

Sore provides high-definition motion graphics in transparent WebM (Alpha Channel), Green Screen Chroma Key for video creators, and looping animated GIFs for stickers and headers.

Test Background Transparency

Toggle stage backgrounds to inspect alpha channel fidelity on transparent videos:

Alpha WebM 4.02 MB

sore_transparent.webm

WebM video with native alpha channel transparency. Engineered for modern web browsers, OBS stream overlays, and motion cards.

Download

Chroma Key 1.61 MB

sore-green-screen.mp4

Standard chroma key green screen footage for video editors (Premiere Pro, DaVinci Resolve, CapCut, After Effects) for easy compositing.

Download

Real-World Context

Interface & Ecosystem Showcase

Interactive examples of Sore brand assets deployed across Discord music playback cards, web dashboard headers, and community announcement embeds.

Sunset Chill Beats (24-bit FLAC) Now Playing via Sore Music • Lounge Room

02:45 / 04:12

Voice & Tone

Brand Voice & Writing Guidelines

Sore's communication principles are crafted to be warm, soothing, responsive, and completely free from technical clutter.

Tone 01

Warm & Soothing

Communicate with welcoming warmth like coffee at golden hour. Avoid cold or robotic error codes; always suggest an immediate solution if track playback fails.

Tone 02

Crisp & Responsive

Acknowledge commands promptly and concisely. Display song titles, artists, and playback timers clearly without cluttered chat spam.

Tone 03

Respectful & Inclusive

Celebrate all music genres and communities without bias. Maintain uniform button layouts and command syntax so new listeners and server admins feel right at home.

Export & Dev Tokens

CSS Variables & Tokens Snippet

Integrate official Sore CSS variables into web dashboards, bot embed themes, or custom frontends to ensure brand fidelity.

CSS Variables (Sore Theme Tokens)

/* Sore Brand Official Tokens — No Blue / No Purple */
:root {
  --sore-rose: #F05789;        /* Primary Sunset Rose */
  --sore-rose-hover: #FF6E9D;  /* Hover State */
  --sore-amber: #E58B43;       /* Dusk Atmosphere */
  --sore-gold: #F59E0B;        /* High-fidelity Accent */

  --sore-bg-base: #090A0D;     /* Main Canvas */
  --sore-bg-surface: #111317;  /* Sidebar & Surface */
  --sore-bg-card: #16191E;     /* Cards & Modules */
  --sore-bg-elevated: #22262F; /* Floating Dialogs */

  --sore-border: rgba(255, 255, 255, 0.08);
  --sore-border-active: #F05789;

  --sore-text-primary: #FFFFFF;
  --sore-text-muted: #9CA3AF;
  --sore-text-dim: #6B7280;

  --sore-status-live: #10B981;
}

Acoustic Harmony at Dusk

Acoustic Warmth

Modern & Minimalist

Studio-Grade Fidelity

Community Centered

Logo Mark & Construction

Construction Specifications

Do's & Don'ts (Usage Standards)

Color Palette & Semantic Tokens

Type Hierarchy & Font Pairing

Complete Asset Catalog (43 Files)

Motion & Video Transparency Lab

Test Background Transparency

sore_transparent.webm

sore-green-screen.mp4

Interface & Ecosystem Showcase

Brand Voice & Writing Guidelines

Warm & Soothing

Crisp & Responsive

Respectful & Inclusive

CSS Variables & Tokens Snippet

Asset Title