Tandem Design System

Get DESIGN.md Download View template Works with

Tandem website template preview detail 2

Tandem website template preview detail 3

Tandem is a calm, light SaaS template for small-business software. It feels warm and unhurried: an off-white canvas (#F6F6F3) under a fine film grain, large Cabinet Grotesk headlines at weight 500, plain Switzer body copy, and near-black pills for the main actions. Product UI is shown as small, crisp white cards floating over soft, blurred aurora gradients and warm portraits, so the page reads like a lifestyle brand rather than a dashboard.

Four signatures make it recognisable:

Two-tone headlines. The first phrase is ink (#191919) and the rest is ink-faint (#7E7E78): Your whole business, / finally in one calm place., One system for the work behind the work, Pick a plan, change it anytime.
Pill button with an arrow chip. A #191919 pill, 52px tall, with the label on the left and a 40px round chip (white at 16%) holding ↗ on the right, 6px from the edge.
Floating UI cards on aurora panels. White cards (Invoice #1042, Revenue $48,200, Automation) sit on large blurred gradient panels in peach, coral, teal, lime and orange, often slightly rotated in the hero.
Eyebrow pills. Most sections open with a small white pill holding a dark round icon and a label: Inside Tandem, Pricing options. The hero version pairs a dark Meet Tandem pill with The small business OS →.

Colors

Surfaces

canvas#F6F6F3

Page background, also the text colour on dark buttons

surface-1#FBFBF9

Floating UI cards (invoice, revenue, automation)

surface-2#FFFFFF

Active feature card, bento cards, eyebrow pills, active nav tab, inputs

surface-3#EEEEEA

Icon tiles, nav-tab track, table rows inside UI cards, plan-card panels, billing toggle

field#FFFFFF

inverse-canvas#191919

Featured plan card, dark icon tiles, Verified and +24% badges

Ink

on-primary#F6F6F3

Text on primary

on-secondary#191919

Text on secondary

ink#191919

Headlines, labels, links, the bright half of titles

ink-muted#353535

Body text (the page default)

ink-subtle#6B6B65

Secondary text: feature descriptions, captions, footer headings, placeholders

ink-faint#7E7E78

The grey half of two-tone titles

inverse-ink#F6F6F3

Text on inverse-canvas

Action

primary#191919

Main pill buttons, submit

primary-hover#191919

secondary#F6F6F3

The light pill, used once on a dark surface

Lines & effects

chart-1#E4E4DF

Bar and heatmap steps in product UI, light to dark

chart-2#D6D6D0

Bar and heatmap steps in product UI, light to dark

chart-3#8B8B85

Bar and heatmap steps in product UI, light to dark

line#191919 · 8%

1px borders and inset outlines on cards and pills

glass#FFFFFF · 45%

The scrolled navigation bar (about)

chip-on-dark#FFFFFF · 16%

The round arrow chip inside a dark button

inverse-line#F6F6F3 · 12%

Fills and lines on dark cards

Typography

Cabinet Grotesk · display-stat

The quick brown fox jumps

Big numbers in the stats section (6 uses). 88px · 500 · 0.9 · -3.52px

Cabinet Grotesk · headline

The quick brown fox jumps

Section titles (H2). 44px · 500 · 1.08 · -1.1px

Cabinet Grotesk · title-lg

The quick brown fox jumps

Card headings. 22px · 500 · 1.2 · -0.44px

Switzer · body-xl

The quick brown fox jumps

FAQ questions, testimonial lines. 20px · 500 · 1.55 · -0.4px

Switzer · label

The quick brown fox jumps

Buttons, nav tabs. 15px · 500 · 1.25

Switzer · caption

The quick brown fox jumps

UI captions, eyebrow pills, badges. 13px · 400 · 1.55

Spacing & shape

Purpose	Value
Container	1328px (11 uses) with 56px side padding at 1440px; one narrower 1080px container for centred text
Section rhythm	160–180px top and bottom
Breakpoints	Webflow defaults (991, 767, 479); stack columns at 767px

Spacing scale

Token	Value	Preview
`hair`	1px
`xs`	6px
`sm`	8px
`md`	14px
`lg`	16px
`xl`	22px
`2xl`	56px

Layout spacing

Token	Value	Preview
`gutter`	56px
`section-sm`	96px
`section`	160px
`section-lg`	180px

Border radius

xxs2px

xs3px

sm6px

md8px

lg10px

pill999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Level 3surface-3

Level 4surface-2

Motion

Button and tab hover	transform 0.5–0.55s cubic-bezier(0.32, 0.72, 0, 1); colour and background 0.25–0.4s cubic-bezier(0.16, 1, 0.3, 1)
Hover tilt	rotation and scale quickTo, 0.8s power3.out
Manifesto words	Words start at opacity 0.12 and light to 1 as the section scrolls (scrubbed)
Pinned features	Panel pinned top top → bottom top, scrubbed; UI card swap uses clipPath → inset, scale 1.25, y 120, rotation −4° out and y −80 in, 0.36–0.45s power2.inOut
Hero cards drop	y −90 / −160 / −230 → 0, 1s power1.out
Parallax	yPercent −6 to −36, scrubbed (scrub 1.4 and 0.6)
Pop in	scale 0.4 → 1, 0.9s back.out(1.6); icons rotation −90 → 0, 1.8s staggered
Settle	rotation → 0, 0.9s expo.out; staggered scale-in 1.64s expo.out
Logo marquee	xPercent 0 → −50, 40s linear, looping
Logo spin	rotation 360, 80s linear

Do’s and don’ts

Split titles into a #191919 phrase and a #7E7E78 phrase, in Cabinet Grotesk 500 with negative tracking.
Use the #191919 pill with a round ↗ chip for every main action, 52px tall.
Open sections with a white eyebrow pill (dark circle icon + 13px label).
Show product as white #FBFBF9 cards with 10px radius floating on blurred gradient panels.
Keep body text in Switzer at line height 1.55, #353535, with no tracking.
Outline cards with 1px #191919 at 8% instead of shadows.
Use colour in UI elements; gradients belong only in image panels.
Use #7E7E78 below 40px. Small grey text is #6B6B65.
Add drop shadows or heavy borders.
Use Cabinet Grotesk at 700 or in uppercase.
Square off buttons or tags; they are always pills.
Fill whole sections with #191919; dark is for buttons, badges, tiles and one featured card.

Example prompt

Any page in the Tandem style

Prompt

Build your page in the Tandem style. Background #F6F6F3 with a subtle fixed grain overlay, container 1328px, 160–180px section padding. Headlines in Cabinet Grotesk 500: H2 44px, line height 1.08, tracking −1.1px, split into a #191919 first phrase and a #7E7E78 rest. Body in Switzer 16px/400, line height 1.55, #353535; secondary text #6B6B65. Open each section with a white pill eyebrow (1px rgba(25,25,25,0.08) outline, a dark 26px circle icon, 13px label). Main button: #191919 pill, 52px tall, padding 0 6px 0 22px, Switzer 15px/500 #F6F6F3, with a 40px rgba(255,255,255,0.16) circle holding "↗". Show product UI as #FBFBF9 cards (10px radius, 1px hairline) floating on blurred pastel gradient panels. Inner rows #EEEEEA with 8px radius; icon tiles 44px, 6px radius. No shadows. Motion: soft cubic-bezier(0.32, 0.72, 0, 1) at 0.5s and back.out(1.6) pops.

# Tandem Design System

> Measured from the Tandem template. Drop it into
> Claude, ChatGPT, Gemini, Cursor or v0.

## Overview

Tandem is a calm, light SaaS template for small-business
software. It feels warm and unhurried: an off-white
canvas (#F6F6F3) under a fine film grain, large Cabinet
Grotesk headlines at weight 500, plain Switzer body
copy, and near-black pills for the main actions. Product

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #F6F6F3     | Page background, also t… |
| surface-1    | #FBFBF9     | Floating UI cards (invo… |
| surface-2    | #FFFFFF     | Active feature card, be… |
| surface-3    | #EEEEEA     | Icon tiles, nav-tab tra… |
| field        | #FFFFFF     |                          |
| inverse-can… | #191919     | Featured plan card, dar… |
| on-primary   | #F6F6F3     | Text on primary          |
| on-secondary | #191919     | Text on secondary        |
| ink          | #191919     | Headlines, labels, link… |
| ink-muted    | #353535     | Body text (the page def… |
| ink-subtle   | #6B6B65     | Secondary text: feature… |
| ink-faint    | #7E7E78     | The grey half of two-to… |
| inverse-ink  | #F6F6F3     | Text on inverse-canvas   |
| primary      | #191919     | Main pill buttons, subm… |

## Typography

- display-stat: Cabinet Grotesk 88px / 500
- display-metric: Cabinet Grotesk 64px / 500
- display-hero: Cabinet Grotesk 60px / 500
- display-manifesto: Cabinet Grotesk 48px / 500

{
  "$description": "Tandem design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#191919",
      "$description": "Main pill buttons, submit"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#191919"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#F6F6F3",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#F6F6F3",
      "$description": "The light pill, used once on a dark surface"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#191919",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#F6F6F3",
      "$description": "Page background, also the text colour on dark buttons"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FBFBF9",
      "$description": "Floating UI cards (invoice, revenue, automation)"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Active feature card, bento cards, eyebrow pills, active nav tab, inputs"
    },
    "surface-3": {
      "$type": "color",
      "$value": "#EEEEEA",
      "$description": "Icon tiles, nav-tab track, table rows inside UI cards, plan-card panels, billing toggle"

/* Tandem theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline, rounded-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #191919;
  --color-primary-hover: #191919;
  --color-on-primary: #F6F6F3;
  --color-secondary: #F6F6F3;
  --color-on-secondary: #191919;
  --color-canvas: #F6F6F3;
  --color-surface-1: #FBFBF9;
  --color-surface-2: #FFFFFF;
  --color-surface-3: #EEEEEA;
  --color-chart-1: #E4E4DF;
  --color-chart-2: #D6D6D0;
  --color-chart-3: #8B8B85;
  --color-ink: #191919;
  --color-ink-muted: #353535;
  --color-ink-subtle: #6B6B65;
  --color-ink-faint: #7E7E78;
  --color-line: #19191914;
  --color-field: #FFFFFF;
  --color-glass: #FFFFFF73;
  --color-chip-on-dark: #FFFFFF29;
  --color-inverse-canvas: #191919;
  --color-inverse-ink: #F6F6F3;
  --color-inverse-line: #F6F6F31F;

  /* Fonts */
  --font-sans: "Cabinet Grotesk", "Outfit", sans-serif;
  --font-cabinet-grotesk: "Cabinet Grotesk", "Outfit", sans-serif;
  --font-switzer: "Switzer", "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-stat: 88px;
  --text-display-stat--line-height: 0.9;
  --text-display-stat--letter-spacing: -3.52px;
  --text-display-stat--font-weight: 500;
  --text-display-metric: 64px;
  --text-display-metric--line-height: 0.85;
  --text-display-metric--letter-spacing: -2.56px;
  --text-display-metric--font-weight: 500;
  --text-display-hero: 60px;
  --text-display-hero--line-height: 1.02;

/* Tandem design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #191919; /* Main pill buttons, submit */
  --color-primary-hover: #191919;
  --color-on-primary: #F6F6F3; /* Text on primary */
  --color-secondary: #F6F6F3; /* The light pill, used once on a dark surface */
  --color-on-secondary: #191919; /* Text on secondary */
  --color-canvas: #F6F6F3; /* Page background, also the text colour on dark buttons */
  --color-surface-1: #FBFBF9; /* Floating UI cards (invoice, revenue, automation) */
  --color-surface-2: #FFFFFF; /* Active feature card, bento cards, eyebrow pills, active nav tab, inputs */
  --color-surface-3: #EEEEEA; /* Icon tiles, nav-tab track, table rows inside UI cards, plan-card panels, billing toggle */
  --color-chart-1: #E4E4DF; /* Bar and heatmap steps in product UI, light to dark */
  --color-chart-2: #D6D6D0; /* Bar and heatmap steps in product UI, light to dark */
  --color-chart-3: #8B8B85; /* Bar and heatmap steps in product UI, light to dark */
  --color-ink: #191919; /* Headlines, labels, links, the bright half of titles */
  --color-ink-muted: #353535; /* Body text (the page default) */
  --color-ink-subtle: #6B6B65; /* Secondary text: feature descriptions, captions, footer headings, placeholders */
  --color-ink-faint: #7E7E78; /* The grey half of two-tone titles */
  --color-line: #19191914; /* 1px borders and inset outlines on cards and pills */
  --color-field: #FFFFFF;
  --color-glass: #FFFFFF73; /* The scrolled navigation bar (about) */
  --color-chip-on-dark: #FFFFFF29; /* The round arrow chip inside a dark button */
  --color-inverse-canvas: #191919; /* Featured plan card, dark icon tiles, Verified and +24% badges */
  --color-inverse-ink: #F6F6F3; /* Text on inverse-canvas */
  --color-inverse-line: #F6F6F31F; /* Fills and lines on dark cards */

  /* Fonts */
  --font-cabinet-grotesk: "Cabinet Grotesk", "Outfit", sans-serif;
  --font-switzer: "Switzer", "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-stat: 88px;
  --text-display-stat-font: var(--font-cabinet-grotesk);
  --text-display-stat-weight: 500;
  --text-display-stat-line-height: 0.9;
  --text-display-stat-tracking: -3.52px;
  --text-display-metric: 64px;
  --text-display-metric-font: var(--font-cabinet-grotesk);
  --text-display-metric-weight: 500;
  --text-display-metric-line-height: 0.85;
  --text-display-metric-tracking: -2.56px;
  --text-display-hero: 60px;
  --text-display-hero-font: var(--font-cabinet-grotesk);

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

SaaS design systems, the same colors first.

Browse all 398

Bring any of them to your AI tool

All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.

Get All Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Cabinet Grotesk · display-stat

Cabinet Grotesk · headline

Cabinet Grotesk · title-lg

Switzer · body-xl

Switzer · label

Switzer · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Tandem style

More design systems like this

Tessel

Juno

Autona

Boxkit

Bring any of them to your AI tool