← OpenDesign
큐레이션 · 오픈 · 무료
Cockroach Labs
현대적이고 임무 중대 애플리케이션을 위한 클라우드 불가지론적 PostgreSQL 호환 데이터베이스 플랫폼.
dev db
01
디자인 DNA
데이터베이스 클라우드 네이티브 분산형 엔터프라이즈 신뢰성
비즈니스 중요 애플리케이션의 기반 시스템으로서 데이터베이스를 포지셔닝하는 현대 인프라 회사.
02
컬러
#6933FFAccent
#000000Ink
#333333Ink soft
#FFFFFFBG
#FCFCFDBG soft
rgba(234, 236, 240, 1)Line
모노크롬 베이스 위에 주요 행동을 강조하기 위해 선명한 보라색 강조색을 사용하는 고대비, 깔끔한 인터페이스.
03
타이포그래피
humanist-sans
display 56px · 600heading 40px · 500body 18px · 400친근하면서도 전문적인 기술적 느낌을 위해 휴머니스트 산세리프(Poppins/Open Sans)를 사용합니다. · 대형 전시 유형에는 시각적 블록을 통합하기 위해 좁은 음수 자간을 유지합니다. · 기술적 가독성을 위해 본문에 충분한 행간(1.5-1.7)을 확보합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
레이아웃 정렬을 위한 일관된 24px 거터를 갖춘 표준 4px 그리드 기반 간격.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid #EAECF0
0px 2px 4px 0px rgba(0, 0, 0, 0.075) · 0px 0px 5px 0px rgb(128, 128, 128)
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
전체 폭 히어로 섹션이 중앙 정렬된 콘텐츠 컨테이너와 번갈아 나타나는 구조.
07
모션과 인터랙션
200ms micro
300ms small
800ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
hover 시 부드러운 색상 및 배경 전환(0.2s). · 상호작용 요소나 화살표의 오른쪽 방향 움직임.
링크와 버튼을 위한 미묘한 색상 변화 또는 배경 채우기. · 표준 커서 포인터를 사용한 즉각적인 반응.
08
컴포넌트
button 주요 행동을 위한 고대비 단색 보라색(#6933FF), 흰색 텍스트를 가진 알약 모양. 보조 버튼은 보라색 테두리와 어두운 텍스트로 테두리가 지정됩니다. card 미묘한 테두리와 약간의 그림자를 통해 높이감을 주는 깔끔하고 미니멀한 카드. input 밝은 회색 테두리와 8px 테두리 반경을 가진 표준 폼 입력. hero 기하학적 밝은 청록색 그래디언트 배경 위에 왼쪽 정렬된 대형 텍스트.
09
보이스와 금지 목록
톤 신뢰성과 규모에 초점을 맞춘 전문적이고 자신감 있으며 권위 있는 어조. 헤드라인 제품을 중요한 인프라 선택으로 포지셔닝하는 굵고 선언적인 문장. CTA 무료 진입점이나 팀 컨설팅을 강조하는 행동 지향적이고 직접적인 스타일. 넓은 장식용 세리프 폰트를 사용하지 마세요 — 스크린샷은 깔끔하고 현대적인 휴머니스트 산세리프 접근법을 보여줍니다. 흐리고 채도가 낮은 팔레트를 사용하지 마세요 — 스크린샷은 선명하고 높은 크로마의 보라색 강조색을 특징으로 합니다. 복잡하고 무거운 그림자를 사용하지 마세요 — 스크린샷은 깊이감을 위해 매우 미묘하고 부드러운 높이감을 사용합니다. 모든 히어로 텍스트를 중앙 정렬하지 마세요 — 스크린샷은 메인 헤드라인과 보조 카피가 왼쪽 정렬되어 있음을 보여줍니다. 장식적이거나 손글씨체 폰트 스타일을 사용하지 마세요 — 스크린샷은 엄격하게 전문적이고 깔끔한 미학을 유지합니다. 주요 CTA에 어두운 배경을 사용하지 마세요 — 스크린샷은 '무료 시작' 버튼에 밝은 보라색 단색 채우기를 사용합니다. 피하기: 지나치게 장난스러운 언어 피하기: 기술적 뒷받침 없는 모호한 마케팅 용어 피하기: 히어로 섹션의 밀도 높은 비정형 기술 용어
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
Cockroach Labs는 클라우드 네이티브 데이터베이스를 위한 개발자 중심 SaaS 플랫폼입니다. 디자인은 깔끔하고 권위 있으며, 휴머니스트 산세리프 타이포 시스템(Poppins/Open Sans)과 모노크롬 팔레트(흰색/검정/회색)를 사용하되, 선명한 보라색 강조(#6933FF)로 포인트를 줍니다. 레이아웃은 신뢰성과 규모를 전달하기 위해 대형 굵은 타이포그래피와 풍부한 여백을 중심으로 구조화됩니다. 주요 디자인 규칙: 장식용 세리프를 피하고, 채도가 낮은 팔레트를 피하고, 복잡하고 무거운 그림자를 피하고, 모든 주요 사용자 행동에 뚜렷한 보라색 강조색을 유지합니다. 프리미엄하고 신뢰할 수 있는 느낌으로 기술 의사결정자를 대상으로 합니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 기술적 권위와 깔끔하고 접근 가능한 시각 시스템, 그리고 전환을 위해 단일 브랜드 색상을 효과적으로 활용하는 균형을 갖춘 개발자 중심 SaaS 플랫폼의 훌륭한 예시입니다.