큐레이션 · 오픈 · 무료

Sandlandsleep

부드러운 그라데이션 배경과 굵은 노란색 강조색을 사용하여 사용자가 수면 고민 설문조사를 진행하도록 유도하는 미니멀한 웰니스 인터페이스입니다.

01

디자인 DNA

더 나은 수면을 위한 차분하고 프리미엄한 초대

02

컬러

생생한 노란색 강조색과 부드러운 시원한 그라데이션 배경 사이의 고대비입니다.

03

타이포그래피

humanist-sans · sans-serif

• display48px · 600
• subtitle20px · 400
• body14px · 400

04

여백

여유로운 간격으로 편안한 느낌을 주는 표준 base-4 수직 리듬

05

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

주요 아이콘 컨테이너 및 일부 UI 요소에 사용되는 solid 1px 검은색 테두리

0 4px 12px rgba(0,0,0,0.1) · 0 4px 20px rgba(0,0,0,0.1)

06

레이아웃

모바일 및 집중적인 데스크톱 오버레이를 위한 중앙 정렬 단일 열 스택

07

모션과 인터랙션

인터랙티브 요소에서 부드러운 색상 및 box-shadow 트랜지션

버튼의 background-color 또는 box-shadow 미세 변화 · background-color 변화를 통한 즉각적인 시각적 피드백

08

컴포넌트

• button 고대비 노란색 배경과 짙은 텍스트가 적용된 전체 폭 알약 모양 버튼입니다.
• card 해당 없음
• chip 해당 없음
• input 해당 없음
• hero 큰 타이포그래피와 간단한 일러스트레이션이 포함된 중앙 정렬 프로모션 오버레이입니다.

09

보이스와 금지 목록

• 톤 장난기 있고 직접적이며 초대하는 톤
• 헤드라인 대화형, 2인칭 질문 및 진술
• CTA 사용자 선택을 위한 명확하고 행동 지향적인 진술

• 어둡고 분위기 있는 배경을 사용하지 마세요 — 스크린샷은 밝고 부드러운 파란색 그라데이션을 보여줍니다.
• 날카롭고 직사각형 버튼을 사용하지 마세요 — 스크린샷은 완전히 둥근 알약 모양 버튼을 보여줍니다.
• 작고 비좁은 레이아웃을 사용하지 마세요 — 스크린샷은 수직으로 쌓이고 넓은 간격의 레이아웃을 보여줍니다.
• 복잡하고 다중 열 격자를 사용하지 마세요 — 스크린샷은 중앙 정렬된 단일 열을 보여줍니다.
• 저대비 버튼 텍스트를 사용하지 마세요 — 스크린샷은 밝은 노란색 배경에 짙은 텍스트를 보여줍니다.
• 섬세하고 파스텔 톤의 노란색 강조색을 사용하지 마세요 — 스크린샷은 생생하고 고채도의 노란색을 보여줍니다.
• 피하기: 임상 용어
• 피하기: 공격적인 판매 언어
• 피하기: 복잡한 의학 전문 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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