Temporal Design System

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

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.