큐레이션 · 오픈 · 무료

Sirup Online

대담한 타이포그래피와 드라마틱한 사진으로 5주년을 기념하는 프리미엄 편집 스타일 아티스트 쇼케이스.

01

디자인 DNA

음악 아티스트의 마일스톤을 위한 하이 패션 매거진 표지.

02

컬러

복잡한 사진 또는 그라디언트 배경 위의 단색 텍스트로, 계층 구조를 위해 대비와 스케일에 의존합니다.

03

타이포그래피

transitional-serif · humanist-sans

• display120px · 700
• body16px · 400

디스플레이 폰트는 거대한 스케일로 사용되는 고대비 트랜지셔널 세리프입니다. · 본문 폰트는 중립적인 휴머니트산스 세리프입니다. · 수직 텍스트는 가독성을 위해 산스 세리프를 사용합니다. · 디스플레이 텍스트의 커닝은 타이트합니다.

04

여백

겹치는 요소들로 정의된 비대칭적, 레이아웃 주도 간격.

05

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

미니멀하며, 겹치는 사진 레이어에 의존합니다.

06

레이아웃

레이어링된 타이포그래피와 절대 위치 지정을 사용한 풀블리드 사진 히어로.

07

모션과 인터랙션

스크롤 기반 표시를 위한 선형 트랜지션. · 인터랙티브 요소를 위한 cubic-bezier 이징.

인터랙티브 요소에서 커서가 포인터로 변경됩니다. · 표준 내비게이션 링크.

08

컴포넌트

• button 뚜렷한 버튼 컴포넌트는 보이지 않으며, 인터랙션은 링크 또는 아이콘을 통해 이루어집니다.
• card 배경 없이 겹치는 이미지 카드로, 아티스트 초상화를 특징으로 합니다.
• chip 칩은 보이지 않습니다.
• input 입력 필드는 보이지 않습니다.
• hero 중앙 초상화와 겹치는 텍스트를 특징으로 하는 거대한 타이포그래피 기념일 히어로.

09

보이스와 금지 목록

• 톤 자신감 있고, 세련되며, 기념적입니다.
• 헤드라인 대담하고, 표현적이며, 드라마틱하게 스케일링됩니다.
• CTA 섬세하며, 텍스트 링크 또는 미니멀 아이콘으로 통합됩니다.

• 작고 타이트한 디스플레이 텍스트를 사용하지 마세요 — 스크린샷은 거대하고 겹치는 타이포그래피를 보여줍니다.
• 플랫하고 단색 배경을 사용하지 마세요 — 스크린샷은 복잡한 사진 및 그라디언트 배경을 보여줍니다.
• 표준 격자 기반 카드 레이아웃을 사용하지 마세요 — 스크린샷은 겹치는 비대칭적 사진 배치를 보여줍니다.
• 미니멀한 색상 팔레트를 사용하지 마세요 — 스크린샷은 활기찬 이미지 위에 고대비 텍스트를 보여줍니다.
• 표준적이고 중앙 정렬된 UI 컴포넌트를 사용하지 마세요 — 스크린샷은 절대 위치 지정과 수직 텍스트를 사용합니다.
• 친근하고 둥근 미학을 사용하지 마세요 — 스크린샷은 날카롭고 프리미엄한 편집 스타일을 보여줍니다.
• 피하기: 일반적이거나 지나치게 장난스러운 산스 세리프 헤드라인을 피합니다.
• 피하기: 중앙 이미지를 흐리게 하는 복잡한 레이아웃을 피합니다.
• 피하기: 표준 버튼 컴포넌트를 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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