---
version: alpha
name: Tatem
description: Precision-engineered email — a near-black canvas with surgically dim surfaces, a single electric-blue accent reserved for action, ultra-tight Inter headings, and a keyboard-first UI where every interaction targets sub-50ms. Minimal, dark, and fast as a thesis.
colors:
  # Canvas + ink
  background: "#08090a"
  surface: "#0e1011"
  surface-soft: "#16191c"
  surface-raised: "#1c2024"
  ink: "#f5f6f7"
  ink-secondary: "#a0a6ad"
  ink-muted: "#6b7178"
  ink-faint: "#454b52"

  # Accent — electric blue, reserved for action
  primary: "#3b82f6"
  primary-hover: "#2f6fe0"
  accent-violet: "#7c6cf0"

  # Split-inbox category accents
  category-important: "#f5a623"
  category-team: "#3b82f6"
  category-calendar: "#7c6cf0"
  category-receipts: "#22c08a"

  # Borders + lines
  border: "#21262b"
  border-strong: "#2e353c"
  divider: "#181b1e"

  # Feedback
  success: "#22c08a"
  danger: "#f0524a"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#08090a"

typography:
  display-hero:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.04
    letterSpacing: -2.56px
  section-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.6px
  sub-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.18px
  body:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0.12px
  button-ui:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.14px
  kbd:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-secondary:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 14px
  badge:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 3px 10px
  kbd:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.kbd}"
    rounded: "{rounded.sm}"
    padding: 3px 7px
    borderColor: "{colors.border-strong}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  list-item:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
  list-item-active:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 9px 12px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    padding: 14px 24px
    borderColor: "{colors.divider}"
  sidebar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    padding: 16px
    borderColor: "{colors.border}"
---

# Tatem Design System

## Overview

Tatem is an email client that treats the inbox like a high-performance instrument, and its website design carries the same conviction: a near-black canvas (`{colors.background}`), surfaces that lift by only a few luminance points, and a single electric-blue accent (`{colors.primary}`) held in reserve for the one thing that matters — action. Nothing here glows for the sake of glowing. The dark mode is not a theme toggle; it is the resting state of a tool built for people who live in their inbox all day and want it to disappear into focus.

The typographic voice is Inter pushed to its tightest setting. Hero text runs at 64px weight 600 with aggressive negative tracking (-2.56px), compressing the headline into something dense and engineered, the way a product page reads when speed is the whole pitch. Below the fold, the type relaxes into a comfortable 15px reading body, but the personality lives at the top: confident, condensed, almost terminal-like. A monospace face (`kbd`) appears wherever the product shows off its keyboard-first soul — shortcut chips, command hints, the little `⌘K` affordances that signal this is a tool for the fast.

What distinguishes Tatem from generic dark SaaS is restraint of color. The split inbox — its signature feature — is the only place the palette opens up, assigning a quiet hue to each category lane: amber for Important, blue for Team, violet for Calendar, green for Receipts. These category accents are functional markers, never decoration. Everywhere else the interface is a study in graphite: surfaces separated by a single low-contrast border (`{colors.border}`), text stepped down through four ink levels, and depth conveyed by luminance alone rather than heavy shadows.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with surgically dim, low-luminance surfaces — depth from brightness, not shadow
- Inter at extreme negative tracking (-2.56px) for hero headlines — compressed, engineered, fast
- A single electric-blue accent (`{colors.primary}`) reserved strictly for primary action
- Functional split-inbox category accents (amber / blue / violet / green) — color as wayfinding, never ornament
- Four-step ink hierarchy on dark (`{colors.ink}` → `{colors.ink-faint}`)
- Monospace keyboard chips (`{components.kbd}`) signalling a keyboard-first product
- Soft 6–16px radii — rounded but tight, never bubbly

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): The near-black page and app canvas. Almost no blue cast.
- **Surface** (`{colors.surface}`): Cards, sidebar, panels — one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Hover and active list rows.
- **Surface Raised** (`{colors.surface-raised}`): Badges, kbd chips, the highest dim layer.
- **Ink** (`{colors.ink}`): Primary text, headings — soft off-white, never pure.
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, nav labels.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, timestamps.
- **Ink Faint** (`{colors.ink-faint}`): Placeholders, disabled states.

