# Temporal · Design system migration spec

> Source: https://temporal.io  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a modern, dark-mode-first developer tool UI, effectively using typography and code-first visuals to build credibility with a technical audience.

## 1. Identity DNA

If Temporal is the operating system for AI agents and complex distributed systems, then its design system is the underlying kernel—silent, precise, and built for absolute reliability under load. This is infrastructure made visible, where every visual choice reinforces the platform's core promise of deterministic control in a chaotic landscape.

**One-liner:** An open-source platform for building and running reliable distributed applications and AI agents.
**Keywords:** Temporal · AI · Workflows · Developer Platform
**Analogy:** The operating system for AI agents and complex distributed systems

## 2. Color

The palette is a deliberate exercise in high-contrast legibility, anchored by a near-black ground that recedes completely to let the white interface text and vibrant purple-to-blue gradients command the foreground. Accents are not decorative highlights but functional signposts, guiding the eye through complex documentation with the clarity of a well-lit terminal.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#141414` | main background |
| `--bg-soft` | `#1E1E1E` | card background |
| `--ink` | `#F8FAFC` | body text |
| `--ink-soft` | `#CACBF9` | secondary text |
| `--muted` | `#92A4C3` | placeholder |
| `--accent` | `#7F86F1` | single accent |
| `--line` | `rgba(36, 51, 73, 1)` | divider |

**Color principle:** Dark mode first with high-contrast white text and vibrant purple/blue accents

The principle is simple: the interface should feel like a reliable, dark-mode IDE—immersive, high-contrast, and optimized for prolonged focus on code and concepts.

## 3. Typography

Typographic voice is split between the geometric-sans Aeonik for the UI, which carries the platform's confident tone in light, airy weights for headlines, and the dedicated monospace Noto Sans Mono, which gives code examples their own authoritative, legible space. The scale is tight and functional, building from hero headlines down to clear body text for documentation.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 68px | 1.1 | 300 | -2px | Hero headline |
| h1 | 48px | 1.15 | 300 | -1px | Section headline |
| body | 16px | 1.5 | 400 | 0.2px | Body text |

## 4. Spacing

The vertical rhythm is architectural, with 96px of generous padding between major sections creating clear, unhurried breaks that allow complex information to be absorbed in discrete blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding (96px) between major sections

## 5. Surfaces

Surfaces are treated as minimal, depth-less planes, defined more by subtle borders and selective shadows than by filled backgrounds. The dark semi-transparent cards and crisp 1px borders create just enough separation to establish hierarchy without adding visual noise.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.25) 0px 25px 50px -12px
  - rgb(0, 0, 0) 8px 8px 0px 0px
- **Borders:** 1px solid rgb(36, 51, 73)

## 6. Layout

The foundational skeleton is a full-width, split-screen hero: the left column holds declarative copy and action, while the right presents a dark code editor window, immediately establishing the platform's code-first ethos. Below, a structured card grid extends this logic, organizing features and documentation into scannable, bordered modules.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width dark hero with split layout, text left, code block right; card grid below

## 7. Motion & Interaction

Motion is restrained and purposeful, applied as a polish layer rather than a narrative device. Smooth transitions and subtle fades confirm user actions and guide focus without ever disrupting the professional, tool-like demeanor of the interface.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background-color transitions on hover
  - Opacity fade-ins for page load animations
  - Transform shifts for interactive elements

- **Hover:** Text color transitions to brighter white or accent color, buttons increase brightness
- **Click:** Subtle opacity or scale reduction
- **Transition:** 150ms ease-out for standard UI elements, 300ms for complex transitions
- **Keyboard:** Standard focus outlines for navigation

## 8. Voice & Don'ts

The editorial voice is authoritative and technical, confident enough to state capabilities directly ('Get Started for Free', 'Run Locally') without embellishment or whimsical language. It avoids jargon for its own sake, favoring clarity and directness that respects the developer's time and expertise.

- **Tone:** Authoritative, technical, and confident
- **Headline style:** Short, punchy, and declarative with light font weight
- **CTA style:** Direct and action-oriented (e.g., 'Get Started for Free', 'Run Locally')
- **Avoid:** Jargon without context / Playful or whimsical language / Overly complex sentence structures

### Don'ts
- ❌ don't use a white background — screenshot shows a very dark, near-black (#141414) background
- ❌ don't use heavy font weights for headlines — screenshot shows light (300) weight for large display text
- ❌ don't use standard web fonts like Inter — screenshot uses Aeonik (geometric-sans) for UI and Noto Sans Mono for code
- ❌ don't use sharp corners everywhere — screenshot shows pill-shaped buttons (9999px radius) and rounded cards (12px)
- ❌ don't use a single flat accent color — screenshot shows gradients in buttons (purple to blue) and background elements
- ❌ don't use small, cramped spacing — screenshot shows generous 96px vertical padding between major sections

It deliberately avoids playful or whimsical tone, light backgrounds, and heavy font weights—rejecting visual noise in favor of a singular, focused aesthetic of controlled precision.

## System Prompt (paste into AI tool)

```
Temporal.io is a dark-mode developer platform for building reliable distributed systems and AI agents. The design relies on a near-black background (#141414) with crisp white text (#F8FAFC) and vibrant purple/blue accents (#7F86F1, #B664FF) often applied as gradients. Typography is dominated by a geometric-sans category (Aeonik) used in light weights (300) for large, impactful headlines with tight tracking, paired with a dedicated monospace font for code examples. Critical donts: Do not use light backgrounds or dark text. Do not use heavy font weights for headlines. Do not use a single flat color for primary buttons—gradients are preferred. Do not use small font sizes for key headlines. Do not use sharp corners on primary action elements like buttons. Do not use cluttered layouts; maintain generous whitespace and padding.
```
