큐레이션 · 오픈 · 무료

Campsite

시끄러운 채팅을 정돈된 게시물로 대체하는, 집중된 팀 커뮤니케이션 도구입니다.

01

디자인 DNA

팀 게시물을 위한 조용하고 잘 정돈된 도서관.

02

컬러

고대비 미니멀리즘: 진한 잉크색으로 고정된 선명한 흰색 표면과 주요 액션을 위한 선명한 오렌지-레드 악센트.

03

타이포그래피

humanist-sans · monospace

• display56px · 500
• h232px · 600
• body16px · 400
• small14px · 400

큰 디스플레이 텍스트에 네거티브 자간 적용 · 본문에는 일반 굵기 사용 · 섹션 제목에는 세미볼드 사용

04

여백

일관된 4px 기본 그리드

05

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

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

0px 3px 6px -3px rgba(0, 0, 0, 0.05) · 0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 1px 0px -1px rgba(0, 0, 0, 0.05)

06

레이아웃

중앙 정렬된 콘텐츠와 풍부한 여백을 갖춘 표준 마케팅 사이트 레이아웃.

07

모션과 인터랙션

hover 시 부드러운 색상 전환 · 상호작용 시 미세한 box-shadow 이동

미세한 색상 또는 배경 변화. · 즉각적인 시각적 피드백.

08

컴포넌트

• button 둥근 알약 형태의 아웃라인 또는 솔리드 프라이머리 컬러 버튼.
• card 미세한 테두리와 부드러운 그림자를 가진 깔끔한 흰색 컨테이너.
• chip 미세한 배경을 가진 작은 둥근 라벨.
• input 가벼운 테두리가 있는 표준 텍스트 필드.
• hero 지원 서브텍스트와 제품 스크린샷을 포함한 큰 중앙 정렬 헤드라인.

09

보이스와 금지 목록

• 톤 전문적이면서도 접근 가능한 어조.
• 헤드라인 간결하고 직접적이며, 혜택 중심적.
• CTA 둥근 버튼 안에 들어가는 간단하고 행동 지향적인 텍스트.

• 깊거나 다크 모드 배경을 사용하지 마세요 — 스크린샷은 밝은 흰색 표면(#ffffff)을 보여줍니다.
• 날카롭고 둥글지 않은 모서리를 사용하지 마세요 — 스크린샷은 알약 형태(9999px)와 둥근 카드(8px–12px)를 보여줍니다.
• 크고 복잡한 그라디언트를 사용하지 마세요 — 스크린샷은 깔끔하고 평평한 배경과 단일 오렌지 악센트를 보여줍니다.
• 지나치게 장식적이거나 스크립트 폰트를 사용하지 마세요 — 스크린샷은 깔끔하고 기능적인 산세리프체를 보여줍니다.
• 요소들을 너무 가깝게 배치하지 마세요 — 스크린샷은 풍부한 여백(기본 4px 그리드)을 보여줍니다.
• 강한 드롭 그림자를 사용하지 마세요 — 스크린샷은 매우 미세하고 불투명도가 낮은 box-shadow를 보여줍니다.
• 피하기: 전문 용어가 과도한 언어
• 피하기: 지나치게 크고 공격적인 마케팅 카피
• 피하기: 시각적 혼잡

10

팩 안의 실제 스크린샷

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

11

System Prompt

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