Transistor — photographic podcast-hosting landing page

---
version: alpha
name: Transistor — photographic podcast-hosting landing page
colors:
  surface: '#0A141F'
  ink: '#FFFFFF'
  accent: '#FBC75D'
  primary: '#FFFFFF'
typography:
  primary:
    fontFamily: ui-sans-serif
    fontSize: 80px
    fontWeight: 500
    lineHeight: 80px
  body:
    fontFamily: ui-sans-serif
    fontSize: 24px
    fontWeight: 400
    lineHeight: 40px
  control:
    fontFamily: ui-sans-serif
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 0px
---

## Overview

A dark navy podcast-hosting landing page with a photographic opening, oversized white system typography, golden pill actions, alternating product demonstrations, a fading testimonial wall and white pricing cards.

Source: https://transistor.fm/. Captured 2026-10-08T06:04:12.774532+00:00. This is an observed reference, not an official brand specification.

## Colors

Observed palette roles: surface: #0A141F; ink: #FFFFFF; accent: #FBC75D; primary: #FFFFFF. These values come from computed source styles or inspected flat screenshot surfaces. Keep accent colors tied to their documented roles rather than tinting every text element.

## Typography

The primary sampled text uses ui-sans-serif at 80px / 80px, weight 500, with a desktop width of 1232.00px. The matching mobile sample uses 48px / 48px across 358.00px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Open with a full-bleed recording-studio photograph under a dark gradient. Align the oversized promise, distribution-platform row and paired trial/chat actions to a 1232px desktop content rail. Overlap the opening review panel with laptop and phone product artwork. Alternate product copy and diagrams through distribution, private podcasts, multiple shows, websites and analytics. Follow with a three-column testimonial wall, award, pricing, educational link, photographic CTA and multi-column footer.

Full desktop page at 1440px width, document height 9760px. Mobile evidence is a 390×844px opening viewport unless otherwise stated.

Responsive evidence: At 390px the primary heading falls from 80px to 48px, the navigation reduces to logo, sign-in, trial and menu controls, and the distribution marks wrap into two columns. The main trial action sits above the chat link. The background photograph crops to the speaker; product artwork intentionally overflows its proof panel. Only the opening mobile viewport was visually reviewed.

## Elevation & Depth

The photograph fades into deep navy. Product screenshots sit above the page with device frames and overlap; testimonial panels are only slightly lighter than the background. The lower testimonial rows fade deliberately into navy rather than indicating missing assets. Exact shadow blur, hover elevation and animation timing were not measured.

## Shapes

The sampled control has 0px corner radius and 0px padding. These values belong to that control, not every surface. Additional spacing or breakpoint values would be implementation estimates, not measurements from this capture.

## Components

Keep the gold trial action dominant and retain lower-contrast secondary links. The captured dashboard numbers and testimonials are source artwork/content, not measured product results. Automatic diagram states, menu expansion and hover behavior were not tested.

## Do's and Don'ts

- Do preserve the documented hierarchy, content order, and observed responsive changes.
- Do keep source labels and attribution with their associated controls, diagrams and quotations.
- Do treat prices, metrics and marketing claims as dated source content rather than verified outcomes.
- Don't invent interaction states, validation results, successful submissions or additional breakpoints.
- Don't copy low-contrast or undersized text blindly; improve readability when adapting the pattern.