Podbee

Overview

Podbee is a premium Turkish podcast platform that curates diverse audio content—from art and sports to news, comedy, and documentaries—for listeners who demand quality storytelling. The design system embodies 'Energetic Minimalism,' balancing a sophisticated near-black canvas (rgb(7, 7, 7)) with a vibrant amber accent (rgb(234, 179, 8)) that commands attention on CTAs and key interactive moments. The aesthetic evokes a modern listening lounge: intimate, focused, and unapologetically bold. The UI prioritizes clarity and discovery, using layered dark surfaces (rgba(24, 24, 27, 0.45) for standard cards, rgba(45, 45, 53, 0.6) for elevated states) to create visual rhythm without sacrificing legibility. Voice: conversational, culturally attuned, and direct. Podbee speaks to listeners as peers, not audiences—example: 'Yılmaz Sisters ile Aplalar'da her şeyi konuşuyoruz: yaşadığımız, hissettiğimiz, gülüştüğümüz.' (We talk about everything with the Yılmaz Sisters: what we live, feel, and laugh about.)

Colors

The color system is anchored by a near-black surface palette (surface: #070707, surface-container: #181823, surface-container-highest: #3f3f46) that provides a premium, focused listening environment. Primary accent is amber (primary: #eab308, rgb(234, 179, 8)), used exclusively on call-to-action buttons, active states, and brand-critical interactions—this warm, energetic tone cuts through the dark canvas and signals actionability. Secondary blue (secondary: #3f83f8) and tertiary cyan (tertiary: #38bdf8) support secondary actions, links, and data visualization, creating a cool counterpoint to the warm primary. All interactive surfaces use semi-transparent overlays: standard cards at rgba(24, 24, 27, 0.45) with a 1px border at rgba(107, 114, 128, 0.2), elevated cards at rgba(45, 45, 53, 0.6)

Typography

The type system uses Satoshi as the primary typeface (with ui-sans-serif and system-ui fallbacks), a humanist sans-serif that balances warmth with technical precision—ideal for a platform that bridges cultural storytelling and modern tech. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and podcast titles with commanding presence; headline-lg (40px, 600 weight) frames major content zones; headline-md (28px, 600 weight) introduces sections and episode series. Body text (16px, 400 weight, 24px line-height) maintains legibility over dark backgrounds; body-lg (18px, 400 weight, 28px line-height) is reserved for featured descriptions. Labels (14px, 500 weight, 0.01em tracking for label-md; 12px, 500 weight, 0.02em tracking for label-sm) are used on buttons, badges, and metada

Layout

Podbee uses a 12-column fluid grid with a 1280px container max-width, maintaining responsive flexibility on mobile (grid collapses to 4 columns below 768px). The page rhythm is built on an 8px unit system: gutter spacing is 24px (md), section separation uses lg spacing (40px), and internal card padding is md (24px). The hero banner occupies full viewport width with a 96px edge fade on desktop (--video-banner-edge-fade: 96px) to create a cinematic effect; navigation and CTAs float above with 24px horizontal padding. Podcast cards are arranged in horizontal scrollers (Swiper-based) with 12px gaps between items, each card measuring 240px × 320px on desktop. White-space is generous but purposeful: 40px vertical separation between major sections prevents visual fatigue, while 12px gaps between

Elevation & Depth

Depth is conveyed through layered opacity and subtle glowing animations rather than traditional shadows. Level 1 (Base): the surface at rgb(7, 7, 7) with no shadow. Level 2 (Standard Card): rgba(24, 24, 27, 0.45) background with a 1px border at rgba(107, 114, 128, 0.2), creating a frosted-glass effect; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06). Level 3 (Elevated/Modals): rgba(45, 45, 53, 0.6) background with a 1px border at rgba(107, 114, 128, 0.3) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). Featured content (e.g., trending shows, app download CTA) uses animated glow pulses: inset 0 0 0 1p

Shapes

The shape philosophy is 'Soft-Technical Precision': rounded corners are used strategically to soften the dark, austere canvas without sacrificing modern clarity. Buttons use lg radius (1rem / 16px), creating a friendly, inviting tap target while maintaining professional proportions. Cards use xl radius (1.5rem / 24px) for a softer, more premium feel—this generous rounding pairs with the semi-transparent backgrounds to suggest depth and approachability. Input fields and smaller interactive elements use DEFAULT radius (0.5rem / 8px) for subtle definition. Badges and pills use full radius (9999px

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses amber background (rgb(234, 179, 8)), black text (rgb(0, 0, 0)), lg radius (16px), and 44px height with 0 20px padding—this generous sizing ensures mobile-friendly tap targets. On hover, the background shifts to primary-fixed-dim (rgb(245, 158, 11)) over 180ms ease, maintaining contrast and visual feedback. The secondary button (button-secondary) uses a semi-transparent dark surface (rgba(24, 24, 27, 0.45)) with a 1px border at rgba(107, 114, 128, 0.3), white text, and the same dimensions; on hover, the background deepens to rgba(24, 24, 27, 0.65) with a 180ms transition. Both button variants use label-md typography (14px, 500 weight) for consistency.

Containers & Surfaces Cards fo

Do's and Don'ts

**Do**

• Do use the amber primary (rgb(234, 179, 8)) exclusively on CTAs, active states, and brand-critical moments—it's the signal for 'tap here' and must never be diluted or overused.
• Do layer semi-transparent surfaces (rgba(24, 24, 27, 0.45) for standard, rgba(45, 45, 53, 0.6) for elevated) with 1px borders to create visual depth without heavy shadows.
• Do apply 180ms ease transitions on all interactive state changes (hover, focus, active) to create responsive, polished feedback.
• Do use the glow-pulse animations (3.3s cubic-bezier(0.16, 1, 0.3, 1)) sparingly on featured content to draw attention without overwhelming the interface.
• Do maintain 44px minimum height on all touch targets (buttons, list items) to ensure mobile accessibility and comfortable interaction.

**Don't**

• Don't use the primary amber on non-interactive elements, backgrounds, or text—it must remain reserved for actions and focus states to preserve its signal strength.
• Don't apply heavy drop shadows (box-shadow: 0 20px 60px) on dark surfaces; use the subtle elevation scale (0 1px 2px to 0 4px 12px) and border definition instead.
• Don't mix typefaces; Satoshi is the system font—avoid Inter, Agrandir, or other display fonts in component-level UI, reserving them only for hero/brand moments.
• Don't use pure white (#ffffff) text on the primary amber background; always use on-primary (rgb(0, 0, 0)) for sufficient contrast and readability.
• Don't animate opacity alone on hover states; always pair with background-color or transform transitions to create clear, intentional feedback.