Tuple — sign-in and SSO screen

---
version: alpha
name: Tuple — sign-in and SSO 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 spacious sign-in card that separates Google, Microsoft and SSO choices from email/password entry with a fine divider and muted violet login action.

Source: https://production.tuple.app/users/sign_in. Captured 2026-10-06T06:03:00.656061+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

Place the log-in eyebrow above the card; center the heading, stack three identity-provider actions, then divide the email/password path. Keep password recovery beside the password area and the registration link below the main action.

Responsive evidence: The provider controls narrow from 384px to 278px at 390px while preserving their vertical order. The 30px heading wraps to two lines. The mobile viewport ends around the login action, so below-fold help content is not claimed as fully inspected on mobile.

## Elevation & Depth

Keep the outer card softly elevated and use small provider-button shadows. Inputs are quieter filled rectangles; links carry the violet accent without becoming competing filled buttons.

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

The pale violet SSO row includes a lock glyph. Email and password fields use visible labels and muted fills, with password recovery as an underlined link. This is the logged-out empty state; no provider flow, SSO modal, password recovery or form submission was exercised.

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.