큐레이션 · 오픈 · 무료

Matter

집중적인 독서와 성장을 위한 현대적이고 수상에 빛나는 나중에 읽기 앱입니다.

01

디자인 DNA

프리미엄 디지털 독서 동반자

02

컬러

가독성과 시각적 휴식을 위한 어두운 고대비 캔버스입니다.

03

타이포그래피

geometric-sans · monospace

• display56px · 500
• h240px · 700
• h332px · 700
• body16px · 400
• small14px · 400
• micro12px · 400

모든 헤드라인과 UI 요소에 기하학적산스체를 사용합니다. · 큰 디스플레이 텍스트를 위해 타이트한 음수 트래킹을 유지합니다. · 가독성을 위해 먹색과 배경 간의 높은 대비를 보장합니다.

04

여백

콘텐츠를 강조하기 위한 넉넉한 여백을 갖춘 일관된 4px 기본 그리드입니다.

05

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

1px solid rgba(150, 150, 152, 0.1)

0px 4px 12px rgba(0, 0, 0, 0.3)

06

레이아웃

장문 읽기 및 사용 후기를 위한 단일 열 레이아웃으로 중앙 정렬된 콘텐츠입니다.

07

모션과 인터랙션

인터랙티브 요소에 대한 은은한 hover 전환 효과입니다. · 매끄러운 스크롤링과 페이지 전환입니다.

인터랙티브 요소에 대한 은은한 배경 또는 불투명도 변화입니다. · 약간의 스케일 또는 색상 변화로 즉각적인 피드백을 제공합니다.

08

컴포넌트

• button 단색 악센트 색상과 고대비 텍스트를 갖닌 알약 모양 버튼입니다.
• card 사용 후기와 앱 화면을 위한 은은한 테두리가 있는 어두운 둥근 컨테이너입니다.
• chip 저대비 배경과 텍스트를 갖춘 작고 둥근 태그입니다.
• input 깔끔한 테두리와 장식 요소가 없는 미니멀리스트 텍스트 입력란입니다.
• hero 간결한 설명과 소셜 프루프 로고를 갖춘 크고 중앙 정렬된 헤드라인입니다.

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있으며 사용자 가치에 집중적입니다.
• 헤드라인 직설적이고 행동 지향적이며 혜택을 강조합니다.
• CTA 간단하고 명확하며 격려적인 어조입니다.

• 밝은 배경을 사용하지 않습니다 — 스크린샷은 다크 테마를 보여줍니다.
• 본문 텍스트에 세리프 폰트를 사용하지 않습니다 — 스크린샷은 산스체를 사용합니다.
• 복잡하거나 혼란스러운 레이아웃을 사용하지 않습니다 — 스크린샷은 깔끔하고 중앙 정렬된 콘텐츠를 보여줍니다.
• 다양한 색상 범위를 사용하지 않습니다 — 스크린샷은 제한된 팔레트에 의존합니다.
• 작고 비좁은 버튼을 사용하지 않습니다 — 스크린샷은 넉넉한 여백과 알약 모양을 사용합니다.
• 저대비 텍스트를 사용하지 않습니다 — 스크린샷은 가독성을 위해 높은 대비를 유지합니다.
• 피하기: 지나치게 캐주얼하거나 비속어가 많은 언어는 피합니다.
• 피하기: 복잡하거나 지나치게 바쁜 레이아웃은 피합니다.
• 피하기: 주의를 분산시키는 애니메이션이나 효과는 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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