---
version: alpha
name: "Temporal"
website: "https://temporal.io"
description: >-
  A durable-workflow infrastructure brand whose marketing page runs an ink-black canvas with a
  purple-to-indigo gradient voltage (from #b664ff to #444ce7) deployed exclusively inside hero
  gradient bands and feature illustrations, leaving the dominant surface at near-true-black
  #141414. The system runs Aeonik — a custom geometric sans — at weight 300 across every tier
  including the 68px display hero, paired with Noto Sans Mono for all interactive CTAs and code
  surfaces. Enterprise-dark restraint: one gradient stripe, one mono typeface for buttons, and
  no rounded corners anywhere except pill badges.

seo:
  title: "Temporal Design System for React — black canvas, Aeonik light, purple gradient, 17 components"
  metaDescription: "Temporal's marketing-site design system as DESIGN.md. Near-black #141414 canvas, Aeonik weight-300 display at 68px, purple-indigo gradient voltage, Noto Sans Mono buttons, 16 color tokens, 17 components. For React, Next.js, AI tools."
  highlights:
    - "Weight-300 across all tiers — Aeonik renders every tier from 68px hero to 12px caption at light weight, the most extreme typographic restraint in the enterprise dev-tools category"
    - "Mono buttons — Noto Sans Mono carries CTA labels, not a sans; the monospace voice signals infrastructure authenticity over marketing warmth"
    - "Zero corner rounding — the entire marketing surface has no rounded cards, no rounded inputs, no rounded sections; the only radius is 9999px on the single pill CTA"
    - "Purple-indigo gradient as the brand's only chromatic moment — #b664ff to #444ce7 appears in the hero gradient band and feature illustrations but never as a flat color fill on any CTA or card"
    - "Near-true-black canvas — #141414 rather than the tinted dark blues that Linear and Vercel use; text reads as near-white #f8fafc across the full page"
  tags:
    - "Backend, Database & DevOps"
    - "Developer Tools & IDEs"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Temporal's marketing page holds one temperature across the entire scroll: near-true-black.
    The canvas is #141414, not the slightly-blue charcoal that Linear and Vercel use, not the
    navy that Storybook deploys — true near-black with near-white text on every surface. The hero
    headline "What if your code never failed?" sits at 68px in Aeonik weight 300, a light-weight
    display choice that goes against every enterprise infrastructure convention. No CTA uses the
    brand's purple-indigo gradient as a fill; the gradient runs only through the hero background
    band and inside product-feature illustrations. The primary CTA is a pill shape with no gradient,
    no color — just a white pill on the near-black canvas.

    The DESIGN.md file packages the system into a machine-readable spec for React and AI tools.
    Inside: 16 color tokens organized around a true-black canvas, a slate-blue-gray hairline
    dominant at 467 occurrences, two brand gradient hues (violet #b664ff and indigo #444ce7), and
    a neon-yellow accent (#dbff4b) that appears in exactly five places as a status signal and text
    highlight. Twelve typography tokens run Aeonik at weight 300 across every tier — display to
    caption — with Noto Sans Mono as the system's second voice for CTAs, code panels, and
    interactive labels. The radius system has exactly one value: 9999px pill, used once on the
    primary CTA. Everything else is square.

    Feed this file to Claude or Cursor and it reproduces Temporal's disciplined moves: near-black
    canvas, light-weight display that signals confidence through restraint rather than mass,
    monospace buttons that read as infrastructure rather than marketing, and a gradient that stays
    inside illustrations rather than decorating the chrome. The key learning from this system is
    that a gradient does not have to touch the CTA to register as the brand's chromatic signal —
    Temporal proves a gradient can live in the background and still define the visual identity.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://temporal.io"
      title: "Temporal — official site"
      description: "Temporal's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Temporal's primary brand color?"
      answer: "Temporal's brand voltage is a purple-to-indigo gradient running from violet #b664ff to deep indigo #444ce7. Both hues are tagged as brand-layer colors in the extraction and each appears 14 times in gradient roles. Neither hue appears as a flat fill on any CTA, card, or text element — the gradient lives in the hero background band and inside product-feature illustrations. There is also a neon-chartreuse accent (#dbff4b) that appears 5 times as a text highlight and button tint; it functions as a secondary signal for 'things are working' moments in the product narrative."
    - id: "typography"
      title: "What typeface does Temporal use, and what is the weight strategy?"
      answer: "Temporal runs Aeonik — a custom geometric sans — at weight 300 across every display, body, and caption tier. The 68px hero headline is weight 300; the 24px body copy is weight 300; the 12px captions are weight 300. This is the most extreme weight restraint in the enterprise-infrastructure category: Cloudflare holds at 500, Stripe at 300 for display only but 400 for body. Temporal applies 300 universally. The second typeface is Noto Sans Mono, used for CTA button labels (monospace on buttons is the brand's infra-authenticity signal) and all code surfaces. The closest substitute for Aeonik is Inter at weight 300; for Noto Sans Mono, JetBrains Mono transfers cleanly."
    - id: "corner-radius"
      title: "Why does Temporal use no corner rounding on most surfaces?"
      answer: "The extraction captures only one radius value with meaningful frequency: 9999px, appearing 5 times on the pill CTA. Every other surface — cards, code panels, feature sections, input fields, the nav bar — renders at 0px radius. This is a deliberate signal: square corners at this scale communicate infrastructure seriousness, the kind of system you'd trust with production workflows. The single pill CTA exception creates a focal contrast — everything is square except the one thing you're supposed to click."
    - id: "mono-buttons"
      title: "Why does Temporal use a monospace typeface for its CTA buttons?"
      answer: "The CTA button labels on temporal.io use Noto Sans Mono — the system's code-surface typeface — rather than the display Aeonik. This is the brand's authenticity signal: monospace is the language of the terminal, of infrastructure, of things that actually run code. Rendering a 'Talk to an expert' button in mono tells the developer audience that the product lives closer to the machine than to the marketing page. Where Storybook uses Nunito Sans (warm, rounded) for buttons and Cloudflare uses FT Kunst Grotesk (editorial), Temporal reaches for the typeface developers trust most: the typeface their IDE uses."
    - id: "neon-chartreuse"
      title: "What is the neon-chartreuse color used for?"
      answer: "The neon-chartreuse yellow-green (#dbff4b, merged from #dbff4b and #c3ff62) appears 5 times on the captured page — 3 times as text and once each as background and gradient. It functions as the brand's 'signal-green' equivalent: the color that means 'this is working / this succeeded / this is the good path.' It appears in the product narrative sections to highlight positive workflow outcomes. It is explicitly a brand-layer color in the extraction and wired into several CSS custom properties. The frequency is intentionally low — it registers as a flash of good news rather than a page-wide accent."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#444ce7"
  primary-violet: "#b664ff"
  accent-lime: "#dbff4b"
  canvas: "#141414"
  canvas-deep: "#07090d"
  surface-1: "#243349"
  surface-2: "#374761"
  ink: "#f8fafc"
  ink-muted: "#92a4c3"
  ink-subtle: "#465a78"
  hairline: "#7c8fb1"
  hairline-dark: "#243349"
  syntax-function: "#cacbf9"
  syntax-mint: "#59fda0"
  syntax-pink: "#ff6bff"
  status-success: "#34d399"

typography:
  display-xl:
    fontFamily: "Aeonik, ui-sans-serif, system-ui, sans-serif"
    fontSize: 68px
    fontWeight: 300
    lineHeight: 74.8px
    letterSpacing: "-2px"
  display-lg:
    fontFamily: "Aeonik, ui-sans-serif, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 38.4px
    letterSpacing: 0
  heading-md:
    fontFamily: "Aeonik, ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 300
    lineHeight: 38.4px
    letterSpacing: "0.2px"
  body-lg:
    fontFamily: "Aeonik, ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 300
    lineHeight: 38.4px
    letterSpacing: "0.2px"
  body-md:
    fontFamily: "Aeonik, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 28px
    letterSpacing: 0
  body-sm:
    fontFamily: "Aeonik, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 24px
    letterSpacing: 0
  body-xs:
    fontFamily: "Aeonik, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 20px
    letterSpacing: "0.35px"
  caption:
    fontFamily: "Aeonik, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 16px
    letterSpacing: 0
  button-md:
    fontFamily: "\"Noto Sans Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0
  nav-link:
    fontFamily: "Aeonik, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  code-md:
    fontFamily: "\"Noto Sans Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  label-mono:
    fontFamily: "\"Noto Sans Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: "-0.4px"

rounded:
  none: "0px"
  full: "9999px"

spacing:
  xs: "8px"
  sm: "12px"
  base: "16px"
  md: "20px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
  4xl: "96px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "12px 24px"
    height: "52px"
    border: "0"
  button-primary-hover:
    backgroundColor: "{colors.ink-muted}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "12px 24px"
    height: "52px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "12px 24px"
    height: "52px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "16px 24px"
    height: "80px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0"
    height: "20px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.body-lg}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
  hero-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    padding: "96px 0px"
    rounded: "{rounded.none}"
  card:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "24px"
    borderColor: "{colors.hairline-dark}"
  code-block:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.code-md}"
    rounded: "{rounded.none}"
    padding: "24px"
  text-input:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "8px"
    height: "40px"
  feature-illustration:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: "32px"
  logo-lockup:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-xs}"
    padding: "16px 0px"
  badge-lime:
    backgroundColor: "{colors.accent-lime}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.full}"
    padding: "4px 12px"
  footer:
    backgroundColor: "{colors.canvas-deep}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-xs}"
    padding: "64px 24px"
---

## Overview

Temporal's marketing page runs on a single disciplined dark register from top to bottom. **Weight-as-confidence**: the 68px hero headline "What if your code never failed?" renders in Aeonik weight 300 — the lightest display weight in the enterprise-infrastructure category. Where Cloudflare signals authority at weight 500 and AWS relies on weight 700, Temporal holds at 300 across every tier from the hero display to the 12px caption. The brand's thesis is that a system confident enough to handle production workflow failures doesn't need typographic muscle to make its case.

**Monospace buttons as infrastructure signal**: the primary CTAs on temporal.io use Noto Sans Mono rather than the display Aeonik. This is the system's most distinctive move — rendering "Talk to an expert" and "Try Temporal Cloud" in a code-surface typeface signals to the developer audience that this product lives closer to the terminal than to the marketing page. Not Cloudflare's editorial grotesk, not Storybook's humanist rounded sans — the typeface your IDE uses. The gradient voltage (violet #b664ff to indigo #444ce7, both brand-layer colors) stays inside the hero gradient band and product-feature illustrations, never touching the CTA chrome.

The shape language is **square-or-pill with nothing in between**: 0px radius everywhere except the one pill badge. No 6px, no 12px, no softened card corners. The squareness reinforces the infrastructure-seriousness signal; the single pill exception (the accent-lime badge) is the only organic shape on the page.

**Key Characteristics:**
- Near-true-black `{colors.canvas}` (#141414) — not the tinted dark blues of Linear and Vercel; maximum text contrast with near-white `{colors.ink}` (#f8fafc).
- Aeonik weight 300 across every typographic tier — display, heading, body, caption all share the same light weight. No semibold or bold tier on the marketing surface.
- Noto Sans Mono for CTA button labels — monospace type on interactive elements is the brand's infrastructure-authenticity signal.
- Purple-to-indigo gradient (`{colors.primary-violet}` through `{colors.primary}`) confined to hero background and illustration fills; never applied as a flat color fill on chrome.
- Neon-chartreuse accent `{colors.accent-lime}` (#dbff4b) — 5 total occurrences, used as a "success signal" highlight in product narrative sections.
- Slate-blue-gray `{colors.hairline}` (#7c8fb1) dominates borders at 467 occurrences — every card edge, grid line, and section divider uses this single mid-tone.
- Binary radius: 0px everywhere, 9999px pill on the accent badge. The squareness is deliberate.

## Colors

### Brand Gradient

- **Primary Indigo** (`{colors.primary}` — #444ce7): frequency 14, all as gradient fills. The deeper end of the brand gradient, wired as `--color-surface-brand`, `--color-interactive-surface`. Does not appear as a flat fill on any interactive surface.
- **Primary Violet** (`{colors.primary-violet}` — #b664ff): frequency 14, all as gradient fills. The lighter, more saturated end of the brand gradient. Paired with `{colors.primary}` to form the purple-to-indigo sweep in the hero band.
- **Accent Lime** (`{colors.accent-lime}` — #dbff4b): frequency 5. Used as text (3), background (1), gradient (1). The system's "success signal" — the neon-chartreuse moment in product narrative sections that says "your workflow succeeded."

### Surface

- **Canvas** (`{colors.canvas}` — #141414): frequency 48. The dominant surface — background fills (17), gradient fills (22), text (9). The page floor, wired as `--color-surface-background`. Near-true black; not pure black but as close as the system gets.
- **Canvas Deep** (`{colors.canvas-deep}` — #07090d): frequency 1. The footer surface — slightly deeper than the canvas for a subtle visual terminus.
- **Surface-1** (`{colors.surface-1}` — #243349): frequency 9, all as borders. Wired as `--color-surface-table`, `--shiki-color-background`. The elevated dark surface for code panels, feature cards, and the syntax-highlighted code section.
- **Surface-2** (`{colors.surface-2}` — #374761): frequency 5. A mid-dark elevated surface, wired as `--color-surface-subtle`, `--color-interactive-secondary-active`.

### Text

- **Ink** (`{colors.ink}` — #f8fafc): frequency 346 — dominant text color. Near-white on the near-black canvas. Wired as `--color-text-primary`, `--shiki-color-text`. The single text color for all headline, body, and nav copy on the dark surfaces.
- **Ink Muted** (`{colors.ink-muted}` — #92a4c3): frequency 38 — mid-lightness slate-blue for secondary text, descriptions, and muted metadata.
- **Ink Subtle** (`{colors.ink-subtle}` — #465a78): frequency 5. Tertiary text, wired as `--color-text-subtle`, `--color-text-secondary`.

### Hairlines

- **Hairline** (`{colors.hairline}` — #7c8fb1): frequency 467 — the dominant border tone. 464 border occurrences. Every card edge, grid line, feature divider, and section rule uses this single slate-blue-gray. Wired as `--color-border-primary`.
- **Hairline Dark** (`{colors.hairline-dark}` — #243349): frequency 9, all as borders. Used for borders on the code-surface dark cards.

### Syntax

- **Syntax Function** (`{colors.syntax-function}` — #cacbf9): frequency 58, all as text. Wired as `--shiki-token-function`. Lavender-blue code tokens in the inline syntax-highlighted examples.
- **Syntax Mint** (`{colors.syntax-mint}` — #59fda0): frequency 6. Wired as `--shiki-token-constant`. Mint-green code constants.
- **Syntax Pink** (`{colors.syntax-pink}` — #ff6bff): frequency 7. Wired as text color; a hot-pink code-surface token.
- **Status Success** (`{colors.status-success}` — #34d399): frequency 3. A mid-saturation green used for success-state indicators in product narrative sections.

## Typography

### Font Families

The system runs two voices: **Aeonik** (a custom geometric sans, fallback `ui-sans-serif, system-ui, sans-serif`) for every editorial surface — display, heading, body, caption, nav — and **Noto Sans Mono** (fallback `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`) for every code-adjacent surface — CTA buttons, interactive labels, code panels. The defining rule of the type system is that Aeonik never rises above weight 300 on the marketing surface; 300 is both the lightest and heaviest weight the system uses.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 68px | 300 | 74.8px | -2px | Hero h1 ("What if your code never failed?") |
| `{typography.display-lg}` | 32px | 400 | 38.4px | 0 | Section h2 headings |
| `{typography.heading-md}` | 24px | 300 | 38.4px | 0.2px | Sub-section leads |
| `{typography.body-lg}` | 24px | 300 | 38.4px | 0.2px | Primary body / lead paragraph |
| `{typography.body-md}` | 20px | 300 | 28px | 0 | Secondary body copy |
| `{typography.body-sm}` | 16px | 300 | 24px | 0 | Default running text |
| `{typography.body-xs}` | 14px | 300 | 20px | 0.35px | Caption, metadata |
| `{typography.caption}` | 12px | 300 | 16px | 0 | Smallest labels, footnotes |
| `{typography.button-md}` | 18px | 400 | 28px | 0 | CTA button labels (Noto Sans Mono) |
| `{typography.nav-link}` | 14px | 400 | 20px | 0 | Top-nav link labels (Aeonik) |
| `{typography.code-md}` | 14px | 400 | 20px | 0 | Inline code (Noto Sans Mono) |
| `{typography.label-mono}` | 16px | 500 | 24px | -0.4px | Interactive labels, uppercase mono (Noto Sans Mono) |

### Principles

Weight 300 universally — not weight 400 for body, not weight 700 for display. The -2px letter-spacing on the 68px hero headline is the only typographic compression in the system; all other tiers track normally. The mono typeface at weight 400 on CTAs is the system's single weight exception: the button is the only surface where 400 reads rather than 300.

### Note on Font Substitutes

Aeonik is a licensed typeface from Aeonik foundry. **Inter** at weight 300 with `font-optical-sizing: auto` is the most practical substitute; it reads similarly at body sizes though it lacks Aeonik's slightly wider geometric proportions at display. For the mono voice, **Noto Sans Mono** is open-source and freely available from Google Fonts; **JetBrains Mono** is a close alternative with slightly more technical character.

## Layout

### Spacing System

- **Base unit:** 8px.
- **Tokens:** `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px · `{spacing.4xl}` 96px.
- **Section padding (vertical):** 96px top/bottom on major sections.
- **Card internal padding:** `{spacing.lg}` (24px) on feature cards and code panels.
- **Nav padding:** 16px vertical, 24px horizontal.

### Grid & Container

- **Max content width:** ~1280px on the hero text; feature sections constrain to ~960px two-column.
- **Hero:** full-bleed near-black canvas with the gradient band behind. Hero text left-aligned, code panel right-aligned in a 50/50 split.
- **Feature sections:** alternating 50/50 text-left/visual-right or text-right/visual-left layouts.
- **Logo wall:** single-row integration logos (AWS, Kubernetes, TypeScript, Golang, Java, Databricks, etc.) at muted `{colors.ink-muted}` opacity.

### Rhythm

The page holds one dark register across all sections — no light interlude, no alternating background bands. Sections are divided by `{colors.hairline}` (slate-blue-gray) horizontal rules at 1px. The rhythm is horizontal-rule-only rather than background-color shifts; the entire scroll feels like one continuous dark editorial.

## Elevation

The system has **no shadow tier**. On a near-true-black canvas, shadows are invisible regardless of value. Elevation comes entirely from surface-color contrast: `{colors.surface-1}` (#243349) cards against the `{colors.canvas}` (#141414) floor. The slate-blue border `{colors.hairline}` (#7c8fb1) is the single edge-defining element — 467 occurrences, almost all borders. No tinted shadows, no glow effects.

## Shapes

The radius scale is **binary**: 0px everywhere, pill on one surface.

- `{rounded.none}` 0px — every card, every input, every section, every panel, the nav bar, the footer. The square corners are the system's infrastructure-seriousness signal.
- `{rounded.full}` 9999px — the accent-lime badge only. The single organic shape on the page.

The system's decision to use 0px corners everywhere is distinct from the 3–8px small-step tiers that Cloudflare and Storybook use, and from the generous-soft 16px defaults of Spline. Square corners at this scale read as "production infrastructure" rather than "consumer product."

## Components

**`button-primary`** — White `{colors.ink}` fill, dark text, Noto Sans Mono `{typography.button-md}`, full pill `{rounded.full}`, 12×24px padding, 52px height. The mono typeface on the button is the brand's most distinctive component-level move.

**`button-primary-hover`** — Shifts to `{colors.ink-muted}` background; otherwise identical.

**`button-secondary`** — Transparent fill, near-white text, 1px `{colors.hairline}` border, full pill, same dimensions. Used for secondary CTAs.

**`top-nav`** — Transparent over the canvas, 80px height (`--site-nav-height: 5rem`), 16×24px padding. Houses the Temporal wordmark, product links (Product, Cloud, Community, About, Blog), and right-aligned "Talk to an expert" + "Log in" cluster.

**`nav-link`** — Transparent, black text (`{colors.canvas}` — the nav renders on a lighter background variant), `{typography.nav-link}` (14px / 400), no rounded corners, no padding.

**`hero-heading`** — Near-white text at `{typography.display-xl}` (68px / 300 / -2px tracking). "What if your code never failed?" — the entire brand proposition in one light-weight question.

**`section-heading`** — `{typography.display-lg}` (32px / 400), near-white. Section leads like "New features for Building & Scaling AI."

**`body-paragraph`** — `{typography.body-lg}` (24px / 300). The primary reading voice for all below-fold copy.

**`body-paragraph-muted`** — `{colors.ink-muted}` text at `{typography.body-sm}` for secondary descriptions.

**`hero-section`** — Near-black `{colors.canvas}` fill, 96px vertical padding. The purple-indigo gradient band runs as a background layer behind the text, not as a surface fill.

**`card`** — `{colors.surface-1}` fill, near-white text, no rounded corners, 24px padding, 1px `{colors.hairline-dark}` border. Used for feature cards, product-capability panels, and the workflow diagram tiles.

**`code-block`** — `{colors.surface-1}` fill, syntax-colored text in `{typography.code-md}`, no rounded corners, 24px padding. The code panels show Go and TypeScript workflow examples; syntax colors use Shiki's dark theme (lavender for functions, mint for constants, pink for special tokens).

**`text-input`** — White `{colors.ink}` fill, dark text, `{typography.body-sm}`, no rounded corners, 8px padding, 40px height. The email/newsletter input field in the conversion sections.

**`feature-illustration`** — `{colors.surface-1}` square panel holding the workflow diagram animations. Square corners, 32px padding; the internal animation uses the brand gradient voltage.

**`logo-lockup`** — Transparent surface, `{colors.ink-muted}` text, `{typography.body-xs}` size. Integration partner logos rendered at muted opacity — AWS, Kubernetes, TypeScript, Java, etc.

**`badge-lime`** — Neon-chartreuse `{colors.accent-lime}` fill, dark text, Noto Sans Mono `{typography.label-mono}`, full pill, 4×12px padding. The one organic rounded element on the page; used for "NEW" and feature-highlight callouts.

**`footer`** — Deep canvas `{colors.canvas-deep}`, muted text `{colors.ink-muted}`, 64×24px padding. No surface contrast from the page floor — the footer continues the near-black without visual break.

## Do's and Don'ts

**Do** hold Aeonik at weight 300 across every tier, including the hero display. The lightness is the brand's confidence signal — adding weight 700 for "impact" undercuts the entire "infrastructure that handles failure" narrative.

**Do** use Noto Sans Mono for CTA button labels. The mono typeface is not a font nerd's preference — it is the brand's signal that the product lives where developers live. A sans CTA would erase the distinction.

**Do** use `{colors.hairline}` (#7c8fb1) as the single border tone across the entire page. The 467-occurrence frequency makes this slate-blue-gray the structural definition of the system; introducing a second hairline tone would fracture the grid.

**Do** confine the purple-indigo gradient to background bands and illustration fills. The gradient is the brand's chromatic identity precisely because it does not touch the interactive surfaces — keeping it in the background lets the near-white text and mono buttons carry the chrome.

**Don't** add corner rounding to cards, code panels, or input fields. The 0px radius is architectural — it signals production infrastructure. Adding 6px or 12px rounding would soften the system toward a consumer-product aesthetic the brand explicitly does not want.

**Don't** use `{colors.syntax-function}` (#cacbf9), `{colors.syntax-mint}` (#59fda0), or `{colors.syntax-pink}` (#ff6bff) outside code blocks. These are Shiki syntax-highlighting tokens, not brand accents; applying them to card fills or section headings would read as a system error.

**Don't** apply the accent-lime `{colors.accent-lime}` (#dbff4b) as a primary CTA background or section fill. It appears 5 times on the page as a deliberate flash; saturating the page with it would turn a success signal into a wall of neon.

**Don't** introduce tinted shadows or glow effects. The system has zero drawn elevation — surface-color contrast and the hairline border are the only elevation tools. A purple glow around cards would break the "no unnecessary decoration" constraint.

## Known Gaps

- **Light mode:** the captured marketing surface is dark-only. Temporal's product may expose light-mode UI surfaces, but the marketing site does not toggle.
- **Hover and focus states:** the full interaction matrix (focus rings, active press, disabled opacity) is not captured beyond the button-primary hover. The CTA hover shifts background color only.
- **Motion and animation:** the hero code panel animates to show workflow execution, and the feature illustration tiles animate on scroll. Easing, duration, and step timing are not captured.
- **Form validation states:** the text-input resting state is captured; error and success validation states are not exposed on the marketing surface.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The Temporal Cloud UI and the Temporal SDK documentation sites carry their own surface tokens, sidebar navigation, and workflow-visualization components.
- **Typography at 128px:** the extraction captures one instance of Aeonik at 128px / 300 weight on a decorative counter element. This display-xxl size is not included as a standard token because it appears in one illustration only; add if building a data-display feature section.