# Design Reference - Tatem
> Midnight terminal, cool and precise, with muted blues and command-line restraint.

Theme: dark
Industry: communication
Captured: 2026-05-06T14:00:00.000Z

## Source
- Source: Public source
- Source URL: https://tatem.com
- Original site: https://tatem.com
- License note: Publicly visible design reference metadata. Use as inspiration and token guidance, not as copied brand assets.

## Technical Summary
A calm dark-mode interface with black surfaces, silver text hierarchy, one blue accent, and minimal translucent controls. Useful for focused email, agent inboxes, and quiet terminal-adjacent workflows.

## Tags
- communication
- dark
- terminal
- minimal
- blue-accent

## Colors
| Name | Value | Token | Group | Role |
| --- | --- | --- | --- | --- |
| Twilight Ink | `#000000` | `--color-twilight-ink` | surface | Primary dark background. |
| Polar White | `#ffffff` | `--color-polar-white` | neutral | Primary text. |
| Pewter Mist | `#919191` | `--color-pewter-mist` | neutral | Secondary text and icon strokes. |
| Silver Tone | `#b5b5b5` | `--color-silver-tone` | neutral | Muted headings and body text. |
| Charcoal Black | `#3b3b3b` | `--color-charcoal-black` | surface | Subtle cards and dividers. |
| Cerulean Accent | `#007eed` | `--color-cerulean-accent` | accent | Interactive state and links. |

## Typography
### Inter - `--font-inter`
Single family for dense product UI, labels, tables, and command surfaces.
- Family: `Inter, ui-sans-serif, system-ui, sans-serif`
- Weights: 400, 500, 600
- Sizes: 12px, 13px, 14px, 16px, 20px, 40px
- Line heights: 1.2, 1.4, 1.5

## Spacing
- Base unit: 4px
- Density: comfortable

| Name | Value | Token |
| --- | --- | --- |
| 4 | `4px` | `--spacing-4` |
| 8 | `8px` | `--spacing-8` |
| 12 | `12px` | `--spacing-12` |
| 16 | `16px` | `--spacing-16` |
| 24 | `24px` | `--spacing-24` |
| 32 | `32px` | `--spacing-32` |
| 48 | `48px` | `--spacing-48` |
| 64 | `64px` | `--spacing-64` |

## Radius
- Default: 6px
- Controls: 8px
- Panels: 10px

## Components
### Ghost button
Role: Action
- Translucent white fill
- subtle border
- 8px radius

### Section divider
Role: Structure
- 1px charcoal line
- no shadow
- clear vertical rhythm

## Do
- Use one blue accent only.
- Rely on value contrast and borders.
- Keep typography weight consistent.

## Dont
- Do not add busy textures.
- Do not introduce extra saturated colors.
- Do not use heavy shadows.