P Tune Studio

Overview

P Tune Studio embodies a "Tech-Forward Vibrancy" aesthetic—a design language that merges the precision of modern SaaS platforms with the energy of music industry culture. The brand serves independent artists and labels across South Asia, transforming complex music distribution into an intuitive, visually compelling experience. The UI leverages a deep navy-to-black canvas (#0a0e1c) punctuated by electric blue accents (#3b82f6) and secondary purples (#7c5cff), creating a sense of digital sophistication and creative possibility. The emotional response is one of empowerment: users feel they are accessing professional-grade tools previously reserved for major labels.

The voice is direct, confident, and action-oriented—never patronizing, always respectful of the artist's ambition. Vocabulary leans into music industry terminology ("distribution," "publishing," "streaming ecosystem") while remaining accessible to first-time users. The brand personality is a blend of technical competence and creative enthusiasm. Example sentence in brand voice: "Get your track on Spotify, Apple Music, and 150+ platforms in under 24 hours—no middleman, no compromise."

Colors

The color system is built on a high-contrast dark foundation with strategic accent deployment. Primary (#3b82f6, a vivid electric blue) is reserved exclusively for call-to-action buttons, active navigation states, and interactive focus rings. This color appears on the hero "APPLY NOW" button and the top-right "CLIENT LOGIN" CTA, signaling the two primary user journeys. Secondary (#7c5cff, a deep purple) supports brand identity and appears in accent graphics and secondary UI elements, providing visual rhythm without competing with primary. Tertiary (#ff6900, luminous orange) and accent reds (#cc3366, #cf2e2e) are used sparingly for status indicators, error states, and highlight badges.

The surface stack is engineered for dark-mode legibility and depth perception. Surface (#0a0e1c) is the b

Typography

The type system pairs Poppins (display, headlines) with Roboto (body, labels), creating a distinctive contrast between expressive and utilitarian voices. Poppins at 64px / 700 weight / -0.04em letter-spacing commands the hero section ("Distribute Your Music Worldwide"), while Roboto at 16px / 400 weight provides readable body copy at 24px line-height. Headlines use negative letter-spacing (-0.02em to -0.04em) to create visual density and forward momentum, reflecting the urgency of music distribution. Labels and CTAs employ Roboto at 14px / 600 weight with 0.01em letter-spacing for clarity and emphasis. When displaying small labels over busy backgrounds (e.g., platform badges in the hero graphic), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to ensure legibility. The 28px headline-md siz

Layout

The page uses a fluid 12-column grid with a 1140px max-width container, maintaining responsive flexibility on mobile while ensuring desktop readability. The hero section spans full-width with 40px (lg spacing) vertical padding on desktop, collapsing to 24px (md spacing) on tablet. Content sections employ 24px (md spacing) for horizontal gutters and 40px (lg spacing) for vertical section separation—this rhythm creates breathing room and guides the eye through the distribution narrative. The grid-gap is consistently 24px, enforced via CSS custom properties (--wp--style--block-gap: 24px). Cards and feature blocks use 24px internal padding (md spacing) with 12px (sm spacing) between nested elements. The container-max-width of 1140px ensures that even on ultra-wide displays, text remains scanna

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle color shifts rather than aggressive drop shadows. Level 1 (Base): the surface (#0a0e1c) has no shadow; it is the ground plane. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) combined with a 1px solid border at rgba(255, 255, 255, 0.08) creates a subtle lift. This shadow is applied to cards, input fields, and standard modals. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) with a 1px border at rgba(255, 255, 255, 0.12) signals interactive elevation and hover states. Interactive elements lik

Shapes

The shape philosophy is "Approachable Precision"—rounded corners are used strategically to soften technical interfaces while maintaining clarity. Buttons use full-radius (border-radius: 9999px / {rounded.full}) to signal primary actions and create a pill-shaped affordance that feels inviting and modern. Cards and containers use lg (1rem / 16px) for standard components, creating a gentle curve that avoids the sterility of sharp corners while remaining professional. Input fields use DEFAULT (0.5rem / 8px) for a subtle, understated appearance that doesn't distract from content. The logo and platf

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses {colors.primary} (#3b82f6) with full-radius, 12px vertical / 32px horizontal padding, and a 48px height for touch-friendly targets. The hover state darkens to #1e40af and increases shadow to 0 6px 16px rgba(59, 130, 246, 0.4), creating a tactile sense of depression. Active state further darkens to #1e3a8a with reduced shadow (0 2px 4px) to indicate the button is being pressed. Secondary buttons (button-secondary) use a transparent background with a 2px border at {colors.primary}, maintaining the same dimensions and radius. Ghost buttons (button-ghost) use rgba(255, 255, 255, 0.06) background with a 1px border at rgba(255, 255, 255, 0.12), ideal for tertiary actions and navigation lin

Do's and Don'ts

**Do**

• Do use {colors.primary} (#3b82f6) exclusively for primary CTAs and active states—it is the brand's signature accent and must remain visually distinct.
• Do apply full-radius (9999px) to all primary buttons and major interactive elements to signal affordance and maintain visual consistency.
• Do maintain the 24px (md spacing) gutter between content sections and 12px (sm spacing) between nested elements to preserve the breathing room that defines the layout rhythm.
• Do use Poppins for headlines and Roboto for body text—this pairing creates a distinctive visual hierarchy and reinforces the brand's tech-forward personality.
• Do apply the three-tier shadow system (sm: 0 3px 8px, md: 0 8px 24px) consistently across cards and elevated components to create depth without visual noise.
• Do include a 1px border at rgba(255, 255, 255, 0.08) to 0.12 on all cards and containers in the dark theme to define edges and improve legibility.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary surface colors—stick to the defined surface stack (#0a0e1c to #2a3450) to maintain visual cohesion and reduce eye strain.
• Don't apply secondary (#7c5cff) or tertiary (#ff6900) colors to primary CTAs—these are supporting accents and must not compete with the primary blue for user attention.
• Don't hardcode hex values inside component blocks—always reference {colors.x}, {typography.x}, {spacing.x}, and {rounded.x} tokens to ensure consistency and enable future theme updates.
• Don't use sharp corners (border-radius: 0) on buttons or interactive elements—the brand uses full-radius or lg-radius to signal approachability and modernity.
• Don't exceed 40px (lg spacing) for section separation or 24px (md spacing) for gutters without explicit design justification—the spacing scale is calibrated for the 1140px container.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.25) on standard components—excessive shadows create visual clutter and undermine the clean, technical aesthetic.