큐레이션 · 오픈 · 무료

Readwise Reader

독서 하이라이트를 다시 보고 학습하기 위한, 깔끔하고 타이포그래피 중심의 플랫폼입니다.

01

디자인 DNA

당신이 읽은 가장 좋은 것들을 상기시켜 주는 개인 도서관 어시스턴트입니다.

02

컬러

액션과 링크를 위해 단일 기능성 파란색을 사용하는 고대비 단색 기반입니다.

03

타이포그래피

transitional-serif · humanist-sans · monospace

• display50px · 800
• h228px · 700
• body16px · 400

문학적이고 교육적인 느낌을 주기 위해 제목에 전환체 세리프를 사용합니다. · 높은 가독성과 현대적인 미학을 유지하기 위해 본문에 휴머니스트 산세리프를 사용합니다. · 긴 형식 콘텐츠의 편안한 독서를 위해 넉넉한 행간을 적용합니다.

04

여백

일관된 4px 기본 그리드와 콘텐츠 블록을 위한 넉넉한 패딩(24px-35px)을 사용합니다.

05

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

주로 내비게이션 밑줄과 입력 상태를 위해 사용되는 미묘한 1px 테두리입니다.

06

레이아웃

이미지-텍스트 섹션이 번갈아 배치된 중앙 정렬 단일 열 레이아웃입니다.

07

모션과 인터랙션

hover 시 단순한 background-color 및 color 트랜지션. · 인터랙티브 요소를 위한 부드러운 opacity 및 transform 트랜지션.

0.2초 트랜지션을 통한 background-color 또는 color 변화. · 상태 변화를 통한 즉각적인 피드백.

08

컴포넌트

• button 흰색 텍스트가 있는 단색 파란색 채우기, 둥근 모서리 또는 다크 테두리가 있는 아웃라인 스타일입니다.
• card 주로 제품 스크린샷 내에서 중첩된 인터페이스 요소를 보여주기 위해 사용됩니다.
• chip 분류를 위해 뚜렷한 배경색을 가진 작은 둥근 태그입니다.
• input 미묘한 테두리와 명확한 포커스 상태를 가진 표준 양식 필드입니다.
• hero 크고 중앙 정렬된 제목, 보조 설명 텍스트, 그리고 주요 호출-투-액션 버튼입니다.

09

보이스와 금지 목록

• 톤 교육적이며, 격려하는, 그리고 개인적 성장에 초점을 맞춘 톤입니다.
• 헤드라인 큰 세리프 폰트로 작성된 명확하고 혜택 중심적인 진술입니다.
• CTA '무료로 시작하기'와 같이 직접적이고 행동 지향적인 스타일입니다.

• 메인 인터페이스에 다크 배경을 사용하지 마세요 — 스크린샷은 주로 흰색 배경을 보여줍니다.
• 본문에 모노스페이스 폰트를 사용하지 마세요 — 스크린샷은 가독성을 위해 휴머니스트 산세리프를 보여줍니다.
• 네온이나 지나치게 밝은 악센트 색상을 사용하지 마세요 — 스크린샷은 기능적이고 은은한 파란색(#478CD0)을 보여줍니다.
• 주요 버튼에 복잡한 그라디언트를 사용하지 마세요 — 스크린샷은 단색 채우기를 보여줍니다.
• 카드에 고대비 드롭 섀도우를 사용하지 마세요 — 스크린샷은 깔끔한 테두리 기반 또는 플랫 UI를 보여줍니다.
• 제목에 축약형이나 장식 폰트를 사용하지 마세요 — 스크린샷은 명확한 전환체 세리프를 사용합니다.
• 피하기: 전문 용어가 과도한 언어
• 피하기: 지나치게 기업적인 어조
• 피하기: 공격적인 판매 전술

10

팩 안의 실제 스크린샷

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

11

System Prompt

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