큐레이션 · 오픈 · 무료

Qatalog

업무 확산을 줄이고 생산성을 통합하는 기업 등급 AI 워크스페이스입니다.

01

디자인 DNA

도구와 정보를 통합하는, 현대 팀을 위한 AI 기반 지휘 센터입니다.

02

컬러

고품질에 집중된 미학을 위해 깔끔하고 고대비의 흰색 기반에 중성적인 회색과 단일 보라색 악센트를 사용합니다.

03

타이포그래피

humanist-sans · monospace

• display60px · 700
• headline18px · 500
• body16px · 400
• caption14px · 400

디스플레이 제목은 권위를 전달하기 위해 좁은 자간과 굵은 굵기를 사용합니다. · 본문 텍스트는 가독성을 위해 편안한 행간을 유지합니다. · 모노스페이스는 특정 기술 레이블이나 코드 요소에만 사용합니다.

04

여백

4px의 배수를 통해 일관된 수직 및 수평 리듬을 확립합니다.

05

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

카드 가장자리와 컨테이너를 정의하기 위한 연한 회색의 은은한 1px 테두리입니다.

0px 4px 12px rgba(0, 0, 0, 0.08)

06

레이아웃

데스크톱에서는 다중 컬럼 그리드에서 모바일에서는 단일 컬럼 스택으로 전환되는 반응형 레이아웃입니다.

07

모션과 인터랙션

인터랙티브 요소에 대한 은은한 불투명도 및 transform 전환. · UI 상태 변화를 위한 부드러운 ease 전환.

상호작용을 나타내기 위해 배경색이나 텍스트 굵기의 은은한 변화를 적용합니다. · 색상 변화나 은은한 스케일링을 통해 즉각적인 시각적 피드백을 제공합니다.

08

컴포넌트

• button 주요 버튼은 둥근 알약 형태의 고대비 디자인이고, 보조 버튼은 더 밝은 배경을 사용합니다.
• card 카드는 은은한 테두리와 넉넉한 내부 패딩으로 정의되며, 때로는 부드러운 그래디언트나 배경 이미지를 사용합니다.
• chip 상태 업데이트나 카테고리 표시에 사용되는 작고 둥근 태그 또는 레이블입니다.
• input 검색 바는 두드러진 둥근 모서리와 통합된 아이콘을 특징으로 합니다.
• hero AI 중심의 역동적인 일러스트레이션이나 제품 목업과 함께 배치되는 큰 텍스트 중심 섹션입니다.

09

보이스와 금지 목록

• 톤 자신감 있고, 전문적이며, 미래 지향적입니다.
• 헤드라인 AI 통합과 통합된 업무를 강조하는 명확하고 혜택 중심적인 진술입니다.
• CTA 무료 여정 시작이나 데모 요청에 초점을 맞춘 직접적이고 행동 지향적인 스타일입니다.

• 다크 테마를 주요 모드로 사용하지 마세요 — 스크린샷은 어두운 텍스트의 라이트 테마를 보여줍니다.
• 장식용 세리프 폰트를 사용하지 마세요 — 스크린샷은 전체적으로 휴머니스트산세리프 폰트를 보여줍니다.
• 주요 악센트로 채도가 높은 네온 컬러를 사용하지 마세요 — 스크린샷은 보라색 악센트가 있는 절제된 팔레트를 보여줍니다.
• 주요 버튼에 날카롭고 네모난 모서리를 사용하지 마세요 — 스크린샷은 둥근 알약 형태를 보여줍니다.
• 지나치게 많은 드롭 섀도우나 무거운 3D 효과를 사용하지 마세요 — 스크린샷은 깔끔하고 평면적이거나 은은하게 테두리가 있는 표면을 보여줍니다.
• 모바일용으로 복잡한 다중 컬럼 그리드를 사용하지 마세요 — 스크린샷은 작은 화면에서 단일 컬럼 스택을 보여줍니다.
• 피하기: 지나치게 기술적인 전문 용어
• 피하기: 수동적인 어조
• 피하기: 일반적인 기업용 유행어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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