← OpenDesign
큐레이션 · 오픈 · 무료
Xata
즉시 Postgres 브랜칭이 가능한 최신 개발자 도구
dev db
01
디자인 DNA
개발자 데이터베이스 Postgres 브랜칭 도구
데이터베이스 워크플로우를 위한 정밀 기기
02
컬러
#FFFFFFInk
#0D0D0DBG
#888888Muted
rgba(255, 255, 255, 0.07)Line
모노크롬 정밀함과 최소한의 포인트 컬러를 적용한 고대비 다크 모드
03
타이포그래피
geometric-sans · monospace
제목은 타이트한 트래킹의 기하학적 산세리프 사용 · 본문 및 UI 텍스트는 기술적 정확성을 위해 모노스페이스 사용 · 보조 정보에는 무드 텍스트 사용
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
명확성을 위한 넉넉한 여백과 8px 베이스 그리드
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(255, 255, 255, 0.07)
0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset · 0px 4px 6px -1px rgba(0, 0, 0, 0.2) · 0px 2px 4px -2px rgba(0, 0, 0, 0.2) · 0px 0px 2.56702px 0px rgba(52, 211, 153, 0.192)
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
깨끗한 그리드를 갖춘 중앙 정렬 고정 폭 레이아웃
07
모션과 인터랙션
150ms micro
300ms small
800ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
부드러운 불투명도 전환 · 호버 시 트랜스폼 효과 · 배경 필터 전환
미세한 밝기 변화와 박스 그림자 · 약간 축소
08
컴포넌트
button 흰색 텍스트와 약간의 둥근 모서리를 가진 퍼플 배경 card 얇은 테두리와 은은한 그림자가 있는 어두운 미세 배경 chip 상태 표시를 위한 무드 텍스트의 아웃라인 스타일 input 은은한 테두리가 있는 어두운 배경 hero 어두운 배경과 흩어진 UI 요소를 갖춘 큰 모노스페이스 제목
09
보이스와 금지 목록
톤 기술적이고 정확하며 전문적인 어조 헤드라인 기능성에 대한 직접적이고 대담한 진술 CTA 모노스페이스 폰트를 사용한 명확한 행동 동사 세리프 폰트 사용 금지 — 스크린샷에 모노스페이스와 기하학적 산세리프 표시 밝은 기본 색상 사용 금지 — 스크린샷에 버튼에만 은은한 퍼플 포인트 컬러 표시 둥근 카드 사용 금지 — 스크린샷에 작은 반경의 직사각형 카드 표시 복잡한 배경 사용 금지 — 스크린샷에 은은한 패턴이 있는 어두운 단색 배경 표시 큰 패딩 사용 금지 — 스크린샷에 밀도를 위한 컴팩트 간격 표시 기울임꼴 텍스트 사용 금지 — 스크린샷에 모든 직립 타이포그래피 표시 피하기: 마케팅 용어 피하기: 과도한 감탄사 피하기: 지나치게 캐주얼한 언어
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
This is a developer tool SaaS website for database management with a dark mode design. The site uses monospace typography throughout for technical precision, with geometric sans-serif for headlines. Key colors include #0D0D0D for background, #FFFFFF for ink, and muted purple for primary buttons. The layout is clean and centered with generous whitespace. Critical don'ts: avoid serif fonts, don't use bright primary colors, avoid rounded cards. The design prioritizes clarity and technical accuracy with minimal visual noise.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 기술적 정밀함을 갖춘 개발자 중심 다크 모드 디자인의 훌륭한 예시