큐레이션 · 오픈 · 무료

Logseq

사고와 함께 성장하는 프라이버시 우선 오픈 소스 지식 기반.

01

디자인 DNA

사고의 길이 자연스럽게 나타나는 개인적인 정원.

02

컬러

깊고 차분한 청록색 배경과 부드러운 발광 악센트가 몰입적이고 집중적인 환경을 만듭니다.

03

타이포그래피

humanist-sans

• display56px · 700
• display38px · 700
• body-lg20px · 400
• body16px · 400
• caption14px · 400

네이티브 느낌을 위해 시스템 UI 폰트 스택 사용 · 제목은 두께 700 사용 · 본문은 두께 400 사용 · 흐릿한 텍스트는 inkSoft 색상(#B7D5D5) 사용

04

여백

정확한 정렬을 위한 일관된 4px 그리드.

05

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

미묘한 정의를 위한 1px solid rgba(9, 75, 90, 1)

None: rgba(133, 200, 200, 0.3) 0px 4px 32px 0px

06

레이아웃

여유로운 패딩을 갖춘 중앙 정렬 콘텐츠, 반응형 레이아웃

07

모션과 인터랙션

hover 상태를 위한 매끄러운 전환 · 콘텐츠를 위한 페이드인 효과 · 배경 요소를 위한 미묘한 부유 애니메이션

미묘한 색상 변화 또는 밝기 조정 · 즉각적인 시각적 피드백

08

컴포넌트

• button 둥근 모서리의 단색 청록색 기본 버튼, 보조 버튼은 투명하거나 테두리형입니다.
• card 미묘한 청록색 테두리와 둥근 모서리를 가진 반투명 유리처럼 보이는 카드입니다.
• chip 'Person'이나 'Book'과 같은 카테고리를 위한 작은 둥근 배지입니다.
• input 둥근 모서리와 투명한 배경을 가진 검색 바입니다.
• hero 고전적인 조각상과 겹쳐지는 UI 요소가 포함된 일러스트 배경의 큰 중앙 정렬 헤드라인입니다.

09

보이스와 금지 목록

• 톤 사려 깊고 전문적이며 약간 철학적인
• 헤드라인 행동 지향적이고 혜택 중심의
• CTA 명확하고 직접적이며 로컬 우선 이점을 강조하는

• 밝고 채도 높은 색상을 사용하지 마세요 — 스크린샷은 차분하고 채도가 낮은 청록색 팔레트를 보여줍니다
• 세리프 폰트를 사용하지 마세요 — 스크린샷은 전체적으로 산세리프 시스템 폰트 스택을 보여줍니다
• 날카로운 모서리를 사용하지 마세요 — 스크린샷은 일관된 8px 테두리 반경을 보여줍니다
• 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 미묘한 청록색 발광 효과를 보여줍니다
• 인터페이스를 복잡하게 만들지 마세요 — 스크린샷은 여유로운 여백과 집중된 콘텐츠를 보여줍니다
• 대문자를 과도하게 사용하지 마세요 — 스크린샷은 작은 레이블과 배지에만 사용됨을 보여줍니다
• 피하기: 기술 전문 용어
• 피하기: 지나치게 캐주얼한 언어
• 피하기: 두려움 기반 마케팅
• 피하기: 과장된 표현과 유행어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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