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

# Tatem · Design System

> Quiet dark surfaces, a cool gradient, and focused email workflows.

**Theme:** dark · **Industry:** productivity · **Source:** https://tatem.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._

Tatem presents its email product through a restrained dark interface, spacious feature sections, and understated typography. A misty blue-gray gradient distinguishes the opening hero from the near-black product story below.

## North star

Use near-black space and understated Inter typography as the foundation, reserving the cool gradient for the opening hero.

## Overview

The page opens with a full-viewport, cool blue-gray gradient that fades from slate blue into pale, muted gray-green, framing white hero copy and a tilted email-interface preview. Below it, the site returns to a near-black canvas and uses large vertical gaps to make each product feature feel deliberate rather than crowded. Inter is used throughout in regular weights: headings are clean and sentence-case, while feature labels are small uppercase text. Primary copy is off-white; supporting text steps down into two restrained grays. Product previews sit in subtly lighter charcoal panels, with their interface details kept low-contrast so they support rather than compete with the message. Alignment is consistently left-led within a centered content area. The visual language is flat and quiet: no prominent shadows, thin borders, or decorative ornament. The gradient belongs chiefly to the hero; the rest of the page is defined by black space and product demonstrations.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Near Black | `#0a0a0a` | `--color-near-black` | brand | Dominant page canvas and the continuous background behind the feature sections. |
| Quiet Gray | `#919191` | `--color-quiet-gray` | neutral | Muted navigation and secondary text, including low-emphasis labels. |
| Panel Charcoal | `#181818` | `--color-panel-charcoal` | surface | Main charcoal surface for product-preview panels against the dark canvas. |
| Soft White | `#f3f3f3` | `--color-soft-white` | neutral | Primary headings, key body copy, and high-contrast links on dark backgrounds. |
| Silver Gray | `#b6b6b6` | `--color-silver-gray` | neutral | Secondary headings and supporting text where softer contrast is appropriate. |
| Slate Blue | `#5a7694` | `--color-slate-blue` | accent | Dark starting tone of the opening hero gradient; not a recurring interface accent. |
| Misty Blue | `#758da5` | `--color-misty-blue` | accent | Early transition tone in the hero gradient, blending slate blue toward pale gray. |
| Horizon Blue | `#7e96a8` | `--color-horizon-blue` | accent | Mid-gradient hero tone; atmospheric background color rather than a CTA color. |
| Blue Gray | `#9cadb3` | `--color-blue-gray` | accent | Light middle-to-late hero gradient tone behind the opening product preview. |
| Pale Sage | `#abb7b5` | `--color-pale-sage` | accent | Pale, gray-green endpoint of the hero gradient. |
| Graphite Gray | `#606060` | `--color-graphite-gray` | neutral | Low-emphasis text detail, secondary to the brighter body-copy grays. |
| Raised Charcoal | `#262626` | `--color-raised-charcoal` | surface | Deeper secondary surface tone for subtle product-interface layering. |
| Soft Ash | `#9d9d9d` | `--color-soft-ash` | neutral | Occasional muted text tone within supporting interface or product details. |

### Semantic aliases

