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

# Tailscale · Design System

> Warm, clear surfaces meet confident connectivity

**Theme:** light · **Industry:** saas · **Source:** https://tailscale.com/ · **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._

Tailscale’s homepage pairs a warm, quiet canvas with direct product messaging and crisp interface previews. Rounded cards, restrained dark controls, and a vivid blue feature panel give the long page a clear rhythm.

## North star

Keep the warm neutral canvas and confident typography in control, using saturated color only to spotlight a meaningful product moment.

## Overview

The page is built around a warm off-white canvas rather than stark white, with dark charcoal headlines and muted gray supporting copy. White product cards provide clean contrast, while thin pale borders define panels without making the page feel boxed in. Dark, compact calls to action anchor the otherwise quiet palette; the blue gradient is reserved for a prominent product-benefit showcase, and coral appears as a selected capability tile rather than a general brand color. Inter supplies the contemporary, readable sans-serif voice, with large centered hero typography and a consistent restrained weight. The MDIO monospace face is used sparingly for uppercase announcement and eyebrow text. Layout alternates centered messaging, broad product demonstrations, customer proof, and integration logos. Generous vertical breathing room separates sections, while dense product screens and logo arrays add technical detail. Rounded corners soften panels and buttons; subtle borders and very light shadows keep depth secondary to content.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Clean White | `#ffffff` | `--color-clean-white` | surface | White product cards, navigation details, and high-contrast text on dark surfaces. |
| Soft Graphite | `#585757` | `--color-soft-graphite` | neutral | Main muted copy and secondary text beneath headlines and in capability descriptions. |
| Warm Porcelain | `#f9f7f6` | `--color-warm-porcelain` | surface | Dominant page canvas and continuous background across the hero and most content bands. |
| Quiet Divider | `#eeebea` | `--color-quiet-divider` | neutral | Fine card, navigation, and section borders that separate content without strong contrast. |
| Deep Charcoal | `#2e2d2d` | `--color-deep-charcoal` | brand | Headline and navigation text; also the dark closing call-to-action band. |
| Signal Blue | `#5a82de` | `--color-signal-blue` | accent | Bright endpoint of the feature-showcase gradient, not a general page background. |
| Network Indigo | `#324994` | `--color-network-indigo` | accent | Deep endpoint of the blue feature-panel gradient. |
| Near Black | `#1f1e1e` | `--color-near-black` | brand | Primary button fills and dark action text; provides a compact, high-contrast interaction cue. |
| Footer Ash | `#706e6d` | `--color-footer-ash` | neutral | Low-emphasis footer text; appears in small supporting details rather than prominent content. |
| Capability Coral | `#d04841` | `--color-capability-coral` | semantic | Selected Business VPN tile and small product-detail accents; keep limited to capability emphasis. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Clean White) · `--color-surface` → `#f9f7f6` (Warm Porcelain) · `--color-surface-2` → `#2e2d2d` (Deep Charcoal) · `--color-text` → `#2e2d2d` (Deep Charcoal) · `--color-text-muted` → `#585757` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Clean White) · `--color-border` → `#eeebea` (Quiet Divider) · `--color-accent` → `#5a82de` (Signal Blue) · `--color-accent-2` → `#324994` (Network Indigo) · `--color-accent-3` → `#d04841` (Capability Coral)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2e2d2d` | `#ffffff` | 13.73:1 | AAA |
| `#2e2d2d` | `#f9f7f6` | 12.86:1 | AAA |
| `#585757` | `#ffffff` | 7.2:1 | AAA |
| `#585757` | `#f9f7f6` | 6.74:1 | AA |
| `#585757` | `#2e2d2d` | 1.91:1 | fail |
| `#ffffff` | `#f9f7f6` | 1.07:1 | fail |
| `#ffffff` | `#2e2d2d` | 13.73:1 | AAA |
| `#5a82de` | `#ffffff` | 3.7:1 | AA-large |
| `#5a82de` | `#f9f7f6` | 3.46:1 | AA-large |
| `#5a82de` | `#2e2d2d` | 3.72:1 | AA-large |

### Gradients

