큐레이션 · 오픈 · 무료

Aeon

아이디어, 과학, 문화에 관한 장문 에세이를 다루는 프리미엄 디지털 간행물.

01

디자인 DNA

현대적 디지털 간행물로 재탄생한 명망 있는 학술 저널.

02

컬러

흰색 위의 깨끗하고 고대비의 검은색에 은은한 청록색 포인트를 더한 팔레트입니다.

03

타이포그래피

didone-serif · humanist-sans · monospace

• display56px · 700
• h142px · 700
• h228px · 700
• body16px · 400
• caption13px · 400

내비게이션과 레이블에는 모노스페이스 폰트를 사용합니다. · 기사 제목에는 디도네-세리프 폰트를 사용합니다. · 본문과 세리프 외 요소에는 휴머니스트-산스 폰트를 사용합니다.

04

여백

표준 4px 베이스 그리드와 일관된 패딩 및 간격입니다.

05

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

rgba(0,0,0,0.1)을 사용한 1px 얇은 테두리

0px 4px 6px -4px rgba(0,0,0,0.1) · 0px 10px 15px -3px rgba(0,0,0,0.1)

06

레이아웃

전체 폭의 히어로 이미지와 기사 카드를 위한 다중 열 그리드입니다.

07

모션과 인터랙션

인터랙티브 요소에서의 부드러운 색상 및 배경색 전환. · 은은한 투명도 전환.

링크와 버튼에서의 섬세한 색상 변화 또는 투명도 변화. · 즉각적인 반응을 보이는 표준 포인터 커서.

08

컴포넌트

• button 미니멀하며, 주로 텍스트 기반의 링크에 섬세한 hover 전환 효과가 적용됩니다.
• card 이미지를 강조한 기사 카드이며, 하단에 엄격한 타이포그래피 계층이 적용됩니다.
• chip 보이지 않으며, 카테고리에는 간단한 텍스트 레이블을 사용합니다.
• input 미니멀한 검색 또는 뉴스레터 입력 필드입니다.
• hero 전체 폭의 시네마틱 이미지 위에 큰 세리프 텍스트가 겹쳐지는 구성입니다.

09

보이스와 금지 목록

• 톤 학술적이고 지적이며 탐구적인 어조입니다.
• 헤드라인 명확하고 도발적인 아이디어를 진술하는 굵고 큰 세리프 헤드라인.
• CTA 절제된 텍스트 링크, 거의 굵은 버튼을 사용하지 않습니다.

• 다크 모드를 사용하지 마세요 — 스크린샷은 밝고 흰색 배경 인터페이스를 보여줍니다
• 밝고 채도 높은 원색을 사용하지 마세요 — 스크린샷은 흰색, 검은색, 그리고 차분한 청록색 팔레트가 주를 이룹니다
• 헤드라인에 세리프 외 폰트를 사용하지 마세요 — 스크린샷은 기사 제목에 크고 굵은 디도네-세리프를 보여줍니다
• 본문에 밀집된 다중 열 레이아웃을 사용하지 마세요 — 스크린샷은 넉넉한 여백과 명확한 계층을 보여줍니다
• 모든 카드에 두꺼운 테두리나 그림자를 사용하지 마세요 — 스크린샷은 깨끗하고 테두리 없는 이미지-텍스트 전환을 보여줍니다
• 장난스럽거나 둥근 UI 요소를 사용하지 마세요 — 스크린샷은 날렵하고 깔끔한 선과 미니멀한 장식을 보여줍니다
• 피하기: 지나치게 캐주얼한 언어
• 피하기: 선정적인 헤드라인
• 피하기: 시각적 혼란

10

팩 안의 실제 스크린샷

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

11

System Prompt

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