---
title: "Tuple design system"
variant: extended
source: https://tuple.app/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/tuple-app)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Tuple · Design System

> Quiet, crisp layouts with a vivid developer-tool accent

**Theme:** light · **Industry:** devtools · **Source:** https://tuple.app/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Tuple pairs an open, white canvas with a restrained violet CTA and a single dramatic near-black workflow section. Product screenshots, precise typography, and compact feature cards keep the page grounded in the daily work of developers.

## North star

Keep the page mostly white and quiet; use violet for the primary action and let real product screens carry the visual complexity.

## Overview

The visual strategy is built around a white, spacious canvas, with very dark charcoal reserved for a single workflow section that gives the long page a clear tonal shift. The violet primary CTA is the strongest recurring brand signal; green appears sparingly in announcement or feature-link details, while muted grays handle supporting copy. Inter Variable gives headings, navigation, and body copy a crisp, familiar software feel. DM Mono is used for uppercase section eyebrows and code-like labels, connecting the marketing layout to developer tools. The hero centers its message and CTA above a large, framed desktop product image. Below it, alternating white and soft-gray bands organize centered introductions, feature cards, a testimonial grid, and product demonstrations. Screenshots provide color and texture, but remain contained within rounded frames rather than taking over the page. Borders and subtle shadows define cards and navigation without making the interface feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas and broad light sections; also the contrast color for the violet CTA and dark workflow section. |
| Quiet Slate | `#71717a` | `--color-quiet-slate` | neutral | Muted body copy, testimonial text, and secondary navigation details on light surfaces. |
| Graphite Ink | `#27272a` | `--color-graphite-ink` | neutral | Main headings, body text, navigation, and dark UI labels. |
| Night Canvas | `#09090b` | `--color-night-canvas` | surface | Full-width developer workflow section, creating the page's strongest dark contrast. |
| Tuple Violet | `#6a5ed9` | `--color-tuple-violet` | brand | Primary free-trial CTA background and a small number of brand highlights. |
| Coral Signal | `#e06c48` | `--color-coral-signal` | semantic | Small badge or product-interface detail; not a defining page-wide brand color. |
| Rust Signal | `#cd3e29` | `--color-rust-signal` | semantic | Minor badge and embedded product-visual detail, not a main interface accent. |
| Mist Gradient | `#edeff2` | `--color-mist-gradient` | surface | Soft radial gradient detail around sections; use as a subtle atmospheric fade. |
| Border Slate | `#52525b` | `--color-border-slate` | neutral | Measured border and UI detail color; keep hairlines restrained rather than using it as a large fill. |
| Pale Slate | `#d4d4d8` | `--color-pale-slate` | neutral | Muted text on dark surfaces and secondary labels. |
| Cloud Divider | `#e4e4e7` | `--color-cloud-divider` | surface | Light card and button borders, subtle separators, and secondary UI surfaces. |
| Workflow Green | `#16a34a` | `--color-workflow-green` | accent | Announcement and contextual link accent; reserve for small, informative highlights. |
| Screen Sky | `#38bdf8` | `--color-screen-sky` | semantic | Badge or embedded product-visual color, not a primary site-wide accent. |
| Screen Blue | `#0284c7` | `--color-screen-blue` | semantic | Minor badge and product-interface detail; do not promote to a global CTA color. |
| Panel Charcoal | `#18181b` | `--color-panel-charcoal` | surface | Dark cards and embedded interface panels within the workflow section. |
| Panel Edge | `#323235` | `--color-panel-edge` | neutral | Subtle outlines and secondary dark-card details in the workflow area. |
| Code Purple | `#6f42c1` | `--color-code-purple` | accent | Occasional colored text or code-related highlight; secondary to the main violet CTA. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#09090b` (Night Canvas) · `--color-surface-2` → `#27272a` (Graphite Ink) · `--color-surface-3` → `#e4e4e7` (Cloud Divider) · `--color-surface-4` → `#18181b` (Panel Charcoal) · `--color-text` → `#27272a` (Graphite Ink) · `--color-text-muted` → `#71717a` (Quiet Slate) · `--color-text-subtle` → `#d4d4d8` (Pale Slate) · `--color-border` → `#52525b` (Border Slate) · `--color-accent` → `#6a5ed9` (Tuple Violet) · `--color-accent-2` → `#16a34a` (Workflow Green) · `--color-accent-3` → `#6f42c1` (Code Purple) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#27272a` | `#ffffff` | 14.89:1 | AAA |
| `#27272a` | `#09090b` | 1.34:1 | fail |
| `#27272a` | `#e4e4e7` | 11.74:1 | AAA |
| `#71717a` | `#ffffff` | 4.83:1 | AA |
| `#71717a` | `#09090b` | 4.12:1 | AA-large |
| `#71717a` | `#27272a` | 3.08:1 | AA-large |
| `#71717a` | `#e4e4e7` | 3.81:1 | AA-large |
| `#d4d4d8` | `#ffffff` | 1.48:1 | fail |
| `#d4d4d8` | `#09090b` | 13.46:1 | AAA |
| `#d4d4d8` | `#27272a` | 10.08:1 | AAA |

