Tuple — quiet free-trial CTA

---
version: alpha
name: Tuple — quiet free-trial CTA
colors:
  primary: '#6A5ED9'
  ink: '#27272A'
  muted: '#71717A'
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: Inter Variable
    fontSize: 48px
    fontWeight: 600
    lineHeight: 48px
  body:
    fontFamily: Inter Variable
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
  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

An isolated closing conversion section with a monospace eyebrow, compact invitation, free-trial reassurance and one violet action on generous white space.

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

## Colors

Observed palette: primary: #6A5ED9; ink: #27272A; muted: #71717A; surface: #FFFFFF. 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 48px / 48px, weight 600, using "Inter Variable"; its measured width is 672.00px. The corresponding mobile sample is 30px / 36px, width 311.00px. Computed styles may describe a parent while a child paints a colored word. Exact selected element bounds: desktop 1425.00 × 504.00px; mobile 375.00 × 468.00px. Crops use freshly measured document coordinates after a warm-up screenshot.

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

## Layout

Center a short eyebrow, heading, sentence and button in a broad white section. Preserve the ample vertical breathing room instead of turning the action into a dense banner. This reference is only the final main-content div, not the footer or full page.

Responsive evidence: Desktop and mobile crop dimensions and actual text styles are measured below. Both captures preserve the centered vertical stack and single action; mobile wraps within the narrower column.

## Elevation & Depth

The section is mostly flat. A rounded violet button supplies the visual anchor; avoid unnecessary card borders, gradients or extra actions.

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 the visible LET'S GO eyebrow, Ready to get started? invitation and a single Start your free trial link. The link was discovered as the public Tuple sign-up destination; no trial was started.

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.