큐레이션 · 오픈 · 무료

Contentful

엔터프라이즈 콘텐츠 관리 및 개인화를 위한 전문적인 SaaS 플랫폼입니다.

01

디자인 DNA

개발자와 콘텐츠 팀을 위한 깔끔하고 전문적인 작업 공간으로, 명확성과 효율성을 강조합니다.

02

컬러

명확성과 신뢰를 위한 부드러운 블루 악센트 팔레트를 사용한 전문적인 절제미.

03

타이포그래피

humanist-sans · monospace

• display72px · 400
• heading56px · 400
• body-lg18px · 400
• body16px · 400
• small14px · 600

헤드라인에는 임팩트를 위해 타이트한 마이너스 자간을 사용합니다. · 본문 텍스트는 가독성을 위해 넉넉한 행간을 유지합니다. · 글꼴 두께는 UI 요소에 주로 regular(400)와 semibold(600)를 사용합니다.

04

여백

그리드 항목 및 섹션 간 일관된 32px 간격.

05

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

1px solid #E5E7EB

rgba(0, 0, 0, 0.25) 0px 0px 20px 0px

06

레이아웃

폭넓은 네비게이션 바와 넉넉한 수직 패딩을 갖춘 중앙 정렬 콘텐츠.

07

모션과 인터랙션

hover 시 부드러운 색상 및 background-color 전환. · UI 상태 변경 시 transform 및 불투명도 전환.

텍스트 링크의 색상 변경과 버튼의 배경 이동. · 미세한 transform 또는 불투명도 감소.

08

컴포넌트

• button 단색 다크 배경과 흰색 텍스트를 사용한 둥근 형태의 기본 버튼, 또는 아웃라인된 보조 버튼.
• card 기능 및 후기용으로 사용되는 미세한 테두리나 부드러운 배경을 가진 깔끔한 컨테이너.
• chip 기능 태그나 내비게이션용 아이콘이 포함된 작은 둥근 형태 요소.
• input 미세한 테두리와 둥근 모서리를 가진 깔끔하고 미니멀한 입력 필드.
• hero 부드러운 색상 배경 위에 지지하는 일러스트레이션이나 사진이 있는 크고 임팩트 있는 헤드라인.

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있으며 약간 기술적인 어조로, 개발자와 마케터를 지원하는 데 목적이 있습니다.
• 헤드라인 직접적이고 혜택 지향적이며 때로는 재치 있게 (예: 히어로의 'whatever').
• CTA 'Explore', 'Log in', 'Contact sales'와 같은 행동을 유도하는 동사.

• 세리프 글꼴을 사용하지 마세요 — 스크린샷은 전체적으로 깔끔한 휴머니스트 산세리프를 보여줍니다.
• 네온색이나 매우 채도 높은 악센트 색상을 사용하지 마세요 — 스크린샷은 주요 악센트로 은은하고 전문적인 블루(#3C80CF)를 보여줍니다.
• 배경에 복잡한 그래디언트를 사용하지 마세요 — 스크린샷은 대부분 단색 흰색이나 매우 부드럽고 평탄한 색상 영역(#F5F7F9, #E4EFF8)을 보여줍니다.
• 모든 곳에 두껍고 어두운 테두리를 사용하지 마세요 — 스크린샷은 가볍고 미세한 테두리(#E5E7EB)나 테두리 없는 디자인을 보여줍니다.
• 본문 텍스트에 지나치게 타이트한 행간을 사용하지 마세요 — 스크린샷은 편안하고 읽기 쉬운 행간(약 1.55)을 보여줍니다.
• 버튼이나 카드에 날카로운 90도 모서리를 사용하지 마세요 — 스크린샷은 일관되게 둥근 모서리(4px ~ 999px)를 보여줍니다.
• 피하기: 지나치게 캐주얼한 속어
• 피하기: 수동태
• 피하기: 데이터 없이 모호한 약속

10

팩 안의 실제 스크린샷

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

11

System Prompt

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