큐레이션 · 오픈 · 무료

Tiptap

리치 텍스트 에디터를 구축하고 맞춤 설정하기 위한 프리미엄 개발자 플랫폼입니다.

01

디자인 DNA

현대적인 텍스트 에디터를 구축하기 위한 세련되고 전문적인 도구 키트입니다.

02

컬러

강조를 위해 생생한 그라디언트 포인트가 들어간 고대비 흑백 팔레트입니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display96px · 700
• h156px · 700
• body22px · 400
• small16px · 400
• caption12px · 400

크고 임팩트 있는 헤드라인에는 geometric-sans를 사용합니다. · 가독성 높은 본문과 내비게이션에는 humanist-sans를 사용합니다. · 본문 텍스트의 두께는 최대 가독성을 위해 400으로 유지합니다.

04

여백

미세 조정을 위한 4px 서브 그리드가 포함된 8px 기본 그리드입니다.

05

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

1px solid rgba(0,0,0,0.1) 또는 solid 1px border-color: rgb(13, 13, 13)

0 4px 10px 0 rgba(0,0,0,0.04) · 0 1px 4px 0 rgba(0,0,0,0.03) · 0 1px 2px 0 rgba(0,0,0,0.02)

06

레이아웃

최대 너비 컨테이너와 큰 여백을 가진 12컬럼 그리드이며, 모바일에서는 섹션이 수직으로 쌓입니다.

07

모션과 인터랙션

색상, 변형 및 border-radius에 대한 부드러운 전환입니다. · 인터랙티브 요소의 스케일 애니메이션입니다. · 모든 인터랙티브 상태에 걸친 일관된 이징입니다.

hover 시 배경색 변화 또는 미세한 변형 효과입니다. · click 시 스케일 축소 또는 불투명도 변화입니다.

08

컴포넌트

• button 주요 액션을 위한 둥근 모서리의 고대비 단색 버튼입니다.
• card 템플릿을 보여주기 위한 미묘한 그림자와 둥근 모서리가 있는 깔끔한 카드입니다.
• chip '유료', '무료'와 같은 분류를 위한 작은 둥근 모서리의 태그입니다.
• input 둥근 모서리의 깔끔한 테두리가 있는 입력 필드입니다.
• hero 생생한 그라디언트 배경과 통합된 에디터 UI를 갖춘 크고 굵은 타이포그래피 헤드라인입니다.

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있으며, 개발자에 초점을 맞춘 톤입니다.
• 헤드라인 직설적이고 행동 지향적이며 굵은 스타일입니다.
• CTA 명확하고 간결하며, 속도와 프로덕션 레디함을 강조합니다.

• 다크 모드를 사용하지 마세요 — 스크린샷은 주로 밝은 배경을 보여줍니다.
• 세리프 글꼴을 사용하지 마세요 — 스크린샷은 모든 텍스트에 대한 산세리프 타이포그래피를 보여줍니다.
• 저대비 텍스트를 사용하지 마세요 — 스크린샷은 높은 가독성을 위해 밝은 배경 위의 어두운 텍스트를 보여줍니다.
• 복잡하고 지저분한 레이아웃을 사용하지 마세요 — 스크린샷은 깔끔하고 중앙 정렬되며 간격이 잘 잡힌 섹션을 보여줍니다.
• 단일 단색 배경색을 사용하지 마세요 — 스크린샷은 생생한 그라디언트 배경을 보여줍니다.
• 날카롭고 사각진 모서리를 사용하지 마세요 — 스크린샷은 모든 표면에 둥근 모서리(8-16px)를 보여줍니다.
• 피하기: 지나치게 캐주얼하거나 장난스러운 언어.
• 피하기: 개발자 커뮤니티에서 표준이 아닌 전문 용어.
• 피하기: 모호한 가치 제안.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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