← OpenDesign 큐레이션 · 오픈 · 무료
Drizzle ORM
TypeScript와 JavaScript를 위한 현대적이고 빠른 ORM입니다.
devtools orm
01
디자인 DNA
ORM TypeScript JavaScript Database Developer
개발자가 데이터를 효율적으로 관리할 수 있도록 하는 깔끔하고 빠른 도구 모음과 같습니다.
02
컬러
#222222Ink
#444444Ink soft
#FFFFFFBG
#FAFAFABG soft
#F1F2F3BG quiet
#71687BMuted
rgba(33, 39, 46, 0.12)Line
깔끔한 흰색 배경에 미묘한 회색 구조 요소를 사용한 높은 대비입니다.
03
타이포그래피
sans-serif · monospace
display 48px · 700h2 32px · 600body 16px · 400small 12px · 400시스템 sans-serif 스택이 기본 서체입니다. · 모노스페이스 폰트는 코드 조각과 기술 라벨에 사용됩니다. · 수기 폰트는 선택적으로 재미있는 주석에 사용됩니다.
04
여백
4px
8px
12px
16px
20px
24px
32px
40px
64px
일관된 4px 기본 그리드와 섹션별 넉넉한 padding입니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 2px
md · 8px
lg · 20px
pill · 999px
1px solid rgb(229, 231, 235)
rgba(0, 0, 0, 0.08) 0px 0px 0px 1px · rgba(0, 0, 0, 0.075) 0px 2px 4px 0px · rgb(255, 255, 255) 0px 0px 1px 1px inset
06
레이아웃
1200 container
12 columns
24px gutter
768 / 1024 breakpoints
반응형 스택을 적용한 중앙 정렬 콘텐츠 컨테이너입니다.
07
모션과 인터랙션
200ms micro
300ms small
800ms medium
ease-in-out easing
hover 시 부드러운 색상 전환 · 불투명도 페이드 인
미묘한 배경색 변경 또는 색상 전환입니다. · 극적인 변화는 없으며, 표준 포인터 커서입니다.
08
컴포넌트
button 둥근 모서리의 고스트 또는 아웃라인 스타일입니다. card 미묘한 border와 부드러운 그림자가 있는 흰색 표면입니다. chip 배경색을 사용하는 작은 둥근 배지입니다. input 둥근 모서리의 깔끔한 아웃라인 입력 필드입니다. hero 재미 있는 일러스트레이션이 동반되는 왼쪽 정렬의 큰 텍스트입니다. 09
보이스와 금지 목록
톤 기술적이지만 접근 가능하며, 약간 재미있는 어조입니다. 헤드라인 직관적이고, 행동을 유도하며, 간결합니다. CTA 단순한 텍스트 링크 또는 아웃라인 버튼입니다. 다크 모드를 사용하지 않습니다 — 스크린샷은 밝은 흰색 배경을 보여줍니다 그라데이션 배경을 사용하지 않습니다 — 스크린샷은 평면적인 단색을 보여줍니다 모든 곳에 둥근 필 버튼을 사용하지 않습니다 — 스크린샷은 표준 직사각형 또는 약간 둥근 버튼을 보여줍니다 모든 요소에 그림자를 사용하지 않습니다 — 스크린샷은 미묘한 border가 있는 대부분 평면적인 표면을 보여줍니다 단일 고채도 강조색을 사용하지 않습니다 — 스크린샷은 대부분 단색 팔레트를 보여줍니다 장식용 세리프를 사용하지 않습니다 — 스크린샷은 깔끔한 sans-serif 타이포그래피를 보여줍니다 피하기: 지나치게 기업적인 언어 피하기: 시각적 중단 없이 밀도 높은 텍스트 벽 피하기: 공격적이거나 강렬한 색상 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
이것은 ORM용 개발자 도구 SaaS 사이트로, 흰색 배경의 깔끔하고 미니멀한 디자인이 특징입니다. 주요 색상에는 짙은 차콜 텍스트(#222222)와 연한 회색 border(#E5E7EB)가 포함됩니다. 타이포그래피는 본문에 표준 sans-serif 스택을, 코드에 모노스페이스 스택을 사용합니다. 디자인은 무거운 그림자 대신 넉넉한 여백과 미묘한 border에 의존합니다. 핵심 주의사항: 다크 모드를 사용하지 않고, 그라데이션 배경을 추가하지 않으며, 장식용 폰트를 사용하지 않습니다. 레이아웃은 중앙 정렬 및 반응형이며, 명확한 계층과 가독성에 중점을 둡니다.
더 보기 en · zh-CN · zh-TW · ja · ko
