CURATED · OPEN · FREE

Temporal

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

devinfra

Temporal screenshot

↓ Download design system (41 MB)Open in OpenDesign

Visit: https://temporal.io

📦 Browse pack contents →

01

Identity DNA

TemporalAIWorkflowsDeveloper Platform

The operating system for AI agents and complex distributed systems

02

Color

#7F86F1Accent

#F8FAFCInk

#CACBF9Ink soft

#141414BG

#1E1E1EBG soft

#92A4C3Muted

rgba(36, 51, 73, 1)Line

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

03

Typography

geometric-sans · monospace

display68px · 300
h148px · 300
body16px · 400

04

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Generous vertical padding (96px) between major sections

05

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid rgb(36, 51, 73)

rgba(0, 0, 0, 0.25) 0px 25px 50px -12px · rgb(0, 0, 0) 8px 8px 0px 0px

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

07

Motion & Interaction

150msmicro

300mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color and background-color transitions on hover · Opacity fade-ins for page load animations · Transform shifts for interactive elements

Text color transitions to brighter white or accent color, buttons increase brightness · Subtle opacity or scale reduction

08

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

09

Voice & Don'ts

Tone Authoritative, technical, and confident
Headlines Short, punchy, and declarative with light font weight
CTAs Direct and action-oriented (e.g., 'Get Started for Free', 'Run Locally')

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
Avoid: Jargon without context
Avoid: Playful or whimsical language
Avoid: Overly complex sentence structures

10

Inside the pack — real screenshots

Temporal — 桌面首屏（hero） — 桌面首屏（hero）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Temporal — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko