큐레이션 · 오픈 · 무료

Anytype

디지털 협업을 위한 프라이빗하고 오프라인 우선의 작업 공간입니다.

01

디자인 DNA

노트와 워크플로우를 위한 디지털 스위스 금고

02

컬러

고대비 흑백 기반에 단일한 따뜻한 그라데이션과 강조를 위한 뚜렷한 세리프 하이라이트를 사용합니다.

03

타이포그래피

humanist-sans · monospace

• display76px · 300
• display-emphasis76px · 400
• h224px · 500
• body18px · 400
• small14px · 400

히어로 섹션 내에서만 스타일 강조용 이탤릭 세리프를 사용합니다. · 주요 텍스트 계층을 엄격한 흑백으로 유지합니다. · 큰 디스플레이 타이포그래피에는 넉넉한 네거티브 트래킹을 사용합니다.

04

여백

주요 섹션 간 80px 세로 리듬

05

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

그리드 셀과 모서리가 둥근 히어로 컨테이너를 정의하는 얇은 검은색 외곽선 (1px)

06

레이아웃

대형 히어로 섹션 다음에 세 가지 기능 그리드가 오고, 미세한 그리드 시스템으로 분리됩니다.

07

모션과 인터랙션

오버레이와 요소 페이드인을 위한 부드러운 불투명도 전환. · 배경색과 테두리 변경을 위한 표준 cubic-bezier 이징. · 특정 장식 또는 히어로 요소를 위한 더 긴 지속 시간 (1초).

미세한 색상 또는 불투명도 전환. · 버튼과 링크를 위한 표준 커서 포인터 상호작용.

08

컴포넌트

• button 검은색 배경에 흰색 텍스트 또는 투명 배경에 검은색 텍스트가 들어간 알약 모양 버튼.
• card 1px 검은색 그리드 레이아웃으로 분리된 텍스트 중심 기능 카드.
• chip 반투명 배경과 흐림 효과가 적용된 하단 중앙 플로팅 알약 내비게이션.
• input 최소한의 스타일링이 적용된 표준 텍스트 필드.
• hero 좌측에 대형 타이포그래피와 우측에 흑백 라인 아트 일러스트레이션이 있는 큰 테두리 컨테이너.

09

보이스와 금지 목록

• 톤 직접적이고 안심감을 주며, 사용자 통제와 개인정보 보호에 초점을 맞춥니다.
• 헤드라인 따뜻함을 위해 가끔 세리프 이탤릭을 사용하는 크고 임팩트 있는 스테이트먼트.
• CTA 고대비 알약 버튼 안에 명확하고 행동 지향적인 텍스트.

• 여러 밝은 액센트 색상을 사용하지 마세요 — 스크린샷은 주로 검은색, 흰색, 그리고 차분한 그라데이션 팔레트를 보여줍니다.
• 무거운 그림자나 빛나는 효과를 사용하지 마세요 — 스크린샷은 그림자가 없는 플랫하고 외곽선이 있는 요소를 보여줍니다.
• 밀집하고 비좁은 레이아웃을 사용하지 마세요 — 스크린샷은 넉넉한 여백과 명확한 그리드 구조를 보여줍니다.
• 두껍고 둥근 컨테이너를 사용하지 마세요 — 스크린샷은 대부분 섹션에 얇은 (1px) 검은색 테두리를 보여줍니다.
• 전체 세리프 타이포그래피 시스템을 사용하지 마세요 — 스크린샷은 세리프를 강조에만 사용하는 세리프-세계관 기반을 보여줍니다.
• 다크 모드를 기본 테마로 사용하지 마세요 — 스크린샷은 흰색 배경에 검은색 텍스트를 보여줍니다.
• 피하기: 기술 용어
• 피하기: 공격적인 판매 언어
• 피하기: 복잡한 기업식 표현
• 피하기: 밝은 네온색

10

팩 안의 실제 스크린샷

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

11

System Prompt

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