Temporal DESIGN.md
Brands
Durable execution design with dark reliability surfaces, green workflow accents, and code-first orchestration clarity.
At a glance
- Group
- Brands
- Main color
- #6eeb83Green design systems
- Fonts
- InterSF Mono
Colors in this file
- #0d0f14
Unnamed
- #6eeb83
Unnamed
- #e2e8f0
Unnamed
- #7c3aed
Unnamed
- #2563eb
Unnamed
- #f8fafc
Unnamed
- #ffffff
Unnamed
- #f59e0b
Unnamed
- #92400e
Unnamed
Durable execution design with dark reliability surfaces, green workflow accents, and code-first orchestration clarity.
1. Visual Theme & Atmosphere
Temporal should feel like complex distributed systems becoming reliable by default. The design supports workflows, activities, retries, timers, signals, histories, cloud namespaces, and AI agent durability.
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--temporal-black | #0D0F14 | Dark platform surface |
--temporal-green | #6EEB83 | Workflow success / durable state |
--temporal-purple | #7C3AED | AI/workflow highlight |
--temporal-blue | #2563EB | Links and cloud actions |
--surface-page | #F8FAFC | Light background |
--surface-card | #FFFFFF | Cards and docs panels |
--border-default | #E2E8F0 | Dividers |
--warning | #F59E0B | Retry / waiting state |
3. Typography Rules
css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
| Element | Size | Weight | Line Height |
|---|---|---|---|
| Hero Display | 60px | 700 | 1.05 |
| Page Title | 40px | 700 | 1.12 |
| Section Title | 30px | 650 | 1.2 |
| Workflow Title | 20px | 650 | 1.3 |
| Body | 16px | 400 | 1.6 |
| Code | 13px | 500 | 1.55 |
4. Component Stylings
css.button-primary { min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid #6EEB83; background: #6EEB83; color: #0D0F14; font: 700 14px/1 Inter, sans-serif; }
.workflow-card { border: 1px solid #E2E8F0; border-radius: 16px; background: #fff; padding: 18px; }
.history-panel { border-radius: 14px; background: #0D0F14; color: #fff; padding: 16px; font: 500 13px/1.55 "SF Mono", monospace; }
.retry-badge { background: rgba(245, 158, 11, 0.14); color: #92400E; border-radius: 999px; padding: 6px 10px; }
5. Layout Principles
Organize by namespace, workflow, activity, run ID, status, history, retries, and signals. Keep durability and recovery visible.
6. Depth & Elevation
css.shadow-card { box-shadow: 0 8px 18px rgba(13, 15, 20, 0.08); }
.shadow-panel { box-shadow: 0 20px 48px rgba(13, 15, 20, 0.18); }
7. Do's and Don'ts
Do make workflow state and history obvious. Do show code and state together. Do not hide retry/failure semantics.
8. Responsive Behavior
| Breakpoint | Min Width | Behavior |
|---|---|---|
| Mobile | 0px | Stack workflow cards and event history |
| Tablet | 768px | Two-column workflow/detail views |
| Desktop | 1200px | Full namespace sidebar, workflow list, and history panel |
9. Agent Prompt Guide
Design like Temporal: durable workflow UI, dark history panels, green reliability accents, code-first orchestration cards, and clear retry/recovery state.
Use it with your agent
Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.
Download
MCP server
MCP tool call
Related Design.md files
Mozilla
Brands · Mozilla Headline
Mission-driven web brand with activist energy. High-contrast black and off-white, bright green and seed accents, Mozilla Headline and Mozilla Text, and bold editorial blocks create a system that feels…
PagerDuty
Brands · Inter
Incident management design with bold green identity, on-call surfaces, alert-severity hierarchy, and operations-first clarity.
Descript
Brands · Inter
AI video and podcast editing design with warm green identity, timeline-first surfaces, word-based editing clarity, and creator-friendly UX.
Medium
Brands · Charter
Reading and writing platform with magazine-like simplicity and strong black-and-green branding. Medium's public site uses restrained editorial layout, serif-forward reading tone, and the signature Medium green (#1A8917).
Chime
Brands · Circular
Neobank design with energetic green identity, member-first surfaces, friendly typography, and accessible mobile-first banking.
Pipedrive
Brands · Inter
Sales-driven CRM with a pipeline-first visual language — bold greens, clean data tables, and action-oriented UI.