### Accent
- **Primary** (`{colors.primary}`): Electric blue. The CTA, focus ring, active accent. Used sparingly.
- **Primary Hover** (`{colors.primary-hover}`): Deeper blue on button hover.
- **Accent Violet** (`{colors.accent-violet}`): Secondary highlight, calendar lane.

### Split-Inbox Categories
- **Important** (`{colors.category-important}`): Amber lane marker.
- **Team** (`{colors.category-team}`): Blue lane marker.
- **Calendar** (`{colors.category-calendar}`): Violet lane marker.
- **Receipts** (`{colors.category-receipts}`): Green lane marker.

### Borders & Lines
- **Border** (`{colors.border}`): Default 1px separation between surfaces.
- **Border Strong** (`{colors.border-strong}`): Inputs, secondary buttons, kbd chips.
- **Divider** (`{colors.divider}`): The faintest line, used under the nav bar.

### Feedback
- **Success** (`{colors.success}`): Confirmation, sent state.
- **Danger** (`{colors.danger}`): Destructive actions, errors.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif`
- **Monospace**: `JetBrains Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, monospace` — used only for keyboard chips and shortcut hints.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 64px hero — maximum compression, the brand statement |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, card group headers |
| `card-title` | Feature cards |
| `body-large` | Hero subtitle, feature intros |
| `body` | Standard reading + UI text |
| `body-medium` | Active rows, emphasized labels |
| `label` | Sidebar items, form labels |
| `caption` | Metadata, badges, timestamps |
| `button-ui` | Buttons and links |
| `kbd` | Keyboard shortcut chips |

### Principles
- **Compression at the top**: Hero uses -2.56px tracking; negative tracking relaxes as size drops to near-zero at body.
- **Two weights mostly**: 400 for reading, 500 for UI/emphasis, 600 reserved for headings. No 700.
- **Mono means keyboard**: The monospace face appears only for shortcuts — it is a product signal, not a decorative choice.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a 4px micro-step for dense list/inbox rows.

### Grid & Container
- Max content width: approximately 1100px on marketing pages
- Hero: centered single column with generous top padding
- App UI: persistent left sidebar + split inbox columns + reading pane
- Feature sections: 2–3 column grids on dark cards

### Whitespace Philosophy
- **Dark calm**: Large vertical gaps (`{spacing.3xl}`–`{spacing.4xl}`) between sections let the near-black breathe.
- **Dense where it counts**: Inbox rows tighten to 4–12px rhythm — the tool is information-dense by design, the marketing is airy.
- **Separation by luminance**: Surfaces are distinguished by brightness steps and 1px borders, rarely by shadow.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `{colors.background}`, no border | Page canvas, text blocks |
| Surface (Level 1) | `{colors.surface}` + 1px `{colors.border}` | Cards, sidebar, panels |
| Hover (Level 2) | `{colors.surface-soft}` | Active/hovered list rows |
| Raised (Level 3) | `{colors.surface-raised}` | Badges, kbd chips |
| Focus (Accessibility) | 1px `{colors.primary}` border + soft outer ring | Keyboard focus on inputs and interactive elements |

**Shadow Philosophy**: Tatem barely uses shadow. On a near-black canvas, elevation reads through luminance — each surface layer is a few points brighter than the one beneath it, with a single hairline border to define the edge. When shadow appears (floating command palette, dropdowns) it is large, soft, and very dark, felt more than seen.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections |
| `xs` | 4px | Inline chips, tags |
| `sm` | 6px | kbd chips, small controls |
| `md` | 8px | Buttons, inputs, list rows |
| `lg` | 12px | Cards, panels |
| `xl` | 16px | Large feature cards, modals |
| `pill` | 9999px | Badges, category dots, avatars |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Electric blue fill, white text, `{rounded.md}`. The single loud element on the page.
- **`button-secondary`** — Dim surface with `{colors.border-strong}` outline.
- **`button-ghost`** — Transparent over canvas, secondary-ink text. For low-priority actions.

### Pills & Chips
- **`badge`** — Raised dim surface, secondary ink, full pill. Status and category counts.
- **`kbd`** — Monospace keyboard chip with a strong border. The signature affordance.

### Cards
- **`card`** — `{colors.surface}` with a single `{colors.border}` hairline, 12px radius. Feature blocks.

### Inputs
- **`input`** — Dim surface, strong border; focus swaps the border to `{colors.primary}`.

### Lists
- **`list-item`** / **`list-item-active`** — Inbox rows. Active state lifts to `{colors.surface-soft}` and bumps text to medium weight.

### Navigation
- **`nav-bar`** — Transparent over canvas, faint divider below, secondary-ink links, blue CTA right.
- **`sidebar`** — `{colors.surface}` panel with label-sized items; the home of the split-inbox lanes.

## Do's and Don'ts

### Do
- Keep the canvas near-black and let surfaces lift by luminance, not shadow
- Reserve `{colors.primary}` for the single most important action on a view
- Use category accents only as functional inbox wayfinding
- Use Inter with strong negative tracking at display sizes
- Show keyboard shortcuts in the monospace `kbd` chip — it is core to the brand
- Step text through the four ink levels for hierarchy on dark

### Don't
- Don't introduce gradients or glows into UI chrome — Tatem is matte, not neon
- Don't use pure black (`#000`) or pure white (`#fff`) for canvas/text — both are softened
- Don't spread the blue accent across decorative elements
- Don't use category colors outside the split-inbox context
- Don't lean on heavy drop shadows for elevation — luminance steps do the work
- Don't use weight 700 — 600 is the ceiling

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, sidebar collapses to a bottom bar or sheet |
| Tablet | 600–1024px | Two-pane inbox, condensed sidebar |
| Desktop | 1024–1280px | Full sidebar + split inbox + reading pane |
| Large | >1280px | Centered marketing content, generous margins |

