---
version: alpha
name: Transistor — pale-blue email sign-in screen
colors:
  surface: '#E8EDF1'
  card: '#FFFFFF'
  accent: oklch(0.696 0.17 162.48)
  primary: oklch(0.372 0.044 257.287)
typography:
  primary:
    fontFamily: InterVariable
    fontSize: 24px
    fontWeight: 700
    lineHeight: 32px
  body:
    fontFamily: InterVariable
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  control:
    fontFamily: InterVariable
    fontSize: 16px
    fontWeight: 500
    lineHeight: 20px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 4px
---

## Overview

A compact white email/password sign-in card on a pale-blue dotted backdrop, with a green full-width action and understated recovery and registration links.

Source: https://dashboard.transistor.fm/signin. Captured 2026-10-08T06:04:22.173270+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.372 0.044 257.287). 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 24px / 32px, weight 700, with a desktop width of 512.00px. The matching mobile sample uses 20px / 28px across 390.00px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Keep a sparse logo and registration masthead. Center the heading and registration helper above a 512px-wide white card. Stack two large centered-placeholder fields, a full-width green sign-in button with a small lock mark, and the recovery link aligned left. Leave substantial breathing room below the card.

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

Responsive evidence: At 390px the heading decreases from 24px to 20px, while the white card spans the viewport and its inputs retain side gutters. The signup helper and top-right account link remain visible. Both fields and the sign-in button are visible together in the mobile opening.

## Elevation & Depth

A slight shadow separates the white form from its blue-gray canvas. Low-contrast dots grow more visible toward the bottom; input borders stay fine and neutral. Exact shadow blur, hover elevation and animation timing were not measured.

## Shapes

The sampled control has 4px corner radius and 10px 20px 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 observed fields are empty and the screen is logged out. Password recovery, validation errors, successful authentication and signup navigation beyond discovery 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.