큐레이션 · 오픈 · 무료

Clickhouse

기술적 정밀성을 위해 구축된 어둡고 높은 대비의 인터페이스를 가진 고성능 개발자 플랫폼.

01

디자인 DNA

고성능 데이터 작업을 위해 구축된 커맨드 센터 대시보드.

02

컬러

가독성을 우선시하고 생동감 있는 노란색 강조에 주목을 집중시키는 고대비 다크 테마.

03

타이포그래피

humanist-sans · monospace

• display72px · 500
• headline36px · 500
• body16px · 400
• small14px · 400

humanist-sans 계열 내에서 강조를 위해 굵은 두께를 사용합니다 · 디스플레이 타이포그래피에는 타이트한 행간을 유지합니다 · 텍스트와 배경 사이에 높은 대비를 보장합니다

04

여백

섹션 간 간격을 위해 더 큰 배수를 사용하는 일관된 4px 기본 그리드

05

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

1px solid rgba(65, 65, 65, 0.8)

0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 20px 25px -5px rgba(0, 0, 0, 0.1)

06

레이아웃

중앙 정렬된 콘텐츠를 가진 전체 너비 히어로 섹션과 구조화된 레이아웃을 위한 12열 그리드

07

모션과 인터랙션

인터랙티브 요소에서의 부드러운 색상 및 배경 전환 · 미세한 hover 상태 변경

버튼과 링크에서의 색상 및 background-color 전환. · 미세한 opacity 또는 transform 변경으로 즉각적인 시각적 피드백.

08

컴포넌트

• button 검정 텍스트와 미세한 곡률을 가진 단색 기본 노란색 버튼. 보조 버튼은 투명 배경과 테두리를 사용합니다.
• card 미세한 테두리와 둥근 모서리를 가진 어두운 표면 카드로, 종종 통합 아이콘을 포함합니다.
• chip 두드러지게 사용되지 않습니다.
• input 스크린샷에서 두드러지게 사용되지 않습니다.
• hero 명확한 계층 구조와 듀얼 CTA 버튼을 가진 어두운 배경 중앙의 대규모 타이포그래피.

09

보이스와 금지 목록

• 톤 자신감 있고 기술적이며 직접적입니다.
• 헤드라인 성능과 규모를 강조하는 굵고 간결한 문장.
• CTA '무료 클라우드 체험 시작하기'와 같이 명확한 가치 제안을 제시하는 행동 지향적 표현.

• 12px보다 큰 둥근 모서리를 사용하지 마세요 — 스크린샷은 미세하고 기능적인 반경을 보여줍니다
• 여러 가지 강조색을 사용하지 마세요 — 스크린샷은 단일 지배적인 노란색 강조를 보여줍니다
• 라이트 모드나 흰색 배경을 사용하지 마세요 — 스크린샷은 다크 모드 디자인을 보여줍니다
• 장식용 세리프 서체를 사용하지 마세요 — 스크린샷은 모든 디스플레이 및 본문 텍스트에 humanist-sans를 사용합니다
• 바쁘거나 복잡한 텍스처나 패턴을 사용하지 마세요 — 스크린샷은 깔끔하고 플랫한 표면을 보여줍니다
• 저대비 텍스트를 사용하지 마세요 — 스크린샷은 어두운 배경에 높은 대비의 흰색과 노란색을 보여줍니다
• 피하기: 모호한 마케팅 용어
• 피하기: 지나치게 캐주얼한 언어
• 피하기: 맥락 없는 복잡한 기술적 설명

10

팩 안의 실제 스크린샷

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

11

System Prompt

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