Tuple — two-tier pricing page

---
version: alpha
name: Tuple — two-tier pricing page
colors:
  primary: '#6A5ED9'
  ink: '#27272A'
  muted: '#71717A'
  surface: '#FFFFFF'
  soft: '#FAFAFA'
typography:
  heading:
    fontFamily: Inter Variable
    fontSize: 48px
    fontWeight: 600
    lineHeight: 48px
  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

A restrained two-column pricing page that pairs a raised engineering-team card with a quieter enterprise offer, green feature checks, a refund strip, testimonials and readable FAQs.

Source: https://tuple.app/pricing. Captured 2026-10-06T06:03:00.742829+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 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.

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

## Layout

Lead with a monospace pricing eyebrow and centered promise. Place the engineering tier beside the enterprise tier, align feature rows and broad actions, then add the refund notice, special offers, source testimonials and a two-column question-and-answer block.

Responsive evidence: At 390px the tiers stack, the first card fills the content column with 32px outside gutters, and navigation becomes a hamburger. The desktop pricing heading and its mobile wrapping are measured below. Mobile evidence covers the first tier, not every lower FAQ.

## Elevation & Depth

Use a diffuse shadow on the first card and near-white backing for secondary content. Rounded controls and a dashed refund boundary provide hierarchy without heavy borders.

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

## Components

The captured default team price is $30 per user per month; enterprise uses custom pricing. This is source copy at capture time, not a price guarantee. Keep pricing units adjacent to the figure, pale green check disks, a filled violet primary action and a pale secondary sales action. No purchase or 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.