### Gradients

- `radial-gradient(closest-corner, rgb(237, 239, 242) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgb(255, 255, 255), rgb(250, 250, 250), rgb(250, 250, 250))`
- `radial-gradient(closest-side, rgba(39, 39, 42, 0) 75%, rgb(39, 39, 42))`
- `linear-gradient(to left, rgb(250, 250, 250), rgba(250, 250, 250, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Variable | `--font-body` | webfont | 400, 600, 500, 700 | Headings, body copy, navigation, links, and buttons | Inter |
| DM Mono | `--font-mono` | webfont | 400, 500 | Uppercase section eyebrows, captions, and code-like labels | Roboto Mono |

- **Inter Variable:** Use measured weights from regular through bold; headings are clean and sentence case, with no tracking emphasis.
- **DM Mono:** Use compact monospace labels; eyebrows are uppercase with visibly expanded tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.554, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1.2 | 0 | — | Inter Variable | Large promotional display heading where the page needs a strong statement. |
| h1 | 48px | 600 | 1 | 0 | — | Inter Variable | Hero headline and primary page-level heading. |
| h2 | 20px | 600 | 1.4 | 0 | — | Inter Variable | Section titles and prominent feature headings. |
| body | 16px | 400 | 1.63 | 0 | — | Inter Variable | Explanatory copy, testimonial text, and feature descriptions. |
| caption | 13px | 400 | 1.63 | 0 | — | DM Mono | Small supporting labels and compact metadata. |
| button | 18px | 500 | 1.56 | 0 | — | Inter Variable | Primary action text on free-trial buttons. |
| nav | 16px | 500 | 1.5 | 0 | — | Inter Variable | Top navigation links and footer navigation labels. |
| link | 14px | 600 | 1.43 | 0 | — | Inter Variable | Compact inline links and contextual calls to action. |
| eyebrow | 16px | 500 | 1.5 | 0.1em | uppercase | DM Mono | Uppercase mono section labels above headings. |
| code | 13px | 400 | 1.63 | 0 | — | DM Mono | Code samples and developer-oriented interface labels. |

OpenType features in use: `"cv05", "cv06", "ss01"`, `"ss03", "ss04", "ss05"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 24, 32, 48, 64, 128 px.
- Section rhythm 32px · element gap 8px · card padding 32px · max content width —.

A centered, spacious marketing page with a compact top navigation and a narrow hero message above a wide product image. Content stays aligned to a consistent central column, while feature and testimonial areas use three-column arrangements and the dark workflow section expands to four columns. Full-width section bands alternate between white and very light gray, with one near-black band as a deliberate interruption. The measured density is compact within cards but generous between major sections; avoid inventing a fixed max-width where none was measured.

## Shape & elevation

- Radius: button `12px` · card `12px` · badge `9999px` · nav `4px` · link `24px` · xs `4px` · sm `6px` · md `8px` · lg `11px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `sm` (text, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Shadow `hairline` (card, nav): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Shadow `hairline-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg` (nav): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`
- Shadow `hairline-3` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most sections are flat, separated by background bands and whitespace. Cards use rounded corners and subtle hairline borders or very soft shadows; the navigation has a slightly stronger floating shadow. Product screenshots sit above the page through their own window framing and restrained shadow, while dark workflow cards rely on tonal contrast rather than heavy elevation.

## Imagery

Use authentic Tuple desktop-interface screenshots as the primary imagery, framed like app windows and shown large enough to read as product evidence. The hero screen is colorful, while later demos show code, calls, and workflow UI. Testimonial portraits are small supporting elements. Keep illustration-like characters limited to the announcement banner; avoid decorative stock photography or unrelated 3D artwork.

## Components

### Top navigation

Compact horizontal Tuple navigation on white, with text links, a bordered Sign up control, and a subtly elevated bar.

### Announcement banner

Small centered green update link with playful character marks; visually secondary to the hero.

### Hero CTA

