큐레이션 · 오픈 · 무료

Segment

복잡한 데이터 파이프라인을 간소화하는 전문적인 고객 데이터 플랫폼입니다.

01

디자인 DNA

고객 데이터를 위한 신뢰할 수 있는 인프라 배관

02

컬러

기술적이고 프리미엄한 느낌을 주는 고대비 다크 모드를 사용하며, 주요 작업에는 블루를 사용합니다.

03

타이포그래피

humanist-sans · monospace

• display56px · 700
• headline40px · 700
• body16px · 400

시각적 밀도를 유지하기 위해 큰 디스플레이 텍스트에는 타이트한 트래킹을 적용합니다. · 본문 텍스트의 표준 행간 1.75는 가독성을 보장합니다. · 폰트 웨이트는 보수적으로 유지하며, 주로 400과 700을 사용합니다.

04

여백

섹션 간 넉넉한 수직 간격은 차분하고 깔끔한 레이아웃을 만듭니다.

05

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

테두리를 최소화하며, 주로 버튼과 밑줄에 1px 또는 2px를 사용합니다.

0px 10px 37.5px 0px rgba(18, 28, 45, 0.15) · inset 0px 0px 0px 2px rgb(24, 102, 238) · inset 0px 0px 0px 2px rgb(255, 255, 255)

06

레이아웃

두드러진 히어로 섹션과 그 뒤의 다단 기능 그리드로 구성된 깔끔한 상단 집중형 레이아웃입니다.

07

모션과 인터랙션

인터랙티브 요소의 부드러운 배경색 및 색상 트랜지션. · 버튼과 링크에 대한 hover 시 미세한 변형 효과.

인터랙티브함을 나타내기 위해 배경색이나 불투명도의 미세한 변화. · 색상 변화를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 주요 작업에는 블루색으로 채워진 둥근 필 버튼을, 보조 작업에는 아웃라인 버튼을 사용합니다.
• card 콘텐츠 영역을 구분하기 위해 미세한 테두리나 배경 변화를 적용한 단순한 다크 카드입니다.
• chip 카테고리 분류를 위한 작고 둥근 알약 모양의 태그로, 밝은 배경과 어두운 텍스트를 사용합니다.
• input 명확한 테두리와 둥근 모서리를 가진 표준 폼 필드입니다.
• hero 큰 헤드라인, 지원 텍스트, 그리고 두드러진 일러스트레이션이 포함된 전체 폭의 다크 섹션입니다.

09

보이스와 금지 목록

• 톤 전문적이고, 도움이 되며, 직접적입니다.
• 헤드라인 명확하고 직접적이며, 신뢰를 구축하기 위해 종종 1인칭 복수형을 사용합니다.
• CTA 행동 지향적이고 구체적이며, 사용자를 다음 단계로 안내합니다.

• 복잡한 다색 그래디언트를 사용하지 마세요 — 스크린샷은 단색의 깊은 네이비 배경을 보여줍니다.
• 날카롭고 사각형의 모서리를 사용하지 마세요 — 스크린샷은 모든 컴포넌트에 둥근 모서리(4px, 8px, 50px)를 보여줍니다.
• 긴 단락에 중앙 정렬된 텍스트를 사용하지 마세요 — 스크린샷은 가독성을 위해 왼쪽 정렬된 본문 텍스트를 보여줍니다.
• 얇고 섬세한 타이포그래피를 사용하지 마세요 — 스크린샷은 굵고 명확한 헤드라인과 읽기 쉬운 본문 텍스트를 보여줍니다.
• 복잡한 내비게이션 바를 사용하지 마세요 — 스크린샷은 최소한의 항목을 가진 간단하고 상단 정렬된 내비게이션을 보여줍니다.
• 깊이감을 위해 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 플랫 디자인 미학을 위해 미세하고 부드러운 섀도우를 보여줍니다.
• 피하기: 지나치게 비공식적인 구어체
• 피하기: 공격적인 판매 언어
• 피하기: 불필요하게 복잡한 전문 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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