큐레이션 · 오픈 · 무료

Tana

에디토리얼 타이포그래피와 따뜻하고 인간적인 사진을 사용하여 회의를 능동적인 작업처럼 느끼게 하는 프리미엄 생산성 도구입니다.

01

디자인 DNA

고전적 에디토리얼 타이포그래피와 현대적 앱 UI 패턴을 융합한 세련된 하이엔드 생산성 애플리케이션.

02

컬러

가독성과 프리미엄 느낌을 우선시하는 부드러운 피치 강조가 있는 따뜻하고 고대비 단색 팔레트입니다.

03

타이포그래피

didone-serif · humanist-sans · monospace

• display72px · 400
• headline48px · 400
• body17px · 400
• nav15px · 400

대형 디스플레이 텍스트 및 제목에는 Didone Serif(Source Serif 4)를 사용합니다. · 본문, UI 요소, 탐색에는 Humanist Sans(Inter)를 사용합니다. · 디스플레이 텍스트에는 타이트한 네거티브 letterSpacing을 유지합니다.

04

여백

일관된 리듬을 위해 4px 기본 증분을 사용하며, 카드 및 섹션에 풍부한 padding(24px-48px)을 보장합니다.

05

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

구분을 위해 rgba(12,8,5,0.1)를 사용한 미세한 1px 테두리입니다.

rgba(20, 22, 36, 0.1) 0px 6px 18px -12px · rgba(20, 22, 36, 0.28) 0px 40px 96px -28px

06

레이아웃

히어로 섹션에는 중앙 정렬된 단일 열 레이아웃을, 콘텐츠에는 확장 그리드를 사용합니다.

07

모션과 인터랙션

hover 및 click 시 부드러운 불투명도 및 transform 트랜지션.

미세한 불투명도 감소 또는 배경색 변경. · 약간 축소(transform) 또는 불투명도 변경.

08

컴포넌트

• button 주요 작업을 위한 고대비 검정 둥근 필 버튼, 보조 작업을 위한 투명 또는 밝은 회색 버튼입니다.
• card 크고 둥근 모서리 반경(14px-20px)을 가진 부드러운 둥근 카드로, 주로 미디어나 복잡한 UI 미리보기를 포함합니다.
• chip 작고 둥근 필 모양의 태그 또는 상태 표시기입니다.
• input 최소한의 테두리를 사용한 미세하고 깔끔한 입력 필드입니다.
• hero 풍부한 수직 간격과 부드러운 배경 그라디언트가 있는 전체 너비 중앙 정렬 제목입니다.

09

보이스와 금지 목록

• 톤 자신감 있고 전문적이며 약간의 에디토리얼 느낌.
• 헤드라인 강조된 단일 단어를 이탤릭체로 사용하는 짧고 임팩트 있는 문장.
• CTA 예를 들어 '무료 체험 시작'과 같이 직접적이고 혜택 지향적.

• 선명하고 고채도의 강조색을 사용하지 마세요 — 스크린샷은 따뜻하고 부드러운 강조가 있는 대부분 단색 팔레트를 보여줍니다.
• 제목에 기하학적이거나 기술적인 sans-serif를 사용하지 마세요 — 스크린샷은 우아한 세리프 타이포그래피를 보여줍니다.
• 다크 모드를 기본으로 사용하지 마세요 — 스크린샷은 밝은 오프화이트 배경(#FBFBFB)을 보여줍니다.
• 날카롭고 사각형 모서리를 사용하지 마세요 — 스크린샷은 모든 카드와 버튼에 큰 border-radius(14px, 20px)를 보여줍니다.
• 빈번한 그리드로 레이아웃을 복잡하게 하지 마세요 — 스크린샷은 풍부한 여백과 집중된 중앙 정렬 히어로를 보여줍니다.
• 장난스럽거나 만화적인 일러스트레이션을 사용하지 마세요 — 스크린샷은 고품질 시네마틱 사진에 의존합니다.
• 피하기: 과도한 구두점
• 피하기: 본문 텍스트의 ALL CAPS
• 피하기: 지나치게 기술적인 전문 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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