`--color-canvas` → `#0a0a0a` (Near Black) · `--color-surface` → `#181818` (Panel Charcoal) · `--color-surface-2` → `#262626` (Raised Charcoal) · `--color-text` → `#f3f3f3` (Soft White) · `--color-text-muted` → `#919191` (Quiet Gray) · `--color-text-subtle` → `#b6b6b6` (Silver Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f3f3f3` | `#0a0a0a` | 17.84:1 | AAA |
| `#f3f3f3` | `#181818` | 16:1 | AAA |
| `#f3f3f3` | `#262626` | 13.64:1 | AAA |
| `#919191` | `#0a0a0a` | 6.28:1 | AA |
| `#919191` | `#181818` | 5.63:1 | AA |
| `#919191` | `#262626` | 4.8:1 | AA |
| `#b6b6b6` | `#0a0a0a` | 9.76:1 | AAA |
| `#b6b6b6` | `#181818` | 8.76:1 | AAA |
| `#b6b6b6` | `#262626` | 7.46:1 | AAA |

### Gradients

- `linear-gradient(rgb(90, 118, 148) 0%, rgb(117, 141, 165) 17%, rgb(126, 150, 168) 47%, rgb(156, 173, 179) 75%, rgb(171, 183, 181) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400 | All page typography: hero and feature headings, body copy, navigation, captions, and links. | Inter |

- **Inter:** Regular weight throughout; headings use sentence case except uppercase feature labels. Tracking is mostly neutral, with slightly tight navigation.

### Type scale — Custom (ratio ≈ 2, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | normal | 0 | — | Inter | Main hero headline introducing the email experience. |
| body | 20px | 400 | normal | 0 | — | Inter | Feature descriptions and prominent supporting copy. |
| caption | 13px | 400 | normal | 0 | — | Inter | Small labels, eyebrow text, and understated supporting details. |
| nav | 14px | 400 | normal | -0.007em | — | Inter | Header navigation links. |
| link | 16px | 400 | 1.5 | 0 | — | Inter | Get started calls to action and inline links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 5, 6, 8, 10, 12, 16, 20, 24, 32, 48, 80 px.
- Section rhythm 48px · element gap 12px · card padding — · max content width 1112px.

A centered content area is capped at the measured 1112px maximum width, with left-aligned copy. The hero fills the opening viewport and places its text on the left, while a large tilted product preview enters from the lower right. Feature sections follow in a single-column narrative, using substantial vertical pauses and repeated product panels. The page feels intentionally sparse rather than grid-dense; content is comfortable in density, and measured spacing steps are built around an 8px base unit.

## Shape & elevation

- Radius: link `8px` · xs `6px` · sm `8px` · md `10px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat: no measured shadows and no prominent border treatment. Product demonstrations are separated from the near-black canvas with charcoal surfaces rather than strong outlines. The hero creates depth through its gradient, while the tilted email mockup supplies the main layered effect.

## Imagery

The hero uses a large, angled email-interface mockup that appears to emerge from the lower-right edge over the gradient. Later sections use dark product-preview panels: inbox categories, a text editor, speed graphics, theme samples, and keyboard shortcuts. There is no prominent lifestyle photography; visuals are interface-led, low-contrast, and framed within the page’s dark surfaces.

## Components

### Header navigation

A compact logo and understated links sit across the top of the hero. Navigation text is white, regular-weight Inter, measured at 14px for individual links.

### Hero message

Left-aligned eyebrow and sentence-case headline, followed by a rounded dark Get started link and a quieter inline supporting phrase.

### Hero product preview

A large, diagonally angled email UI mockup enters from the lower right, over the blue-gray-to-pale gradient.

### Feature introduction

Small uppercase feature label followed by a concise headline and muted explanatory copy, aligned to the left.

### Product demonstration panel

Wide, restrained charcoal surface displaying a single product interaction, such as inbox categories or editor controls.

### Get started link

A 16px regular Inter link with a #1d1d1d background, white text, and 8px corner radius.

### Measured component styles

- **Primary button** (“See what makes Tatem different.”): transparent background · text #ffffff · radius 0px · padding 0px · 400 13px Inter
- **Link** (“Get started”): background #1d1d1d · text #ffffff · radius 8px · padding 10px 16px · 400 16px Inter
- **Navigation item** (“Pricing”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Inter

## Do

- Keep the main canvas near-black at #0a0a0a.
- Use Inter with regular weights and restrained hierarchy.
- Reserve the blue-gray gradient for the opening hero.
- Align feature copy to the left and let it breathe.
- Show product functionality in quiet charcoal panels.
- Use off-white for primary text and grays for secondary copy.

## Don't

- Do not carry the hero gradient across every section.
- Do not add colorful CTA treatments or unmeasured accent colors.
- Do not crowd the feature sections into a dense card grid.
- Do not add heavy shadows, outlines, or ornamental borders.
- Do not make supporting copy as bright as the main headline.
- Do not use decorative display fonts or bold-heavy typography.

## Agent prompt

Build a new Tatem-style page with a near-black #0a0a0a canvas and regular-weight Inter throughout. Keep the opening hero visually distinct with a restrained gradient from Slate Blue #5a7694 through Misty Blue #758da5 and Horizon Blue #7e96a8 to pale Blue Gray #9cadb3 and Pale Sage #abb7b5. Place concise, left-aligned white copy beside or above a quiet product-interface preview. Below, return to the dark canvas and organize content as spacious, left-led feature sections with charcoal #181818 product panels and restrained secondary surfaces such as #262626. Use Soft White #f3f3f3 for primary text and Quiet Gray #919191 or Silver Gray #b6b6b6 for supporting text. Keep hierarchy understated, surfaces flat, and demonstrations product-focused. Avoid heavy shadows, dense grids, and invented bright accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport gradient hero; header across the top, copy left, tilted product preview entering from lower right. | Get started CTA, early-access messaging | cool muted gradient, white headline, angled email mockup |
| 2 | other | Tall near-black interstitial with a small centered text link and extensive negative space. | scroll transition, inline exploration link | near-black canvas, tiny centered link |
| 3 | product-showcase | Left-aligned feature introduction above a wide, centered charcoal inbox demonstration. | inbox prioritization, category switching | uppercase eyebrow, muted body copy, dark product panel |
| 4 | product-showcase | Left-aligned feature copy followed by a wide dark editor preview. | faster writing, document-style editing | uppercase eyebrow, charcoal preview panel |
| 5 | feature-split | Feature copy and product visualization arranged across an 11-column measured layout. | speed claim, performance explanation | uppercase eyebrow, dark speed illustration |
| 6 | product-showcase | Left-aligned feature copy above a wide panel showing theme and appearance options. | appearance customization, light and dark modes | uppercase eyebrow, dark preview panel, simple theme samples |
| 7 | product-showcase | Left-aligned feature introduction above a wide panel with a centered keyboard preview. | keyboard-first workflow, shortcut discovery | uppercase eyebrow, keyboard mockup, small shortcut label |

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