큐레이션 · 오픈 · 무료

Evidence

데이터 대시보드를 코드로 취급하며, 개발자 워크플로우와 깔끔하고 전문적인 UI를 결합하는 비즈니스 인텔리전스 플랫폼입니다.

01

디자인 DNA

개발자 중심 분석 도구를 위한 현대적인 문서 사이트

02

컬러

기술적 정밀함을 위한 단일 블루 액센트를 사용한 중성 그레이

03

타이포그래피

transitional-serif · humanist-sans · geometric-sans

• display56px · 500
• heading36px · 500
• body16px · 400
• caption14px · 400
• micro12px · 500

대문자 마이크로 텍스트에 letter-spacing 0.4px를 사용합니다 · 큰 디스플레이 헤드라인에 letter-spacing -1.5px를 사용합니다 · 16px 본문 텍스트는 line-height 1.5를 유지합니다 · 본문 내 강조에 weight 600를 사용합니다 · 인터랙티브 요소에 weight 500를 사용합니다

04

여백

일관된 4px 기본 그리드와 섹션 간 넉넉한 수직 spacing

05

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

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

레이아웃

넉넉한 수평 padding과 명확한 시각적 계층을 갖춘 중앙 정렬 콘텐츠

07

모션과 인터랙션

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

팩 안의 실제 스크린샷

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

11

System Prompt

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