AUDIOPOOL

Overview

AUDIOPOOL is a fan-powered music discovery platform that transforms how users engage with music through a reward-based sharing model. The design system embodies 'Energetic Minimalism'—a philosophy that pairs a dark, focused canvas (rgb(24, 24, 27) background) with a vibrant cyan accent (rgb(14, 165, 233)) to create a sense of forward momentum and social energy. The interface prioritizes clarity and action: every interaction is designed to feel responsive, rewarding, and frictionless. The brand personality is enthusiastic yet grounded, speaking directly to music fans with language that celebrates discovery and community. Voice example: 'Boost your favorite track and earn rewards—every share counts.'

Colors

The color system is built on a dark-first foundation with strategic accent deployment. Primary (rgb(14, 165, 233) / #0ea5e9) is the signature cyan used exclusively for call-to-action buttons, active states, and focus indicators—it appears on 'Sign Up', 'Boost', and all interactive affordances. This high-contrast accent against the near-black surface (rgb(24, 24, 27)) ensures immediate visual hierarchy and accessibility (WCAG AA+). Secondary (rgb(48, 166, 123) / #30a67b) is reserved for success states and positive feedback, appearing in charts and achievement badges. Tertiary (rgb(245, 159, 0) / #f59f00) signals alerts and sponsored content, creating visual distinction without competing with primary actions. The surface stack progresses from rgb(10, 10, 13) (surface-container-lowest, used f

Typography

The type system uses Inter as the primary typeface, chosen for its geometric clarity and excellent readability at small sizes on dark backgrounds. Display (56px, 700 weight, -0.03em tracking) anchors hero sections and major announcements; Headline-lg (36px, 700 weight) titles key sections like 'The AUDIOPOOL Chart'; Headline-md (28px, 600 weight) breaks content into digestible chunks. Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) carry descriptive copy with 0.01em letter-spacing to prevent cramping on dark surfaces. Label-md (14px, 600 weight, 0.02em tracking) is used for button text and UI labels, ensuring legibility at smaller scales. All headlines use negative letter-spacing (-0.01em to -0.03em) to create visual compression and energy; body text uses positive or neutral spac

Layout

The layout operates on a 12-column grid with a max-width of 1280px, maintaining consistent horizontal rhythm across desktop, tablet, and mobile viewports. The header spans full-width with 24px gutter padding on each side, creating breathing room around the logo and navigation. The hero section uses a 2-column split: left column (60%) holds the headline and CTA buttons with 40px (lg spacing) vertical separation; right column (40%) is reserved for imagery or gradient backgrounds. Content sections use 24px (md spacing) for vertical separation between major blocks and 12px (sm spacing) for related elements within a block. Cards and list items use 24px padding internally, with 12px gaps between items in a list. The container max-width of 1280px ensures readability on ultra-wide displays while m

Elevation & Depth

Depth is conveyed through a subtle shadow and layering system rather than bright highlights. Level 1 (Base): the surface at rgb(24, 24, 27) with no shadow, establishing the foundation. Level 2 (Standard Cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) applied to cards, modals, and input fields, creating a gentle lift. Level 3 (Elevated/Hover States): box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) on hover or active cards, signaling interactivity. Primary buttons use a color-tinted shadow (0 4px 12px rgba(14, 165, 233, 0.3)) to reinforce brand presence and draw attention. The overlay for modals u

Shapes

The shape philosophy is 'Soft-Technical'—combining rounded corners with precision to balance approachability and modernity. Buttons use border-radius: 9999px (full roundness) to create pill-shaped affordances that feel friendly and clickable, differentiating them from rectangular containers. Cards and modals use border-radius: 1rem (16px) for a softer, more organic feel that softens the grid-based layout. Input fields use border-radius: 0.5rem (8px) for a subtle roundness that signals interactivity without overwhelming. Badges and small UI elements use border-radius: 9999px to maintain visual

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses background: rgb(14, 165, 233), padding: 12px 24px, height: 44px, border-radius: 9999px, and box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3). On hover, the background shifts to rgb(2, 132, 199) with an enhanced shadow (0 6px 16px rgba(14, 165, 233, 0.4)), creating a sense of lift and responsiveness. The transition timing is 150ms ease-out. Secondary buttons (button-secondary) use a transparent background with a 1px border in outline color, allowing them to recede visually while remaining accessible. Ghost buttons (button-ghost) have no background or border, relying on text color and hover state (background: surface-container-high) for feedback.

Containers & Surfaces Cards (card) u

Do's and Don'ts

**Do**

• Do use the primary cyan (rgb(14, 165, 233)) exclusively for CTAs, active states, and focus indicators—it's the brand's signature and should never be diluted.
• Do maintain at least 24px padding inside cards and modals to prevent visual cramping and improve scannability.
• Do apply the full-round border-radius (9999px) to all buttons to create immediate visual affordance and differentiate them from containers.
• Do use the surface-container hierarchy (lowest/low/DEFAULT/high/highest) to create clear depth without relying on bright highlights.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels overlaid on gradients or images to ensure WCAG AA contrast.

**Don't**

• Don't use the primary cyan for body text, backgrounds, or non-interactive elements—reserve it for actions and focus states only.
• Don't apply box-shadow values larger than 0 16px 40px rgba(0, 0, 0, 0.25) to avoid creating a 'floating' effect that breaks the dark, grounded aesthetic.
• Don't mix border-radius values within a single component family (e.g., don't use 0.75rem on some buttons and 9999px on others).
• Don't use near-white text (rgb(250, 250, 250)) on primary cyan backgrounds—always use white (rgb(255, 255, 255)) for maximum contrast and legibility.
• Don't add transparency or opacity to the primary cyan accent—it should always render at full saturation to maintain visual impact and brand recognition.