큐레이션 · 오픈 · 무료

Fathom

단순하고 프라이버시 중심적인 Google Analytics 대안.

01

디자인 DNA

복잡성보다 프라이버시를 우선시하는 웹 분석을 위한 차분하고 미니멀한 대시보드.

02

컬러

중립적이고 고대비의 팔레트를 사용하며, 주요 액션을 위한 단일의 선명한 보라색 강조색이 포함됩니다.

03

타이포그래피

humanist-sans · monospace

• display56px · 500
• heading40px · 500
• body18px · 400
• caption14px · 400

선명한 텍스트 렌더링을 위해 -webkit-font-smoothing: antialiased를 사용합니다. · 최적의 가독성을 위해 줄 길이를 약 680px로 제한합니다. · 코드 스니펫이나 데이터 테이블에는 monospace 글꼴을 사용합니다.

04

여백

단순함을 강조하기 위한 넉넉한 여백의 4px 기본 그리드입니다.

05

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

1px solid rgba(24, 27, 25, 0.1)

None: None

06

레이아웃

히어로 아래에 2열 기능 그리드가 있는 단일 열 중앙 정렬 레이아웃입니다.

07

모션과 인터랙션

콘텐츠가 뷰포트에 진입할 때의 미묘한 fade-in 효과. · 인터랙티브 요소에서의 매끄러운 색상 및 배경 전환.

버튼과 링크에서의 색상 변경 또는 미묘한 배경 이동. · 활성 상태를 나타내기 위한 약간의 스케일 또는 색상 변경.

08

컴포넌트

• button 높은 대비의 둥근 모서리가 있는 단색 버튼입니다. 주요 버튼은 강조색을, 보조 버튼은 어두운 중립색을 사용합니다.
• card 기능 하이라이트와 데이터 테이블에 사용되는 최소한의 테이블이나 미묘한 그림자가 있는 깨끗한 카드입니다.
• chip 'New'와 같은 레이블에 사용되는 밝은 배경과 어두운 텍스트의 작은 둥근 모서리 태그입니다.
• input 깨끗한 테이블과 미묘한 focus 상태를 가진 간단한 텍스트 입력란입니다.
• hero 왼쪽에 크고 굵은 타이포그래피가, 오른쪽에 데이터 시각화 또는 모의 화면이 배치됩니다.

09

보이스와 금지 목록

• 톤 명확하고 직접적이며 안심시키는 어조입니다.
• 헤드라인 단순함과 프라이버시를 강조하는 굵고 혜택 중심적인 문장.
• CTA '무료 체험 시작'과 같이 번개 아이콘과 함께 사용되는 행동 지향적인 문구.

• 복잡한 그라데이션이나 무거한 질감을 사용하지 마세요 — 스크린샷은 깨끗하고 평평한 배경을 보여줍니다.
• 밝고 다채로운 팔레트를 사용하지 마세요 — 스크린샷은 단일의 보라색 강조색을 사용합니다.
• 장식적이거나 과장된 스타일의 글꼴을 사용하지 마세요 — 스크린샷은 깨끗한 sans-serif를 사용합니다.
• 过多의 요소로 UI를 복잡하게 만들지 마세요 — 스크린샷은 여백과 명확성을 우선시합니다.
• 다크 모드를 기본으로 사용하지 마세요 — 스크린샷은 밝은 테마의 인터페이스를 보여줍니다.
• 모든 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 일부 UI 요소에 각진 모서리를 사용합니다.
• 피하기: 기술 용어나 복잡한 마케팅 표현.
• 피하기: 공격적이거나 고압적인 영업 언어.
• 피하기: 모호하거나 지나치게 추상적인 혜택.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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