- `linear-gradient(in oklab, rgb(90, 130, 222) 0%, rgb(50, 73, 148) 100%)`
- `linear-gradient(90deg, rgb(249, 247, 246) 0%, rgb(249, 247, 246) 10%, rgba(249, 247, 246, 0) 100%)`
- `linear-gradient(90deg, rgba(249, 247, 246, 0) 0%, rgb(249, 247, 246) 90%, rgb(249, 247, 246) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-body` | webfont | 400, 500, 600 | Headlines, body copy, navigation, buttons, and card content. | Inter |
| mdio | `--font-mdio` | webfont | 500 | Uppercase announcement-bar text and compact eyebrow labels. | IBM Plex Mono |

- **inter:** Use measured regular, medium, and semibold weights; tight negative tracking, sentence case, and restrained headline weight.
- **mdio:** Use medium weight for small uppercase labels with visibly expanded tracking; keep this voice rare.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1.1 | -0.01em | — | inter | Large centered hero or feature-panel headline. |
| h1 | 48px | 500 | 1.1 | -0.01em | — | inter | Primary page headline and major section heading. |
| h2 | 32px | 500 | 1.1 | -0.01em | — | inter | Section titles and prominent supporting statements. |
| h3 | 20px | 500 | 1.2 | -0.01em | — | inter | Capability, card, and subsection headings. |
| body | 16px | 400 | 1.5 | -0.01em | — | inter | Explanatory copy, product details, and testimonial text. |
| caption | 14px | 500 | 1.5 | -0.01em | — | inter | Compact labels and supporting card details. |
| button | 16px | 500 | 1 | -0.01em | — | inter | Primary and secondary action labels. |
| nav | 16px | 500 | 1.5 | -0.01em | — | inter | Main navigation and menu links. |
| eyebrow | 12px | 500 | 1 | 0.05em | uppercase | mdio | Uppercase monospace announcement and section labels. |

## Spacing & layout

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

Use a centered content frame with a measured maximum width of 1248px. The opening is vertically centered and text-led, followed by a horizontal capability row and a broad product split with interface media. Alternate full-width warm-neutral bands with white cards and one saturated feature panel. Center hero and proof messaging; align product detail and integration content to the left. Preserve the comfortable section rhythm and measured 64px section gap, while allowing dense interface previews and logo grids to contrast with spacious copy areas.

## Shape & elevation

