큐레이션 · 오픈 · 무료

Prismic

전환율을 높이기 위한 headless CMS 및 랜딩 페이지 빌더입니다.

01

디자인 DNA

개발자와 마케팅 팀이 고성능 웹사이트를 구축할 수 있는 깔끔하고 전문적인 작업 공간입니다.

02

컬러

명확성을 위한 고대비 흑백에 핵심 동작과 강조를 표시하기 위한 단일 녹색 강조색을 사용합니다.

03

타이포그래피

geometric-sans · humanist-sans

• display56px · 700
• heading40px · 500
• body18px · 500
• small14px · 500

제목에는 현대적이고 기술적인 느낌을 전달하기 위해 기하학적 산세리프를 사용합니다. · 본문에는 가독성을 보장하기 위해 인본주의 산세리프를 사용합니다. · 장식적이거나 지나치게 복잡한 폰트는 사용하지 않습니다.

04

여백

표준 16px 및 32px padding/margin 증가분을 사용하는 일관된 4px 그리드입니다.

05

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

1px solid rgba(238,238,238,1)

0px 1px 6px 0px rgba(0,0,0,0.06) · 0px 2px 32px 0px rgba(0,0,0,0.16)

06

레이아웃

최대 너비 컨테이너에 중앙 정렬된 콘텐츠와 섹션 간 넉넉한 수직 간격입니다.

07

모션과 인터랙션

hover 및 focus 상태에서의 색상, background-color 및 opacity에 대한 표준 전환입니다.

버튼 및 링크와 같은 상호작용 요소에 대한 미묘한 색상 또는 background-color 변경입니다. · 상태 변경을 통한 즉각적인 시각적 피드백입니다.

08

컴포넌트

• button 주요 동작을 위한 검정색 채워진 버튼과 보조 동작을 위한 흰색 테두리 버튼입니다. 모두 모서리가 둥글고 넉넉한 padding을 가집니다.
• card 미묘한 테두리나 부드러운 그림자를 가진 흰색 배경 카드로, 사례 연구 증언을 포함합니다.
• chip 예를 들어 '페이지 로딩 시간 50% 단축'과 같은 통계를 표시하기 위해 밝은 배경과 둥근 모서리를 사용합니다.
• input 1px 테두리와 8px border radius를 가진 표준 텍스트 입력 필드입니다.
• hero 강렬한 강조색으로 중앙 정렬된 큰 헤드라인과 그 뒤에 따르는 서브헤드라인 및 두 개의 주요 call-to-action 버튼입니다.

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있으며 유용한 어조입니다.
• 헤드라인 직관적이며 이점 중심이며, 강조를 위해 굵은 강조 단어를 사용합니다.
• CTA 명확하고 행동 중심적입니다(예: '지금 시작하기', '데모 요청하기').

• 다색 팔레트를 사용하지 마세요. 스크린샷은 단일 녹색 강조색을 가진 단색 기반을 보여줍니다.
• 세리프 폰트를 사용하지 마세요. 제목과 본문 모두 엄격하게 산세리프입니다.
• 무거운 drop shadow를 사용하지 마세요. UI는 깊이를 위해 미묘한 box shadow 또는 간단한 테두리를 사용합니다.
• 밀집하고 지저분한 레이아웃을 사용하지 마세요. 디자인은 여백과 명확한 시각적 계층 구조를 강조합니다.
• 복잡한 gradient를 사용하지 마세요. 배경은 단색입니다.
• 저대비 텍스트를 사용하지 마세요. 흑백 색상 스킴은 높은 가독성을 보장합니다.
• 피하기: 모호한 표현
• 피하기: 지나치게 기술적인 전문 용어
• 피하기: 공격적인 판매 어조

10

팩 안의 실제 스크린샷

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

11

System Prompt

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