큐레이션 · 오픈 · 무료

Friendsofthenew

거대한 타이포그래피와 사진 콜라주 레이아웃을 가진 신진 작가들의 단색 편집 쇼케이스입니다.

01

디자인 DNA

하이 패션 아트 갤러리 매거진

02

컬러

최대한의 대비와 편집적 우아함을 위해 진한 검정과 따뜻한 오프 화이트에 의존하는 엄격한 단색 팔레트입니다.

03

타이포그래피

transitional-serif · humanist-sans

• display200px · 400
• body10px · 400

로고타입은 극적인 시각적 임팩트를 위해 고대비 트랜지셔널 세리프를 사용합니다 · UI 요소는 작은 크기에서도 가독성을 위해 깔끔한 휴머니스트산스세리프를 사용합니다 · 큰 디스플레이 텍스트에는 응집력을 위해 타이트한 자간을 적용합니다

04

여백

편집적 리듬을 위한 20px 거터와 넉넉한 여백이 있는 그리드 기반입니다.

05

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

1px solid rgb(0, 0, 0)

06

레이아웃

상단에 부유하는 콜라주 스타일 이미지 그리드와 하단에 고정된 로고타입

07

모션과 인터랙션

hover 시 부드러운 이미지 필터 전환 (0.3s ease-out) · 상태 변경을 위한 일반 요소 전환

이미지 필터 또는 미세한 시각적 변화 · 모달 방해 없이 직접 내비게이션

08

컴포넌트

• button 원형 윤곽선 표시기가 있는 미니멀 텍스트 링크
• card 느슨한 그리드에 부유하는 무테 사진 이미지
• chip 내비게이션 상태를 위한 원형 표시 점
• input 보이는 입력 필드 없는 미니멀 텍스트 기반 내비게이션
• hero 뷰포트 하단을 고정하는 전체 너비 디스플레이 로고타입

09

보이스와 금지 목록

• 톤 세련되고 절제되며 자신감 있는
• 헤드라인 거대하고 대담한 타이포그래피 성명
• CTA 전통적인 버튼 스타일링 없는 미세하고 텍스트 기반 내비게이션

• 밝은 강조 색상을 사용하지 마세요 — 스크린샷은 엄격한 검정과 따뜻한 오프 화이트만 보여줍니다
• 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카로운 모서리와 원형 필 형태만 보여줍니다
• 텍스트를 가운데 정렬하지 마세요 — 스크린샷은 왼쪽 정렬 내비게이션과 하단 고정 로고타입을 보여줍니다
• 그림자를 사용하지 마세요 — 스크린샷은 완전히 평면적인 사진 레이어를 보여줍니다
• 디스플레이 텍스트에 산세리프를 사용하지 마세요 — 스크린샷은 주 로고타입에 트랜지셔널 세리프를 보여줍니다
• 장식적인 테두리나 프레임을 추가하지 마세요 — 스크린샷은 무테, 부유하는 사진 요소를 보여줍니다
• 피하기: 밝은 색상
• 피하기: 둥근 모서리
• 피하기: 그림자
• 피하기: 장식 아이콘
• 피하기: 복잡한 패턴
• 피하기: 가운데 정렬된 텍스트
• 피하기: 산세리프 제목

10

팩 안의 실제 스크린샷

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

11

System Prompt

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