큐레이션 · 오픈 · 무료

Thankyoumachine Zendesk

명확한 커뮤니케이션과 강한 타이포그래피 계층에 초점을 맞춘, 전문적이고 고대비의 SaaS 도움말 센터 페이지입니다.

01

디자인 DNA

SaaS 플랫폼을 위한 깔끔하고 전문적인 헬프 데스크 인터페이스

02

컬러

주요 액션을 위한 단일의 선명한 차트리즈 포인트 컬러가 포함된 고대비 블랙 & 화이트 팔레트입니다.

03

타이포그래피

humanist-sans

• display68px · 600
• displaySmall42px · 600
• displaySmall32px · 500
• body16px · 400
• caption14px · 400

주요 헤드라인은 타이트한 행간과 음수 자간을 사용하는 볼드한 휴머니스트산스체입니다. · 본문 텍스트는 가독성을 위해 편안한 1.5의 행간을 유지합니다. · 버튼은 강조를 위해 약간 더 두꺼운 무게(500-600)를 사용합니다. · 푸터 텍스트는 밀집된 정보 전달을 위해 더 작은 크기(14px)를 사용합니다.

04

여백

섹션 간 풍부한 여백을 두른 일관된 8px 그리드 리듬입니다.

05

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

1px solid rgba(0,0,0,0.1)

rgba(0,0,0,0.08) 0px 8px 24px 0px

06

레이아웃

여유 있는 마진과 헤더, 히어로, 푸터 섹션 간 명확한 구분을 갖춘 표준 12열 그리드 레이아웃입니다.

07

모션과 인터랙션

인터랙티브 요소의 부드러운 배경 위치 전환. · hover 상태의 linear 마이크로 인터랙션. · 주요 레이아웃 전환을 위한 cubic-bezier 트랜지션.

인터랙티브 요소의 은은한 배경색 전환. · 커서 포인터를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 고대비 포인트 컬러 배경의 둥근 형태(필) 주요 버튼과, 은은한 아웃라인이 적용된 보조 버튼입니다.
• card 이 뷰에는 명시적으로 표시되지 않았으나, 히어로 이미지는 둥근 형태의 컨테이너를 사용합니다.
• chip 이 뷰에는 포함되지 않았습니다.
• input 이 뷰에는 포함되지 않았습니다.
• hero 좌측의 큰 헤드라인과 우측의 둥근 이미지 컨테이너로 구성된 분할 레이아웃이며, 풍부한 여백으로 구분됩니다.

09

보이스와 금지 목록

• 톤 오류 메시지를 전달할 때조차 도움이 되고, 전문적이며, 간결한 어조입니다.
• 헤드라인 부정적인 메시지를 완화하기 위해 크고 볼드하며, 약간 구어체인 헤드라인 스타일('아, 이 도움말 센터는 더 이상 존재하지 않습니다')입니다.
• CTA 명확하고 행동을 유도하는 버튼('가이드 읽기', '무료 체험')과 고대비 스타일입니다.

• 주요 콘텐츠 영역에 어두운 배경을 사용하지 마십시오 — 스크린샷은 깨끗한 화이트 배경을 보여줍니다.
• 헤드라인에 세리프 서체를 사용하지 마십시오 — 스크린샷은 모든 텍스트에 휴머니스트산스체를 사용합니다.
• 주요 텍스트에 저대비 색상을 사용하지 마십시오 — 스크린샷은 화이트 배경 위의 고대비 블랙을 사용합니다.
• 날카롭고 직사각형의 버튼을 사용하지 마십시오 — 스크린샷은 충분한 border-radius가 적용된 둥근 형태(필) 버튼을 사용합니다.
• 히어로 섹션에 여러 요소를 빽빽이 배치하지 마십시오 — 스크린샷은 풍부한 여백을 두른 깔끔한 분할 레이아웃을 보여줍니다.
• 텍스트나 배경에 포인트 컬러를 사용하지 마십시오 — 스크린샷은 고대비 버튼에만 이를 제한적으로 사용합니다.
• 피하기: 사용자에게 노출되는 텍스트에 지나치게 기술적인 전문 용어를 사용하지 마십시오.
• 피하기: 명확한 계층 없이 밀집된 텍스트 블록을 사용하지 마십시오.
• 피하기: 주요 행동 유도(CTA) 이외의 용도로 포인트 컬러를 사용하지 마십시오.

11

System Prompt

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