큐레이션 · 오픈 · 무료

Pulumi

클라우드 엔지니어를 위한 코드 기반 인프라.

01

디자인 DNA

클라우드 인프라를 위한 고성능 엔진으로, 강력함과 친근함을 결합합니다.

02

컬러

고급스럽고 전문적인 느낌을 주기 위해 깊은 보라색 포인트와 깨끗한 여백을 활용합니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display56px · 600

대형 디스플레이 제목에는 타이트한 자간(-1.8px ~ -2.4px)을 사용합니다. · 본문 텍스트 및 UI 요소에는 Inter를 사용합니다. · 코드 스니펫에는 Monaspace Neon을 사용합니다.

04

여백

모든 간격에 일관된 4px 기본 단위를 사용합니다.

05

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

1px solid #e0dfe2

0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

06

레이아웃

표준 12열 그리드.

07

모션과 인터랙션

버튼과 링크에 부드러운 hover 전환. · 인터랙티브 요소의 미세한 색상 변화.

색상 변화 또는 미세한 그림자 강화. · 약간 더 어두운 색조의 활성 상태.

08

컴포넌트

• button 주요 동작에는 보라색 실버, 보조 동작에는 아웃라인 스타일을 사용합니다.
• card 흰색 배경에 1px 테두리와 8px 반경을 적용합니다.
• chip 얇은 테두리가 있는 타원형.
• input 깔끔한 1px 테두리.
• hero 왼쪽에 큰 타이포그래피, 오른쪽에 인터랙티브 시각화가 있는 분할 레이아웃입니다.

09

보이스와 금지 목록

• 톤 전문적이고 권위 있지만, 동시에 현대적이고 접근하기 쉬운 어조.
• 헤드라인 간결하고 임팩트 있으며, 가치 중심적.
• CTA 직설적이고 행동을 유도하는 스타일.

• 메인 페이지에 어두운 배경을 사용하지 않습니다 — 스크린샷에서는 주로 흰색(#ffffff) 배경을 보여줍니다.
• 코드에 sans-serif 서체를 사용하지 않습니다 — 스크린샷에서는 모노스페이스 서체인 Monaspace Neon을 사용합니다.
• 주요 버튼에 둥근 타원형 모양을 사용하지 않습니다 — 스크린샷에서는 8px 테두리 반경을 가진 버튼을 보여줍니다.
• 여러 개의 높은 채도 포인트 컬러를 사용하지 않습니다 — 스크린샷에서는 단일 주요 보라색(#5a31c5) 포인트를 보여줍니다.
• 디스플레이 타이포그래피에 넓은 자간을 사용하지 않습니다 — 스크린샷에서는 타이트한 트래킹(-2.4px)을 사용합니다.
• 모든 표면에 무거운 드롭 그림자를 사용하지 않습니다 — 스크린샷에서는 특정 카드에만 미세한 박스 그림자를 사용합니다.
• 피하기: 지나치게 캐주얼한 비어나 이모티콘을 사용하지 않습니다.
• 피하기: 가치 제안을 흐리게 하는 복잡한 전문 용어를 사용하지 않습니다.
• 피하기: 시각적 혼란이나 과도한 애니메이션을 사용하지 않습니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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