Centered headline and muted supporting copy above a violet Start your free trial button; add concise trial reassurance below.

### Product window

Large desktop screenshot in a rounded app-window frame, showing code or collaboration UI as concrete product proof.

### Feature cards

Light cards with concise headings, restrained gray copy, and small interface imagery or diagrams.

### Testimonial cards

Soft-gray testimonial band with a centered introduction and a multi-column mix of portraits, quotes, and attribution.

### Workflow panels

Dark-section cards use charcoal panels, pale text, developer-oriented diagrams, and small green highlights.

### Trial CTA and footer

Centered closing trial prompt followed by a simple multi-column footer with understated links.

### Measured component styles

- **Primary button** (“Start your free trial”): background #6a5ed9 · text #ffffff · radius 12px · padding 16px 32px · 500 18px Inter Variable
- **Secondary button** (“Sign up”): transparent background · text #27272a · border 1px solid #e4e4e7 · radius 8px · padding 7px 20px · 500 16px Inter Variable · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Participant joins participant-joined eve”): background #27272a · text #d4d4d8 · radius 24px · padding 0px · 400 16px Inter Variable
- **Card** (“Ridiculously crisp audio and video Tuple”): background #fafafa · text #71717a · radius 12px · padding 32px · 400 16px Inter Variable
- **Badge** (“Paul”): transparent background · text #ffffff · border 1px solid #ffffff · radius 9999px · padding 4px 10px · 600 12px Inter Variable
- **Navigation item** (“Tuple Pricing Learn Docs Changelog Blog ”): transparent background · text #27272a · radius 0px · padding 0px · 500 16px Inter Variable

## Do

- Keep the main canvas white and let content breathe.
- Use Tuple Violet #6a5ed9 for the primary trial action.
- Use Graphite Ink #27272a for primary text and headings.
- Reserve Night Canvas #09090b for the workflow band.
- Use DM Mono for uppercase eyebrows and code-adjacent labels.
- Show real product UI inside clear, rounded screenshot frames.

## Don't

- Do not make every section dark or saturated.
- Do not use green, coral, or blue as competing primary CTA colors.
- Do not replace product screenshots with generic stock photography.
- Do not add heavy gradients across the whole page.
- Do not use thick borders or pronounced shadows on every card.
- Do not crowd the centered hero with extra navigation or decorative copy.

## Agent prompt

Build a developer-focused SaaS page in Tuple's restrained visual style. Use Gallery White #ffffff as the dominant canvas, Graphite Ink #27272a for headings and navigation, and Quiet Slate #71717a for supporting copy. Make the primary CTA Tuple Violet #6a5ed9 with white text. Use a single Night Canvas #09090b section for workflow content, with Panel Charcoal #18181b cards and pale labels. Set interface text in Inter Variable and use DM Mono for uppercase eyebrows and code-like details. Center the hero, place a large real product screenshot beneath it, and organize lower content into alternating light bands, compact feature cards, and testimonials. Prefer subtle borders, rounded frames, and restrained shadows. Keep bright colors inside product imagery or small informational accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | logo-cloud | White band with centered uppercase eyebrow, large product screenshot, and client logos below. | social proof, logo recognition | centered label, wide product window, muted logo row |
| 2 | feature-grid | Centered introduction above a three-column feature area with product demonstrations. | feature discovery, scannable benefits | mono eyebrow, three-column cards, embedded UI visuals |
| 3 | testimonials | Soft-gray full-width band, centered heading, and multi-column testimonial cards. | customer validation, named attribution | portrait thumbnails, quote cards, light card surfaces |
| 4 | feature-grid | White section with centered title and three concise feature columns. | benefit comparison, quick scanning | small line icons, short descriptions, open columns |
| 5 | product-showcase | Soft-gray privacy band with centered copy above a large desktop screenshot. | feature explanation, visual proof | centered introduction, wide screenshot, rounded app frame |
| 6 | feature-grid | Full-width near-black band with centered introduction, one large card, and two smaller cards. | workflow explanation, progressive feature detail | dark cards, code diagrams, green accent labels |
| 7 | feature-split | Pale section with centered introduction and two-column feature content. | feature browsing, interaction preview | stacked feature descriptions, large media panel, subtle separators |
| 8 | cta | Centered closing message and violet trial button on white. | trial conversion, single primary action | mono eyebrow, centered heading, violet CTA |
| 9 | footer | White footer with brand mark and several compact link columns. | destination discovery, company and support access | four-column links, muted labels, small social marks |

## Source CSS custom properties (selected)

```css
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/tuple-app