Transistor — plan-aware sign-up screen

---
version: alpha
name: Transistor — plan-aware sign-up screen
colors:
  surface: '#E8EDF1'
  card: '#FFFFFF'
  accent: oklch(0.696 0.17 162.48)
  primary: oklch(0.373 0.034 259.733)
typography:
  primary:
    fontFamily: InterVariable
    fontSize: 30px
    fontWeight: 700
    lineHeight: 37.5px
  body:
    fontFamily: InterVariable
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  control:
    fontFamily: InterVariable
    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 pale-blue sign-up screen pairing selectable subscription-plan cards with account and payment fields, a green account-creation action and restrained trial reassurance.

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

## Colors

Observed palette roles: surface: #E8EDF1; card: #FFFFFF; accent: oklch(0.696 0.17 162.48); primary: oklch(0.373 0.034 259.733). 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 InterVariable at 30px / 37.5px, weight 700, with a desktop width of 952.00px. The matching mobile sample uses 20px / 25px across 342.00px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Use a compact logo/sign-in masthead, centered heading and broad white registration surface. Within the surface, put billing tabs and vertically stacked plan choices on the left; align name, email, password, card input, account action and policy copy in a right column. The selected Starter plan has a blue outline while unselected plans are muted. A dotted background and small climate-contribution note sit outside the card.

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

Responsive evidence: The heading changes from 30px to 20px at 390px. The wide white card becomes a full-width surface, with plan choices stacked first and their price and feature columns reflowed vertically. The mobile opening shows the Starter and part of Professional; the lower account/payment area is not asserted to be fully mobile-reviewed.

## Elevation & Depth

The white surface and plan rectangles use small soft shadows on a pale blue-gray field. Blue selection strokes and a green primary action distinguish state without adding a dark marketing background. 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

This is the untouched logged-out registration state with a visible payment input. No plan toggle, card entry, terms acceptance, account submission or trial activation was performed. The payment field belongs to the source registration flow, not a separate identity-provider design.

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