Transistor — photographic free-trial CTA banner

---
version: alpha
name: Transistor — photographic free-trial CTA banner
colors:
  surface: '#0A141F'
  ink: '#FFFFFF'
  accent: '#FBC75D'
  primary: '#FFFFFF'
typography:
  primary:
    fontFamily: ui-sans-serif
    fontSize: 48px
    fontWeight: 600
    lineHeight: 48px
    letterSpacing: -1.2px
  body:
    fontFamily: ui-sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  control:
    fontFamily: ui-sans-serif
    fontSize: 20px
    fontWeight: 500
    lineHeight: 28px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 9999px
---

## Overview

An isolated rounded navy CTA banner with a low-opacity studio photograph, three-line white-and-gold invitation and a white pill action; its desktop row becomes a centered mobile stack.

Source: https://transistor.fm/. Captured 2026-10-08T06:07:49.432285+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 48px / 48px, weight 600, with a desktop width of 885.75px. The matching mobile sample uses 36px / 40px across 276.00px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Capture only the linked banner, not its surrounding footer. Use a 1232px-wide desktop surface with 40px padding and a 24px radius. The headline takes the flexible left column and the white action sits right, vertically centered. Color only the closing phrase gold.

Exact source selector: `section.site-container > a[href="https://dashboard.transistor.fm/signup"]`. The desktop screenshot contains only this element; its own mobile element was also captured.

Responsive evidence: The selected element measures 1232×226px on desktop and 358×318px at 390px viewport width. Its heading decreases from 48px/48px to 36px/40px; the layout changes from a left/right row into centered stacked text and button. The 264.25px-wide action fits inside the narrow banner.

## Elevation & Depth

The almost-black photographic texture sits behind a dark overlay and fine translucent border. White type and button provide the primary contrast; the yellow phrase creates a secondary emphasis without adding a second action. Exact shadow blur, hover elevation and animation timing were not measured.

## Shapes

The sampled control has 9999px corner radius and 12px 24px padding. These values belong to that control, not every surface. The selected desktop root has radius 24px and padding 40px. Additional spacing or breakpoint values would be implementation estimates, not measurements from this capture.

## Components

The source wraps the whole banner in a signup link. The visible button label is a sign-up affordance only; no trial was started. The capture is one static image state, and exact hover treatment or transition timing was not measured.

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