큐레이션 · 오픈 · 무료

Promlyapp

청년 연결과 옹호를 촉진하는 대담하고 사진 중심의 사이트입니다.

01

디자인 DNA

청년 옹호를 위한 활기찬 디지털 커뮤니티 센터입니다.

02

컬러

감정적 몰입을 위한 생동감 있는 보라색 강조점이 포함된 고대비 다크 모드입니다.

03

타이포그래피

humanist-sans · monospace

• display60px · 300
• h228px · 300
• body18px · 300

주요 제목에는 Poppins를, 본문 텍스트에는 Avenir를 사용합니다. · 가독성을 위해 넉넉한 줄 높이를 유지합니다. · 글자 간격은 엄격하게 제한합니다.

04

여백

큰 섹션과 일관된 패딩을 통해 수직 리듬을 확립합니다.

05

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

얇은 1px solid rgba(255, 255, 255, 0.5)

rgba(150, 163, 181, 0.08) 0px 4px 24px 0px · rgba(102, 77, 255, 0.2) 0px 4px 100px 0px

06

레이아웃

히어로 섹션은 텍스트와 이미지 그리드를 분리하며, 보조 섹션은 전체 너비 또는 카드 그리드를 사용합니다.

07

모션과 인터랙션

버튼과 링크의 hover 시 부드러운 전환 효과.

미세한 색상 변화와 투명도 변경. · 시각적 피드백을 통한 즉각적인 반응.

08

컴포넌트

• button 흰색 텍스트가 들어간 보라색 둥근 사각형 버튼입니다.
• card 큰 border-radius를 가진 사진 카드입니다.
• chip 작은 border-radius를 가진 배지와 태그입니다.
• input 미세한 테두리가 있는 표준 폼입니다.
• hero 큰 타이포그래피와 사진 콜라주가 포함된 분할 레이아웃입니다.

09

보이스와 금지 목록

• 톤 권한을 부여하고, 포용적이며, 긴박합니다.
• 헤드라인 직설적이고 영감을 줍니다.
• CTA 명확한 행동 유도.

• 밝거나 파스텔 배경을 사용하지 마세요 — 스크린샷은 깊은 검은색(#000000) 배경을 보여줍니다.
• 얇고 압축된 서체를 사용하지 마세요 — 스크린샷은 기하학적 휴머니스트 산세리프(Poppins/Avenir)를 보여줍니다.
• 이미지에 직사각형 모서리를 사용하지 마세요 — 스크린샷은 둥근 모서리(최대 20px)를 보여줍니다.
• 다양한 범위의 강조 색상을 사용하지 마세요 — 스크린샷은 단일 지배적인 보라색 강조점을 보여줍니다.
• 작고 조밀한 텍스트를 사용하지 마세요 — 스크린샷은 넉넉한 줄 높이를 가진 크고 읽기 쉬운 타이포그래피를 보여줍니다.
• 그리드가 많고 경직된 레이아웃을 사용하지 마세요 — 스크린샷은 유동적이고 사진 중심의 콜라주를 보여줍니다.
• 피하기: 냉소주의
• 피하기: 복잡한 전문 용어
• 피하기: 수동태

10

팩 안의 실제 스크린샷

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

11

System Prompt

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