Tuple — step-one sign-up screen

---
version: alpha
name: Tuple — step-one sign-up screen
colors:
  primary: '#6A5ED9'
  ink: '#1F2937'
  surface: '#FFFFFF'
  input: '#F3F4F6'
  disabled: '#A69BFA'
typography:
  heading:
    fontFamily: Inter Variable
    fontSize: 30px
    fontWeight: 600
    lineHeight: 36px
  body:
    fontFamily: Inter Variable
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  control:
    fontFamily: Inter Variable
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
rounded:
  control: 8px
spacing:
  control-block: 16px
components:
  heading:
    typography: '{typography.heading}'
    textColor: '{colors.ink}'
  control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
---

## Overview

A centered registration card with a four-step progress indicator, Google and Microsoft options, an email-first path and subdued violet continuation action.

Source: https://production.tuple.app/signups/new. Captured 2026-10-06T06:03:01.510154+00:00. This guide describes the observed reference, not an official brand specification.

## Colors

Observed palette: primary: #6A5ED9; ink: #1F2937; surface: #FFFFFF; input: #F3F4F6; disabled: #A69BFA. Values come from source computed styles and inspected native-raster surface samples. Disabled controls are recorded as painted colors where opacity changes their base accent. Preserve the color roles shown in this individual reference.

## Typography

Measured in a 1440px desktop viewport and a 390px mobile viewport at device scale 1. The chosen desktop primary text sample is 30px / 36px, weight 600, using "Inter Variable"; its measured width is 448.00px. The corresponding mobile sample is 30px / 36px, width 278.00px. Computed styles may describe a parent while a child paints a colored word.

Maintain the observed heading/body hierarchy. Do not replace the source typeface with a system font without checking wrapping and control widths.

## Layout

Keep the small brand at the upper left of the page and place the sign-up eyebrow over a centered raised card. Inside, order the stepper, title, free-start reassurance, provider actions, divider, email field, continuation action and legal links.

Responsive evidence: The provider controls measure 384px wide at desktop and 278px at 390px; the card becomes a near-full-width column. The title wraps to two lines and the legal sentence wraps naturally. Later steps were not entered.

## Elevation & Depth

A broad soft shadow lifts the white form card. Provider buttons have thin outlines, subtle shadows and 8px corners; the email field uses a pale gray fill with violet focus treatment.

No hover, transition timing or shadow blur values were measured. Any additional elevation values would be implementation estimates, not captured tokens.

## Shapes

A measured visible control uses a 8px radius and padding 16px 24px. Match that control's role rather than applying the same radius to every container.

## Components

Show the first step active and steps two through four muted. Retain both provider options and the email alternative. The empty email field is initially focused, while continuation appears muted. Authentication, validation and the remaining three steps are untested; no details were entered.

This is a static recorded state. Interactions not explicitly described as inspected remain untested.

## Do's and Don'ts

- Do preserve the hierarchy, whitespace, source-state distinctions and responsive changes documented above.
- Do keep field labels, content order and visible control affordances intact.
- Do treat captured prices, marketing claims and quotations as dated source content.
- Don't fabricate testimonials, metrics, expanded states, error messages or successful transactions.
- Don't infer dark mode, extra breakpoints or animation timings from these two viewport samples.