큐레이션 · 오픈 · 무료

Cockroach Labs

현대적이고 임무 중대 애플리케이션을 위한 클라우드 불가지론적 PostgreSQL 호환 데이터베이스 플랫폼.

01

디자인 DNA

비즈니스 중요 애플리케이션의 기반 시스템으로서 데이터베이스를 포지셔닝하는 현대 인프라 회사.

02

컬러

모노크롬 베이스 위에 주요 행동을 강조하기 위해 선명한 보라색 강조색을 사용하는 고대비, 깔끔한 인터페이스.

03

타이포그래피

humanist-sans

• display56px · 600
• heading40px · 500
• body18px · 400

친근하면서도 전문적인 기술적 느낌을 위해 휴머니스트 산세리프(Poppins/Open Sans)를 사용합니다. · 대형 전시 유형에는 시각적 블록을 통합하기 위해 좁은 음수 자간을 유지합니다. · 기술적 가독성을 위해 본문에 충분한 행간(1.5-1.7)을 확보합니다.

04

여백

레이아웃 정렬을 위한 일관된 24px 거터를 갖춘 표준 4px 그리드 기반 간격.

05

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

1px solid #EAECF0

0px 2px 4px 0px rgba(0, 0, 0, 0.075) · 0px 0px 5px 0px rgb(128, 128, 128)

06

레이아웃

전체 폭 히어로 섹션이 중앙 정렬된 콘텐츠 컨테이너와 번갈아 나타나는 구조.

07

모션과 인터랙션

hover 시 부드러운 색상 및 배경 전환(0.2s). · 상호작용 요소나 화살표의 오른쪽 방향 움직임.

링크와 버튼을 위한 미묘한 색상 변화 또는 배경 채우기. · 표준 커서 포인터를 사용한 즉각적인 반응.

08

컴포넌트

• button 주요 행동을 위한 고대비 단색 보라색(#6933FF), 흰색 텍스트를 가진 알약 모양. 보조 버튼은 보라색 테두리와 어두운 텍스트로 테두리가 지정됩니다.
• card 미묘한 테두리와 약간의 그림자를 통해 높이감을 주는 깔끔하고 미니멀한 카드.
• input 밝은 회색 테두리와 8px 테두리 반경을 가진 표준 폼 입력.
• hero 기하학적 밝은 청록색 그래디언트 배경 위에 왼쪽 정렬된 대형 텍스트.

09

보이스와 금지 목록

• 톤 신뢰성과 규모에 초점을 맞춘 전문적이고 자신감 있으며 권위 있는 어조.
• 헤드라인 제품을 중요한 인프라 선택으로 포지셔닝하는 굵고 선언적인 문장.
• CTA 무료 진입점이나 팀 컨설팅을 강조하는 행동 지향적이고 직접적인 스타일.

• 넓은 장식용 세리프 폰트를 사용하지 마세요 — 스크린샷은 깔끔하고 현대적인 휴머니스트 산세리프 접근법을 보여줍니다.
• 흐리고 채도가 낮은 팔레트를 사용하지 마세요 — 스크린샷은 선명하고 높은 크로마의 보라색 강조색을 특징으로 합니다.
• 복잡하고 무거운 그림자를 사용하지 마세요 — 스크린샷은 깊이감을 위해 매우 미묘하고 부드러운 높이감을 사용합니다.
• 모든 히어로 텍스트를 중앙 정렬하지 마세요 — 스크린샷은 메인 헤드라인과 보조 카피가 왼쪽 정렬되어 있음을 보여줍니다.
• 장식적이거나 손글씨체 폰트 스타일을 사용하지 마세요 — 스크린샷은 엄격하게 전문적이고 깔끔한 미학을 유지합니다.
• 주요 CTA에 어두운 배경을 사용하지 마세요 — 스크린샷은 '무료 시작' 버튼에 밝은 보라색 단색 채우기를 사용합니다.
• 피하기: 지나치게 장난스러운 언어
• 피하기: 기술적 뒷받침 없는 모호한 마케팅 용어
• 피하기: 히어로 섹션의 밀도 높은 비정형 기술 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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