- Radius: button `8px` · card `16px` · media `16px` · nav `8px` · xs `8px` · sm `16px` · md `32px` · pill `9999px`
- Shadow `sm` (other, card, nav): `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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(24, 23, 23, 0.02) 0px 4px 8px 0px`
- Shadow `md` (nav): `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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 10px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat: pale hairline borders define white cards, and very light shadows lift select cards or navigation details. Product screenshots layer inside broad rounded panels, while the dark CTA is a solid band rather than a floating card. Keep depth subtle and avoid strong drop shadows.

## Imagery

Product interfaces are the primary imagery: show realistic dashboards and device views inside large rounded white panels, with enough scale to read as software rather than decoration. Customer and integration logos form orderly, subdued grids. The feature showcase uses a blue gradient behind a large interface composite. Avoid generic lifestyle photography; reserve small colorful marks for product icons and the selected capability tile.

## Components

### Announcement and navigation

A narrow dark announcement strip with uppercase monospace copy sits above a white navigation row. Use dark text, compact links, and a dark rounded primary action.

### Hero

Large centered charcoal headline, short muted supporting paragraph, and dark primary action paired with a plain text sales link on the warm canvas.

### Capability selector

A horizontal row of concise use cases with small colored line icons; the selected Business VPN item becomes a rounded coral tile with white copy.

### Product showcase

A white, rounded product panel combines a left-aligned eyebrow, headline, and checklist with a large software interface preview on the right.

### Customer proof cards

Customer metrics sit in white cards with fine pale borders, large figures, compact descriptions, and understated text links.

### Gradient feature panel

A vivid blue gradient backs centered white feature messaging, small pill labels, and a large layered product-interface image.

### Integration grid

A dense, evenly spaced array of partner and technology marks supports a short left-aligned heading and compact action.

### Closing CTA and footer

A charcoal rounded CTA band precedes a white footer organized into logo and link columns, with subdued legal details.

### Measured component styles

- **Primary button** (“Make the case”): background #1f1e1e · text #ffffff · border 1px solid · radius 8px · padding 8px 12px · 500 16px inter
- **Secondary button** (“Security”): background #ffffff · text #1f1e1e · border 1px solid #e3e1e0 · radius 9999px · padding 8px 12px · 500 14px inter
- **Link** (“Read case study”): transparent background · text #1f1e1e · radius 0px · padding 4px 0px · 500 16px inter
- **Card** (“1,000+ hours saved with fewer connectivi”): background #ffffff · text #181717 · border 1px solid #eeebea · radius 16px · padding 32px · 400 16px inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Platform MEET TAILSCALE How Tailscale Wo”): transparent background · text #181717 · radius 0px · padding 0px · 400 16px inter

## Do

- Keep the primary canvas warm and near-white.
- Use charcoal for headlines and primary actions.
- Make product interfaces the main visual proof.
- Reserve the blue gradient for a feature highlight.
- Use thin borders to define white cards.
- Give major sections generous breathing room.

## Don't

- Do not turn coral into a site-wide accent.
- Do not use saturated backgrounds across every section.
- Do not crowd the centered hero with extra elements.
- Do not add heavy shadows to otherwise flat cards.
- Do not let partner logos overpower nearby copy.
- Do not use monospace for ordinary body text.

## Agent prompt

Build a new Tailscale-style SaaS page with a quiet, warm canvas in Warm Porcelain (#f9f7f6), charcoal headlines in Deep Charcoal (#2e2d2d), and muted supporting copy in Soft Graphite (#585757). Use Inter for headings, body, navigation, and controls; reserve expanded-tracking monospace for small uppercase labels. Create spacious centered messaging, broad white product panels, and realistic interface previews. Use Clean White (#ffffff) cards with Quiet Divider (#eeebea) hairlines and restrained corner rounding. Make actions Near Black (#1f1e1e). Apply Signal Blue (#5a82de) and Network Indigo (#324994) together only in a feature gradient; limit Capability Coral (#d04841) to selected-state emphasis. Alternate airy sections with dense interface or logo content, and finish with a charcoal CTA and orderly footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Dark announcement strip above a white horizontal navigation bar. | announcement link, primary sign-up action, grouped navigation | uppercase monospace strip, dark CTA, compact link row |
| 2 | hero | Centered single-column headline and supporting copy on warm neutral canvas. | clear value proposition, primary and secondary actions | large charcoal headline, muted paragraph, dark rounded button |
| 3 | category-nav | Five use-case options arranged in a horizontal row. | select a use case, scan short descriptions | small colored icons, selected coral tile, compact labels |
| 4 | product-showcase | Large rounded white panel with left copy and right interface preview. | feature explanation, checklist benefits, team action | product eyebrow, bulleted list, layered dashboard image |
| 5 | stats | Centered trust heading above three metric cards. | customer proof, read case study | large numeric metrics, white bordered cards, subtle links |
| 6 | logo-cloud | Multiple compact rows of customer logos on the shared warm canvas. | recognition through customer names | small subdued logos, even grid rhythm |
| 7 | feature-grid | Blue gradient showcase with centered intro, interface image, and three benefits below. | explain core value, show product in context, scan benefits | white headline, pill labels, large dashboard composite |
| 8 | testimonials | Centered section heading above a horizontally arranged testimonial row. | peer validation, social-post testimonials | quote cards, user handles, small social icons |
| 9 | integrations | Dense multi-column logo grid with a text feature tile embedded among marks. | browse integrations, view all integrations | partner icon matrix, embedded heading tile, dark action |
| 10 | cta | Single dark rounded band with left-aligned headline and right-side actions. | start now, contact sales | charcoal surface, white headline, compact action links |
| 11 | footer | White footer with logo at left, grouped link columns, and fine legal text below. | browse company and help links, access legal information | multi-column link lists, small section labels, subdued copyright |

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