큐레이션 · 오픈 · 무료

Temporal

안정적인 분산 애플리케이션과 AI 에이전트를 구축 및 실행하기 위한 오픈소스 플랫폼.

devinfra
Temporal 스크린샷
↓ 디자인 시스템 다운로드 (41 MB)OpenDesign 에서 열기

원본 사이트: https://temporal.io

📦 팩 내용 보기 →

01

디자인 DNA

TemporalAIWorkflowsDeveloper Platform

AI 에이전트와 복잡한 분산 시스템을 위한 운영 체제

02

컬러

#7F86F1Accent
#F8FAFCInk
#CACBF9Ink soft
#141414BG
#1E1E1EBG soft
#92A4C3Muted
rgba(36, 51, 73, 1)Line

고대비 흰색 텍스트와 생동감 있는 보라색/푸른색 강조를 위한 다크 모드 우선

03

타이포그래피

geometric-sans · monospace

04

여백

4px
8px
12px
16px
24px
32px
48px
64px
96px

주요 섹션 간 풍부한 수직 패딩(96px)

05

표면 (라운드 / 그림자 / 경계선)

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

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

텍스트는 왼쪽, 코드 블록은 오른쪽에 배치한 분할 레이아웃의 전체 폭 다크 히어로; 아래쪽에 카드 그리드

07

모션과 인터랙션

150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover 시 부드러운 색상 및 배경색 전환 · 페이지 로드 애니메이션을 위한 불투명도 페이드 인 · 인터랙티브 요소를 위한 transform 이동

텍스트 색상이 더 밝은 흰색 또는 강조 색상으로 전환, 버튼은 밝기 증가 · 미묘한 불투명도 또는 축소 축소

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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 — 移动首屏
移动首屏

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

Temporal.io는 안정적인 분산 시스템과 AI 에이전트를 구축하기 위한 다크 모드 개발자 플랫폼입니다. 이 디자인은 선명한 흰색 텍스트(#F8FAFC)와 보라색(#7F86F1, #B664FF)을 사용하는 near-black(#141414) 배경에 의존하며, 종종 그라디언트로 적용됩니다. 타이포그래피는 큰 인상적인 헤드라인에 얇은 웨이트(300)와 타이트한 트래킹으로 사용되는 geometric-sans 카테고리(Aeonik)가 지배적이며, 코드 예제용 전용 모노스페이스 폰트와 결합됩니다. 중요 금지 사항: 밝은 배경이나 어두운 텍스트를 사용하지 마세요. 헤드라인에 두꺼운 폰트 웨이트를 사용하지 마세요. 메인 버튼에 단일 플랫 색상을 사용하지 마세요—그라디언트가 선호됩니다. 주요 헤드라인에 작은 폰트 크기를 사용하지 마세요. 버튼과 같은 주요 행동 요소에 날카로운 모서리를 사용하지 마세요. 혼잡한 레이아웃을 사용하지 마세요; 풍부한 여백과 패딩을 유지하세요.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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