큐레이션 · 오픈 · 무료

Playful Software

중요한 사람들을 위한 개인 미니 앱을 만들고 공유하는 플랫폼.

01

디자인 DNA

개인적인 순간을 위한 디지털 캔버스

02

컬러

활기찬 핑크 악센트를 사용한 따뜻하고 초대감 있는 뉴트럴.

03

타이포그래피

humanist-sans

• display70px · 700

디스플레이 텍스트는 최대 임팩트를 위해 좁은 트래킹과 굵은 무게를 사용합니다. · 본문 텍스트는 일반적인 무게와 넉넉한 줄 높이로 편안한 가독성을 유지합니다. · 헤드라인은 강한 시각적 집중을 위해 중앙 정렬됩니다.

04

여백

메시지를 강조하기 위한 중앙 히어로 블록 주변의 넉넉한 여백.

05

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

카드 분리를 위한 rgb(232,229,224)를 사용한 미묘한 1px 테두리.

rgba(0, 0, 0, 0.14) 0px 4px 20px 0px · rgba(71, 71, 71, 0.1) 0px 2.18px 5.44px 0px

06

레이아웃

콘텐츠를 위한 풀 너비 그리드로 전환되는 싱글 컬럼 중앙 정렬 히어로 레이아웃.

07

모션과 인터랙션

장난스러운 UI 상호작용을 위한 탄력적 easing. · 부드러운 배경 및 불투명도 전환.

상호작용 요소에서 미묘한 색상 변화와 약간의 스케일링. · 커스텀 easing 커브를 사용한 탄력적 피드백.

08

컴포넌트

• button 악센트 컬러와 흰색 텍스트를 사용한 고대비 알약 모양 버튼.
• card 소프트 그림자가 있는 둥근 사각형 카드로, 역동적인 스택에서 종종 겹쳐 배치됩니다.
• chip 이메일 입력과 같은 폼 요소에 주로 사용되는 미니멀한 용도.
• input 미묘한 테두리가 있는 깔끔하고 둥근 입력 필드.
• hero 부드러운 그라데이션 배경 위의 대규모 굵은 타이포그래피와 떠 있는 3D 스타일 앱 아이콘.

09

보이스와 금지 목록

• 톤 친근하고 직접적이며 혁신적인.
• 헤드라인 개인적인 손길이 담긴 굵고 선언적인 문장.
• CTA '대기 목록에 참여하기'와 같이 행동을 유도하고 초대하는 스타일.

• muted한 기업용 그레이를 사용하지 마세요 — 스크린샷은 따뜻한 베이지/크림(#FAF7F5) 배경을 보여줍니다.
• 헤드라인에 얇고 장식적인 세리프를 사용하지 마세요 — 스크린샷은 굵고 볼드한 휴머니스트 산세리프를 보여줍니다.
• 어둡고 우울한 팔레트를 사용하지 마세요 — 스크린샷은 밝고 공기감 있으며 따뜻한 환경을 보여줍니다.
• 주요 요소에 날카로운 90도 모서리를 사용하지 마세요 — 스크린샷은 고 반경 알약과 둥근 카드를 보여줍니다.
• 수동적이고 미묘한 콜 투 액션을 사용하지 마세요 — 스크린샷은 활기찬 핑크(#FF2E95) 버튼을 보여줍니다.
• 과도한 테두리나 구분선을 사용하지 마세요 — 스크린샷은 미니멀하거나 보이지 않는 선으로 깔끔한 표면을 보여줍니다.
• 피하기: 기업용 전문 용어
• 피하기: 복잡한 기술 언어
• 피하기: 지나치게 공식적이거나 차가운 어조
• 피하기: 공격적인 판매 언어
• 피하기: 작고 수줍은 타이포그래피

10

팩 안의 실제 스크린샷

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

11

System Prompt

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