Sound of Synergy

Overview

Sound of Synergy (SOS.HUB) is a unified digital ecosystem for events, live sessions, rental, recording, learning, talent discovery, and independent music releases. The brand embodies 'Aggressive Minimalism'—a design philosophy that strips away ornament to expose raw intensity, using a stark black canvas (#000000) punctuated by a vivid signal red (#e50102) that commands attention like a beacon cutting through darkness. The aesthetic evokes the energy of underground music culture: urgent, uncompromising, and unapologetically bold. Every interface element is designed to feel like a live performance—immediate, high-contrast, and impossible to ignore.

The voice is direct and energetic without being breathless. SOS.HUB speaks to artists, producers, and culture-makers as peers: confident, informed, and action-oriented. Sentences are short and punchy, vocabulary is contemporary and precise (never flowery), and the tone respects the audience's time and intelligence. Example: 'Seven paths. One shared sound.' The brand personality is collaborative yet authoritative—it convenes communities but never apologizes for its aesthetic conviction.

Colors

The color system is built on a binary contrast model: pure black (#000000) as the dominant surface, with off-white (#ececec) as the primary text and interface color, and signal red (#e50102) as the singular accent that drives all interactive moments. Primary (#e50102) is reserved exclusively for call-to-action buttons, active states, eyebrow labels, and brand-critical highlights—it appears sparingly but unmistakably, forcing the eye to focus on what matters. Secondary (#ececec) serves as the default text and border color, creating a high-contrast reading experience optimized for legibility and visual clarity. Tertiary (#6c757d) is used for metadata, disabled states, and secondary copy that requires visual de-emphasis.

The surface stack is minimal: surface (#000000) is the base, surface-co

Typography

The type system is anchored by a custom brand font (brandFont, with Arial/Helvetica fallback) used exclusively for headings and eyebrows, paired with system sans-serif (Arial, Helvetica) for body copy. All headings are set in uppercase with a consistent letter-spacing of 0.015em and a tight line-height (0.94 unitless), creating a compressed, urgent visual rhythm that mirrors the brand's intensity. Display (75px, 400 weight) is reserved for hero headlines; headline-lg (54px) for major section breaks; headline-md (40px) for subsection titles; and title-lg (28px) for card headings. Body copy uses 16px (body-md) or 18px (body-lg) with a 1.5 line-height for comfortable reading over the black background. Labels are consistently 12px, 700 weight, with 0.1em letter-spacing and uppercase transforma

Layout

The page grid is fluid-to-fixed, using a 12-column layout with a max-width of 1520px (min(100%, 1520px)) centered on the viewport. Sections use a consistent padding rhythm: 3rem (48px) top and bottom for major sections, with 2rem (32px) gaps between content blocks. The gutter is 24px, applied as horizontal padding on the container and as gap spacing in grid layouts. White-space is aggressive and intentional—large breathing room between sections (lg spacing: 40px) emphasizes the modular nature of the ecosystem, while tight spacing within cards (sm spacing: 12px) creates visual density that draws focus. Hero section spans full viewport height minus header (calc(100svh - 76px)) with a 2.75rem top padding, establishing an immersive entry point. Section shells use padding: 3.75rem 1rem on mobil

Elevation & Depth

Depth is conveyed through stark contrast and shadow rather than blur or transparency. The elevation system uses three levels: Level 1 (Base) is the black surface (#000000) with no shadow; Level 2 (Standard Cards/Overlays) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border at rgba(236, 236, 236, 0.2); Level 3 (Modals/Elevated Content) uses box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) with the same border treatment. Hover states on cards elevate them to Level 2 or Level 3 by shifting the shadow and background color (e.g., from surface to surface-container-high). The hero section u

Shapes

The shape philosophy is 'Structural Minimalism'—sharp corners dominate, with rounded corners reserved for specific, functional moments. Buttons and inputs use rounded: sm (0.25rem / 4px), a barely-perceptible curve that softens the edge without compromising the angular aesthetic. Cards and containers use rounded: DEFAULT (0.5rem / 8px) or md (0.75rem / 12px) for slightly more breathing room. Circular elements (decorative orbits, badges, full-width media) use rounded: full (9999px). The rationale: sharp corners reinforce the brand's structural confidence and technical precision, while minimal r

Components

Action Elements Buttons are the primary interactive primitive. button-primary uses background: #e50102, text-color: #ececec, padding: 12px 20px, height: 48px, with a 1px border matching the background. On hover, the background shifts to primary-fixed-dim (#cc0000) and the button translates up 2px (transform: translateY(-2px)). button-secondary is transparent with a 1px border in #ececec, text in #ececec, and the same hover lift. button-dark mirrors button-secondary but with a black background and border. All buttons use transition: background-color 0.18s, color 0.18s, transform 0.18s for a snappy response. Text links (text-link) are inline elements with a 1px bottom border in #e50102, using label-md typography, and shift to primary-fixed-dim on hover.

Containers & Surfaces Cards (

Do's and Don'ts

**Do**

• Do use the red accent (#e50102) exclusively for interactive moments—CTAs, active states, eyebrows, and brand-critical highlights—to maintain its signal strength and prevent visual fatigue.
• Do maintain the black-white-red hierarchy rigorously; avoid introducing secondary colors or gradients that would dilute the stark contrast and brand clarity.
• Do apply uppercase transformation to all headings and labels; it reinforces the brand's structural confidence and creates visual rhythm through repetition.
• Do use the tight line-height (0.94) on headings combined with letter-spacing: 0.015em to create a compressed, architectural appearance that mirrors the brand's intensity.
• Do apply the 0.18s transition timing consistently across all interactive elements (buttons, links, cards) to create a snappy, responsive feel that matches the brand's energy.

**Don't**

• Don't soften the black background with grays or near-blacks; pure #000000 is non-negotiable and creates the visual foundation for the red accent to dominate.
• Don't use the red accent for body copy, backgrounds, or non-interactive elements; reserve it exclusively for moments that demand user action or brand emphasis.
• Don't apply rounded corners to buttons or inputs beyond 4px (rounded: sm); the sharp edges reinforce the brand's structural precision and prevent the interface from feeling soft or approachable.
• Don't introduce blur, transparency, or glassmorphism effects; the brand's aesthetic is built on stark contrast and shadow, not atmospheric effects.
• Don't mix typefaces; use the brand font (brandFont) exclusively for headings/eyebrows and Arial/Helvetica for body copy—no serif fonts, no decorative typefaces, no system-ui fallbacks.