Transistor — dark three-tier podcast pricing page

---
version: alpha
name: Transistor — dark three-tier podcast pricing page
colors:
  surface: '#0A141F'
  ink: '#FFFFFF'
  accent: '#FBC75D'
  primary: '#FFFFFF'
typography:
  primary:
    fontFamily: ui-sans-serif
    fontSize: 60px
    fontWeight: 700
    lineHeight: 60px
  body:
    fontFamily: ui-sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  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 complete dark pricing page: gold billing switch, three white plan columns, a secondary add-on and enterprise row, customer quote, closed FAQs and editorial cards.

Source: https://transistor.fm/pricing/. Captured 2026-10-08T06:04:10.659348+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 60px / 60px, weight 700, with a desktop width of 799.84px. The matching mobile sample uses 36px / 40px across 358.00px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Center the pricing heading and introductory line above generous whitespace and a monthly/yearly pill switch. Place three equal white plan cards in one row, with prices and outlined trial controls near the top, checked feature lists, and gold purchase bars aligned near the bottoms. Keep add-ons and enterprise pricing in a darker secondary row. Continue into an attributed quote, a two-column FAQ region, three blog cards, CTA and footer.

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

Responsive evidence: At 390px the 60px heading becomes 36px and wraps to two lines; the compact site navigation and announcement remain above it. The first plan occupies a single narrow-screen column below the billing control. Lower-page mobile interactions and expanded FAQ answers were not inspected.

## Elevation & Depth

Bright white plan cards carry most of the contrast against navy. Rounded corners differentiate plans from the subtler enterprise and editorial surfaces. Divider lines, not heavy shadows, separate the FAQ rows. 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

The captured state uses monthly billing and closed FAQ rows. The price labels, feature limits and quote are dated source content. Yearly recalculation, FAQ expansion, purchase actions and account creation were not exercised.

## 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.