### Touch Targets
- Buttons use comfortable 10px vertical padding
- Inbox rows give adequate tap height despite dense visual rhythm
- kbd chips are display-only on touch; replaced by tap affordances on mobile

### Collapsing Strategy
- Hero: 64px → scales down, keeps proportional negative tracking
- App: three-pane → two-pane → single pane with navigation drawer
- Feature cards: 3-column → 2-column → single column
- Sidebar: persistent → drawer/bottom bar on mobile

### Image Behavior
- Product screenshots are shown in dark frames matching the canvas, with a 1px `{colors.border}` edge
- App captures retain their rounded `{rounded.lg}` corners at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Electric Blue `{colors.primary}`
- Background: Near-black `{colors.background}`
- Surface: `{colors.surface}` with 1px `{colors.border}`
- Heading text: `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Focus ring: `{colors.primary}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline 64px Inter weight 600, line-height 1.04, letter-spacing -2.56px, color `{colors.ink}`. Subtitle 18px weight 400, color `{colors.ink-secondary}`. Electric-blue CTA (`{colors.primary}`, 8px radius, 10px 18px padding) plus a ghost button."
- "Design a feature card: `{colors.surface}` background, 1px `{colors.border}`, 12px radius, 24px padding. Title 20px Inter weight 600 `{colors.ink}`, body 15px weight 400 `{colors.ink-secondary}`."
- "Build a keyboard chip: `{colors.surface-raised}` background, 1px `{colors.border-strong}`, 6px radius, JetBrains Mono 12px, `{colors.ink-secondary}` text."
- "Create a split-inbox sidebar: `{colors.surface}` panel, label-sized items, four category lanes marked Important (amber), Team (blue), Calendar (violet), Receipts (green). Active row lifts to `{colors.surface-soft}`."

### Iteration Guide
1. Canvas stays near-black; surfaces lift by luminance, separated by a single hairline border
2. Negative tracking scales with size — strong at hero, near-zero at body
3. One accent: electric blue for action only
4. Category colors are wayfinding, confined to the split inbox
5. Monospace only for keyboard chips — it is the product's signature
6. Avoid gradients, glows, and heavy shadow — Tatem is matte and engineered

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Tatem. Brand names and trademarks belong to their respective owners.