큐레이션 · 오픈 · 무료

Sprout Place

친구들과 가상 모임 공간을 만들기 위한 따뜻하고 장난스러운 플랫폼.

01

디자인 DNA

친구들을 위한 유쾌하고 초대적인 디지털 모임 공간.

02

컬러

주된 겨자색과 다크 버건디를 중심으로 한 따뜻한 고대비 어스 톤.

03

타이포그래피

didone-serif · humanist-sans

• display104px · 400
• headline24px · 400
• body16px · 400

디스플레이 헤드라인에는 촘촘한 자간의 고대비 디도네 세리프를 사용합니다. · 본문 텍스트에는 깔끔한 휴머니스트 산세리프를 사용합니다. · 내비게이션 및 보조 텍스트에는 더 작은 산세리프 웨이트를 사용합니다.

04

여백

8px 기본 그리드에 섹션 간 여유로운 수직 간격(96px)을 적용합니다.

05

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

1px solid rgba(62,8,8,1.0)

rgba(0, 0, 0, 0.2) 0px 4px 10px 0px

06

레이아웃

전체 너비 섹션에 중앙 정렬된 콘텐츠 컨테이너와 여유로운 수직 패딩을 사용합니다.

07

모션과 인터랙션

스크롤 시 투명도 전환(0.75초 선형). · 인터랙티브 요소의 부드러운 hover 상태(0.25초 선형).

인터랙티브 요소에서 커서가 포인터로 변경됩니다. · 미세한 투명도 또는 색상 변화가 있습니다.

08

컴포넌트

• button 흰색 텍스트와 hover 전환이 적용된 다크 버건디 둥근 약형 버튼입니다.
• card 인터페이스 목업과 사용자 아바타를 위한 둥근 컨테이너(15px 반경)입니다.
• chip 사용자 이름('May-Li', 'Julius' 등)을 위한 작은 둥근 약형 태그입니다.
• input 미세한 테두리와 둥근 모서리가 적용된 밝은 배경입니다.
• hero 단색 배경 위의 큰 중앙 정렬 텍스트와 떠 있는 아바타 요소입니다.

09

보이스와 금지 목록

• 톤 초대적이고, 캐주얼하며, 장난스러운.
• 헤드라인 대담하고 간결하며 호소력 있는('당신의 공간, 당신의 선택').
• CTA 직설적이고 혜택 중심인('Sprout를 무료로 시작하세요').

• 차갑고 임상적인 팔레트를 사용하지 마세요 — 스크린샷은 따뜻한 주도적인 겨자색(#F3D468)과 다크 버건디(#3E0808)를 보여줍니다.
• 헤드라인에 순전히 기하학적인 산세리프를 사용하지 마세요 — 스크린샷은 디스플레이 텍스트에 고대비 디도네 세리프를 사용합니다.
• 좁고 빡빡한 간격을 사용하지 마세요 — 스크린샷은 여유로운 패딩(96px)과 섹션 간 명확한 시각적 분리를 보여줍니다.
• 기본 컨테이너에 날카롭고 0px의 모서리를 사용하지 마세요 — 스크린샷은 둥근 모서리(15px 이상)를 일관되게 사용합니다.
• 평면적이고 그레이스케일 인터페이스를 사용하지 마세요 — 스크린샷은 다채로운 포인트가 있는 활기차고 고대비의 따뜻한 팔레트를 보여줍니다.
• 밀집되고 문단이 긴 레이아웃을 사용하지 마세요 — 스크린샷은 짧고 임팩트 있는 헤드라인과 최소한의 본문 텍스트를 보여줍니다.
• 피하기: 공식적인 기업 언어
• 피하기: 지나치게 기술적인 전문 용어
• 피하기: 빈번하고 밀집된 텍스트 블록

10

팩 안의 실제 스크린샷

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

11

System Prompt

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