큐레이션 · 오픈 · 무료

Apartamento

고전적인 에디토리얼 타이포그래피와 대담한 고대비 그래픽 액센트를 결합한 라이프스타일 잡지 사이트.

01

디자인 DNA

대담하고 독특한 팝 요소를 더해 웹에 최적화된 세련된 인쇄 잡지.

02

컬러

차분하고 따뜻한 중성색이 화면을 지배하며, 핵심 인터랙티브 요소에는 단일의 강렬한 고채도 노란색을 사용합니다.

03

타이포그래피

transitional-serif · humanist-sans

• display42px · 700
• h224px · 700
• body16px · 400

인쇄 잡지의 격조를 느끼게 하는 고대비 트랜지션 세리프를 주요 제목에 사용합니다. · UI 요소, 내비게이션, 본문에는 깔끔한 가독성을 위해 기하학적 휴머니스트 산세리프를 사용합니다. · 산세리프 텍스트에 넓은 자간을 적용하여 현대적이고 여유로운 느낌을 강조합니다.

04

여백

에디토리얼 레이아웃을 지원하고 이미지에 숨쉴 틈을 주기 위한 풍부한 패딩과 여백

05

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

최소화하여, 입력 요소와 내비게이션 언더라인에 얇은 검은색 테두리를 사용합니다.

06

레이아웃

풀 너비의 주요 이미지가 지배하는 고전적 잡지 격자와 기사 카드를 위한 체계적인 컬럼 레이아웃.

07

모션과 인터랙션

페이드인 모달 · 인터랙티브 요소에서의 부드러운 트랜지션

텍스트 링크에 미세한 색상 변화 또는 언더라인 · 인터랙티브 요소에 표준 포인터 커서

08

컴포넌트

• button 약간 둥근 알약 모양 테두리를 가진 미니멀한 텍스트 기반 버튼.
• card 대형 에디토리얼 사진, 세리프 제목, 산세리프 메타데이터를 갖춘 콘텐츠 카드.
• chip 단순한 텍스트 링크 또는 태그 형태의 요소.
• input 활기찬 노란색 배경에 검은색 테두리가 둘러진 고대비 둥근 알약 형태의 입력 필드.
• hero 중앙에 인상적인 그래픽 모달 오버레이가 있는 풀 뷰포트 사진 히어로.

09

보이스와 금지 목록

• 톤 세련되고, 매력적이며, 교양 있는
• 헤드라인 직설적이고 대담하며, 약간 절제된 느낌으로, 타이포그래피에 힘을 실어 임팩트를 줍니다.
• CTA 명확하고 간결하며, 에디토리얼 흐름에 자연스럽게 통합됩니다.

• 순백색 배경을 사용하지 마세요 — 스크린샷은 따뜻한 오프화이트(#F8F4EC)를 기본으로 보여줍니다.
• 모든 버튼을 밝은 노란색으로 만들지 마세요 — 스크린샷은 노란색이 모달 오버레이에만 엄격히 사용됨을 보여줍니다.
• 주요 제목에 산세리프를 사용하지 마세요 — 스크린샷은 'Latest stories'에 고대비 트랜지션 세리프를 사용함을 보여줍니다.
• 입력 요소에 과도하게 둥근 사각형을 사용하지 마세요 — 스크린샷은 극단적인 알약 형태의 둥글림을 보여줍니다.
• 밀도 높은 UI 패턴으로 레이아웃을 어지럽히지 마세요 — 스크린샷은 깔끔하고 숨쉴 틈이 있는 에디토리얼 격자를 보여줍니다.
• UI 카드에 복잡한 드롭 섀도우를 추가하지 마세요 — 스크린샷은 완전히 플랫하고 섀도우 없는 컴포넌트를 보여줍니다.
• 피하기: 공격적인 마케팅 언어
• 피하기: 시끄럽고 충돌하는 네온 팔레트
• 피하기: 무거운 드롭 섀도우
• 피하기: 지나치게 장난스럽거나 둥근 UI 컴포넌트

10

팩 안의 실제 스크린샷

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

11

System Prompt

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