← OpenDesign
큐레이션 · 오픈 · 무료
Evidence
데이터 대시보드를 코드로 취급하며, 개발자 워크플로우와 깔끔하고 전문적인 UI를 결합하는 비즈니스 인텔리전스 플랫폼입니다.
data bi
01
디자인 DNA
분석 개발자 버전 관리 데이터 제품
개발자 중심 분석 도구를 위한 현대적인 문서 사이트
02
컬러
#1D4ED8Accent
#111827Ink
#4B5563Ink soft
#FFFFFFBG
#F9FAFBBG soft
#F3F4F6BG quiet
#6B7280Muted
rgba(229, 231, 235, 1)Line
기술적 정밀함을 위한 단일 블루 액센트를 사용한 중성 그레이
03
타이포그래피
transitional-serif · humanist-sans · geometric-sans
display 56px · 500heading 36px · 500body 16px · 400caption 14px · 400micro 12px · 500대문자 마이크로 텍스트에 letter-spacing 0.4px를 사용합니다 · 큰 디스플레이 헤드라인에 letter-spacing -1.5px를 사용합니다 · 16px 본문 텍스트는 line-height 1.5를 유지합니다 · 본문 내 강조에 weight 600를 사용합니다 · 인터랙티브 요소에 weight 500를 사용합니다
04
여백
4px
8px
12px
16px
20px
24px
32px
48px
64px
일관된 4px 기본 그리드와 섹션 간 넉넉한 수직 spacing
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 6px
lg · 8px
pill · 9999px
1px solid #E5E7EB
0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
넉넉한 수평 padding과 명확한 시각적 계층을 갖춘 중앙 정렬 콘텐츠
07
모션과 인터랙션
200ms micro
300ms small
700ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
hover 상태에서 부드러운 색상 및 opacity 전환 · 모달 및 드롭다운 등장 시 미세한 페이드인
opacity 변화를 통한 매끄러운 200ms 색상 전환 · 표준 버튼 눌림 상태로 즉각적인 시각적 피드백
08
컴포넌트
button 높은 대비를 갖춘 둥근 알약 형태; 검정색 채워진 1차, 테두리가 있는 흰색 2차 버튼 card 미세한 그림자와 1px 테두리가 있는 흰색 배경 chip 대문자 마이크로 텍스트를 사용하는 작은 알약 형태 태그 input 미세한 그림자가 있는 깔끔한 테두리 필드 hero 보조 부제목과 2개의 CTA 버튼을 갖춘 큰 중앙 정렬 헤드라인
09
보이스와 금지 목록
톤 전문적이고 기술적이며 자신감 있는 헤드라인 강력한 타이포그래피 계층을 갖춘 명확하고 간결하며 행동 지향적인 CTA 'Get started' 및 'Book a demo'와 같은 동사를 사용하는 직접적이고 명령적인 다크 모드를 사용하지 않습니다 — 스크린샷은 어두운 텍스트(#FFFFFF 배경, #111827 잉크)가 있는 밝은 배경을 보여줍니다 무거운 그림자를 사용하지 않습니다 — 스크린샷은 미세한 1px 테두리와 최소한의 상승 효과를 보여줍니다 본문에 장식용 세리프 글꼴을 사용하지 않습니다 — 스크린샷은 읽을 수 있는 모든 텍스트에 산세리프를 사용합니다 다색 액센트를 사용하지 않습니다 — 스크린샷은 중성 그레이와 함께 단일 블루 액센트(#1D4ED8)를 보여줍니다 버튼에 둥근 사각형을 사용하지 않습니다 — 스크린샷은 완전한 radius를 갖춘 알약 형태 버튼을 사용합니다 모든 곳에 대문자 텍스트를 사용하지 않습니다 — 스크린샷은 대문자를 마이크로 라벨에만 예약합니다 주요 콘텐츠에 그라데이션 배경을 사용하지 않습니다 — 스크린샷은 평면 흰색 표면을 보여줍니다 피하기: 지나치게 캐주얼하거나 대화체인 언어 피하기: 컨텍스트 없는 기술 용어 피하기: 과도한 느낌표 피하기: 모호하거나 추상적인 가치 제안
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
Evidence.dev는 비즈니스 인텔리전스를 코드로 제시하는 개발자 중심 분석 플랫폼입니다. 디자인은 깔끔한 흰색 배경(#FFFFFF)을 기본 검정 텍스트(#111827)와 단일 블루 액센트(#1D4ED8)와 함께 사용합니다. 타이포그래피는 본문 텍스트에는 humanist sans를, 메인 폰트 패밀리로는 Geist를 사용하며, 히어로 헤드라인에는 transitional serif를 결합합니다. 레이아웃은 넉넉한 여백, 중앙 정렬 콘텐츠, 그리고 가벼운 테두리를 통한 미세한 카드 상승 효과를 특징으로 합니다. 핵심 주의 사항: 다크 모드를 절대 사용하지 않으며, 콘텐츠 영역에 무거운 그림자나 그라데이션을 피하며, 기술 콘텐츠에 장식용 글꼴을 절대 사용하지 않습니다. 인터페이스는 데이터 제품을 구축하는 기술 대상을 위해 가독성과 전문적 신뢰성을 우선시합니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 기술적 신뢰성과 접근 가능하고 깔끔한 UI의 균형을 이루며, 기술 및 비즈니스 이해관계자 모두에게 어필하는 개발자 중심 SaaS 디자인의 훌륭한 예시로 포함할 가치가 있습니다.