큐레이션 · 오픈 · 무료

Transformfestival

대담한 에디토리얼 타이포그래피와 시네마틱 사진을 갖춘 국제 퍼포먼스 아트 페스티벌.

01

디자인 DNA

대담한 연극 포스터와 깔끔한 에디토리얼 매거진의 만남.

02

컬러

고대비: 따뜻하고 약간 오프화이트한 캔버스에 깊은 블랙 잉크를 사용하고, 단일 일렉트릭 핑크 악센트로 점을 찍습니다.

03

타이포그래피

geometric-sans

• display80px · 900
• heading56px · 800
• subhead24px · 800
• body18px · 400

강한 강조와 내비게이션 링크에는 대문자를 사용합니다. · 큰 디스플레이 텍스트의 영향력을 유지하기 위해 좁은 자간을 적용합니다. · 디스플레이 텍스트와 본문 텍스트 사이에 높은 굵기 대비를 유지합니다.

04

여백

일관된 패딩과 간격 배수를 통해 명확한 수직 리듬을 확립합니다.

05

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

테두리를 최소화하여 사용하며, 주로 강력한 타이포그래피와 이미지 대비로 영역을 구분합니다.

0 4px 24px rgba(0, 0, 0, 0.1)

06

레이아웃

풀와이드 히어로 영역이 먼저 오고, 멀티컬럼 카드 그리드가 이어지며, 대담한 타이포그래피 섹션으로 연결됩니다.

07

모션과 인터랙션

인터랙티브 요소에서의 부드러운 색상 전환. · 버튼과 카드의 미묘한 hover 트랜스포메이션.

버튼과 링크에서 즉각적인 색상 반전 또는 배경 이동. · 약간의 트랜스포메이션 또는 스케일 효과로 촉각 피드백을 제공합니다.

08

컴포넌트

• button 대문자가 적힌 고대비 채워진 사각형입니다.
• card 내비게이션용 간단한 화살표 아이콘과 함께 두드러진 이미지와 굵은 헤드라인이 있는, 깔끔하고 테두리 없는 카드입니다.
• chip 내비게이션이나 작은 라벨에 사용되며, 종종 대문자로 표시됩니다.
• input 최소한의 테두리가 있는 깔끔한 텍스트 필드입니다.
• hero 풀블리드 시네마틱 사진 위에 거대하고 굵은 타이포그래피가 겹쳐진 형태입니다.

09

보이스와 금지 목록

• 톤 자신감 있고 영향력 있으며 직접적입니다.
• 헤드라인 거대하고 굵은 타이포그래피로 설정된 짧고 강력한 문구.
• CTA 배경에서 두드러지는 명확하고 대문자의 명령형.

• 주요 UI 요소에 둥근 모서리를 사용하지 마십시오 — 스크린샷에서 날카로운 직사각형 형태를 보여줍니다.
• 여러 경쟁하는 악센트 색상을 사용하지 마십시오 — 스크린샷에서 핑크와 퍼플이 지배하는 명확한 계층 구조를 보여줍니다.
• 헤드라인에 가볍고 얇은 폰트 웨이트를 사용하지 마십시오 — 스크린샷에서 굵고 볼드한 웨이트만 사용합니다.
• 비율이 넓거나 불규칙한 산세리프 폰트를 사용하지 마십시오 — 스크린샷에서 매우 기하학적이고 타이트한 타입페이스를 보여줍니다.
• 복잡하고 다중 레이어 그림자를 사용하지 마십시오 — 스크린샷에서 정의를 위해 플랫 컬러와 날카로운 모서리에 의존합니다.
• 회색을 주요 배경으로 사용하지 마십시오 — 스크린샷에서 따뜻한 오프화이트(#F4EDE9)를 보여줍니다.
• 피하기: 모호한 표현
• 피하기: 미묘하거나 장식적인 요소
• 피하기: 저대비 색상 조합

10

팩 안의 실제 스크린샷

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

11

System Prompt

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