큐레이션 · 오픈 · 무료

Statsig

제품 실험 및 분석을 위한 깨끗하고 high-trust한 SaaS 플랫폼입니다.

01

디자인 DNA

제품 팀을 위한 모던 엔터프라이즈 데이터 워크벤치.

02

컬러

핵심 인터랙티브 요소를 위한 단 하나의 선명한 블루 액센트가 있는 고대비 중성 팔레트.

03

타이포그래피

geometric-sans · monospace

• display50px · 500
• headline40px · 600
• subhead24px · 400
• body16px · 400
• small14px · 400
• micro12px · 400

본문 텍스트 색상은 #1F2328 · 보조 텍스트 색상은 #535963 · 액센트 요소는 #367EED 사용

04

여백

일관된 4px 기본 격자와 주요 섹션을 위한 20px, 40px, 80px 매크로 간격.

05

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

1px solid #1F2328

rgba(27, 37, 40, 0.05) 0px 0px 20px 0px · rgb(212, 215, 220) 0px 0px 0px 1px inset

06

레이아웃

중앙 정렬된 히어로가 있는 표준 상단 내비게이션 레이아웃, 그 뒤에 스택형 콘텐츠 섹션이 이어집니다.

07

모션과 인터랙션

버튼과 내비게이션 링크의 hover 상태 · focus 또는 hover 시 매끄러운 불투명도 전환

인터랙티브 요소에서 배경색이나 불투명도가 미묘하게 변화합니다. · 상태 변경 시 즉각적인 시각적 피드백을 제공합니다.

08

컴포넌트

• button dark 배경(#1F2328) 또는 테두리(outline) 스타일을 적용한 둥근 pill 형태.
• card 미묘한 그림자와 둥근 모서리를 가진 깨끗한 흰색 표면.
• chip 연한 회색 배경과 얇은 테두리가 있는 둥근 테두리.
• input 둥근 모서리가 있는 연한 회색 배경 또는 테두리가 있는 입력 필드.
• hero 아이소메트릭 제품 UI 스크린샷 위에 중앙 정렬된 대규모 타이포그래피.

09

보이스와 금지 목록

• 톤 직설적이고, 기술적이며, 자신감 있는 어조.
• 헤드라인 측정과 배포에 초점을 맞춘 강렬하고 행동 지향적인 문구.
• CTA 무료 계정 시작 또는 작동 방식 확인에 초점을 맞춘 명확하고 transactional한 문구.

• 무거운 drop shadow를 사용하지 마세요 — 스크린샷은 미묘하고 확산된 box shadow를 보여줍니다
• 둥근 사각형 모서리를 사용하지 마세요 — 스크린샷은 완벽하게 원형 pill 버튼을 보여줍니다
• 밝은 네온 액센트를 사용하지 마세요 — 스크린샷은 프로페셔널하고 muted한 블루(#367EED)를 보여줍니다
• 인터페이스를 복잡하게 하지 마세요 — 스크린샷은 풍부한 여백과 깔끔한 격자 기반 레이아웃을 보여줍니다
• 다양한 배경색을 사용하지 마세요 — 스크린샷은 엄격히 흰색과 연한 회색(#F6F6F6) 배경 시스템을 보여줍니다
• 장식용 폰트를 사용하지 마세요 — 스크린샷은 highly legible하고 중성적인 기하학적 sans-serif 타이포그래피를 보여줍니다
• 피하기: 모호한 마케팅 용어
• 피하기: 지나치게 장난스럽거나 캐주얼한 언어
• 피하기: 지저분하거나 복잡한 UI 패턴

10

팩 안의 실제 스크린샷

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

11

System Prompt

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