Tuple — remote pair programming landing page

---
version: alpha
name: Tuple — remote pair programming landing page
colors:
  primary: '#6A5ED9'
  ink: '#27272A'
  muted: '#71717A'
  surface: '#FFFFFF'
  soft: '#FAFAFA'
typography:
  heading:
    fontFamily: Inter Variable
    fontSize: 60px
    fontWeight: 600
    lineHeight: 72px
  body:
    fontFamily: Inter Variable
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  control:
    fontFamily: Inter Variable
    fontSize: 18px
    fontWeight: 500
    lineHeight: 28px
rounded:
  control: 12px
spacing:
  control-block: 16px
components:
  heading:
    typography: '{typography.heading}'
    textColor: '{colors.ink}'
  control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
---

## Overview

Airy developer-tool marketing with a centered Inter headline, violet trial action, a detailed desktop demonstration, alternating feature bands and compact testimonial grids.

Source: https://tuple.app/. Captured 2026-10-06T06:02:35.220170+00:00. This guide describes the observed reference, not an official brand specification.

## Colors

Observed palette: primary: #6A5ED9; ink: #27272A; muted: #71717A; surface: #FFFFFF; soft: #FAFAFA. 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 60px / 72px, weight 600, using "Inter Variable"; its measured width is 1024.00px. The corresponding mobile sample is 30px / 36px, width 311.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

Center the opening promise above the primary action and a large illustrated desktop. Alternate generous white and near-white feature bands; reserve the dark workflow band for programmable integrations. Follow with a quiet final conversion section and a multi-column footer.

Responsive evidence: The headline reduces from 60px/72px at desktop to 30px/36px at 390px. Navigation condenses to a hamburger, hero text stays centered, and the product frame scales to the narrow column. Only the opening mobile viewport was visually checked; lower-page breakpoint behavior is not asserted.

## Elevation & Depth

Product window edges and gentle ambient shadows create depth; keep the surrounding page largely flat. Rounded buttons and application frames should contrast with the straightforward type-led sections.

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 12px radius and padding 16px 32px. Match that control's role rather than applying the same radius to every container.

## Components

Use a single violet filled trial action, a green Linux-announcement pill with small illustrations, and product demonstrations as the primary visual proof. Testimonial wording and logos belong to the source; they are not independently validated claims.

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.