큐레이션 · 오픈 · 무료

Depot

Depot는 빌드 파이프라인의 모든 단계를 가속화합니다.

01

디자인 DNA

현대 개발 파이프라인을 위한 고성능 엔진과 같습니다.

02

컬러

깊은 다크 배경은 기술 콘텐츠에 집중된 환경을 조성하며, 밝은 그린 강조색은 속도와 성능을 강조합니다.

03

타이포그래피

humanist-sans · monospace

• display56px · 700
• headline24px · 500
• body16px · 400
• small14px · 400
• micro12px · 500

디스플레이 헤드라인은 좁은 자간으로 타이트하고 현대적인 느낌을 줍니다 · 본문 텍스트는 가독성을 위한 편안한 행간을 유지합니다 · 모노스페이스 폰트는 기술 데이터 및 코드 유사 요소에 사용됩니다

04

여백

일관된 4px 기본 그리드와 논리적인 간격 체계를 사용합니다.

05

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

1px solid rgba(60, 57, 63, 1.0)

0px 1px 0px 0px rgba(255, 255, 255, 0.06) inset · 0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

06

레이아웃

여유로운 여백을 두고 중앙에 콘텐츠를 배치하며, 명확한 수직 섹션으로 구성합니다.

07

모션과 인터랙션

인터랙티브 요소를 위한 매끄러운 색상 전환 · 호버 상태를 위한 불투명도 변화 · 마이크로 상호작용을 위한 transform 애니메이션

미세한 색상 변화와 불투명도 조정 · 색상 전환을 통한 즉각적인 시각적 피드백

08

컴포넌트

• button 그린 배경의 둥근 primary 버튼과 미세한 테두리의 secondary 버튼입니다.
• card 미세한 테두리와 둥근 모서리를 가진 다크 카드로, 주로 성능 지표를 포함합니다.
• chip 상태 표시기 및 카테고리를 위한 작은 둥근 모양의 레이블입니다.
• input 미세한 테두리와 둥근 모서리를 가진 다크 입력 필드입니다.
• hero 대형 헤드라인, 설명 텍스트, 그리고 두드러진 CTA가 포함된 전체 폭의 히어로 섹션입니다.

09

보이스와 금지 목록

• 톤 직설적이고 자신감 있으며 기술적으로 정확합니다
• 헤드라인 속도와 효율성을 강조하는 짧고 임팩트 있는 문장
• CTA 보조 정보가 포함된 명확한 행동 지향적 레이블

• 밝은 기본색을 사용하지 마세요 — 스크린샷은 다크 배경에 절제된 그린 강조색을 보여줍니다
• 장식용 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 humanist-sans 타이포그래피를 보여줍니다
• 무거운 그림자나 그래디언트를 추가하지 마세요 — 스크린샷은 미니멀한 깊이 효과를 보여줍니다
• 과도한 애니메이션을 사용하지 마세요 — 스크린샷은 미세하고 의도적인 전환을 보여줍니다
• 레이드를 복잡하게 하지 마세요 — 스크린샷은 여유로운 여백과 명확한 계층 구조를 보여줍니다
• 복잡한 탐색 패턴을 사용하지 마세요 — 스크린샷은 단순하고 논리적인 메뉴 구조를 보여줍니다
• 피하기: 설명 없는 전문 용어
• 피하기: 지나치게 캐주얼한 언어
• 피하기: 과도한 느낌표 사용

10

팩 안의 실제 스크린샷

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

11

System Prompt

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