---
name: Temporal
description: "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."
version: alpha

colors:
  background: "#141414"
  primary: "#F8FAFC"
  secondary: "#CACBF9"
  tertiary: "#7F86F1"
  neutral: "#92A4C3"
  bg-soft: "#1E1E1E"
  line: "rgba(36, 51, 73, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 68px
    lineHeight: 1.1
    fontWeight: 300
    letterSpacing: "-2px"
  h1:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.15
    fontWeight: 300
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.2px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

An open-source platform for building and running reliable distributed applications and AI agents.

*The operating system for AI agents and complex distributed systems*

## Colors

Dark mode first with high-contrast white text and vibrant purple/blue accents

- **Background (`#141414`)** — uses `bg` token
- **Primary text (`#F8FAFC`)** — uses `ink` token
- **Secondary text (`#CACBF9`)** — uses `ink-soft` token
- **Accent (`#7F86F1`)** — uses `accent` token
- **Muted (`#92A4C3`)** — uses `muted` token
- **Borders (`rgba(36, 51, 73, 1)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* Generous vertical padding (96px) between major sections

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Primary buttons are purple gradient (#7F86F1 to #B664FF), pill-shaped with white text; secondary buttons are outline/ghost with white text
- **card:** Dark semi-transparent cards with subtle 1px borders and no visible background color differentiation
- **chip:** Language tabs (PYTHON, GO, etc.) as simple text tabs with underline indicator
- **input:** Search icon in header, minimal styling
- **hero:** Large split-screen hero with headline, body text, CTA buttons on left, and a dark code editor window on right

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```