← OpenDesign
큐레이션 · 오픈 · 무료
Sirup Online
대담한 타이포그래피와 드라마틱한 사진으로 5주년을 기념하는 프리미엄 편집 스타일 아티스트 쇼케이스.
Editorial Premium Bold Typography Curation Photographic
01
디자인 DNA
아티스트 기념일 프리미엄 편집적 대담
음악 아티스트의 마일스톤을 위한 하이 패션 매거진 표지.
02
컬러
#000000Ink
#ffffffBG
#4554acMuted
rgba(255, 255, 255, 0.88)Line
복잡한 사진 또는 그라디언트 배경 위의 단색 텍스트로, 계층 구조를 위해 대비와 스케일에 의존합니다.
03
타이포그래피
transitional-serif · humanist-sans
display 120px · 700body 16px · 400디스플레이 폰트는 거대한 스케일로 사용되는 고대비 트랜지셔널 세리프입니다. · 본문 폰트는 중립적인 휴머니트산스 세리프입니다. · 수직 텍스트는 가독성을 위해 산스 세리프를 사용합니다. · 디스플레이 텍스트의 커닝은 타이트합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
겹치는 요소들로 정의된 비대칭적, 레이아웃 주도 간격.
05
표면 (라운드 / 그림자 / 경계선)
sm · 0px
md · 0px
lg · 0px
pill · 999px
미니멀하며, 겹치는 사진 레이어에 의존합니다.
06
레이아웃
1920 container
12 columns
24px gutter
768 / 1024 breakpoints
레이어링된 타이포그래피와 절대 위치 지정을 사용한 풀블리드 사진 히어로.
07
모션과 인터랙션
125ms micro
250ms small
500ms medium
cubic-bezier(0.215, 0.61, 0.355, 1) easing
스크롤 기반 표시를 위한 선형 트랜지션. · 인터랙티브 요소를 위한 cubic-bezier 이징.
인터랙티브 요소에서 커서가 포인터로 변경됩니다. · 표준 내비게이션 링크.
08
컴포넌트
button 뚜렷한 버튼 컴포넌트는 보이지 않으며, 인터랙션은 링크 또는 아이콘을 통해 이루어집니다. card 배경 없이 겹치는 이미지 카드로, 아티스트 초상화를 특징으로 합니다. chip 칩은 보이지 않습니다. input 입력 필드는 보이지 않습니다. hero 중앙 초상화와 겹치는 텍스트를 특징으로 하는 거대한 타이포그래피 기념일 히어로.
09
보이스와 금지 목록
톤 자신감 있고, 세련되며, 기념적입니다. 헤드라인 대담하고, 표현적이며, 드라마틱하게 스케일링됩니다. CTA 섬세하며, 텍스트 링크 또는 미니멀 아이콘으로 통합됩니다. 작고 타이트한 디스플레이 텍스트를 사용하지 마세요 — 스크린샷은 거대하고 겹치는 타이포그래피를 보여줍니다. 플랫하고 단색 배경을 사용하지 마세요 — 스크린샷은 복잡한 사진 및 그라디언트 배경을 보여줍니다. 표준 격자 기반 카드 레이아웃을 사용하지 마세요 — 스크린샷은 겹치는 비대칭적 사진 배치를 보여줍니다. 미니멀한 색상 팔레트를 사용하지 마세요 — 스크린샷은 활기찬 이미지 위에 고대비 텍스트를 보여줍니다. 표준적이고 중앙 정렬된 UI 컴포넌트를 사용하지 마세요 — 스크린샷은 절대 위치 지정과 수직 텍스트를 사용합니다. 친근하고 둥근 미학을 사용하지 마세요 — 스크린샷은 날카롭고 프리미엄한 편집 스타일을 보여줍니다. 피하기: 일반적이거나 지나치게 장난스러운 산스 세리프 헤드라인을 피합니다. 피하기: 중앙 이미지를 흐리게 하는 복잡한 레이아웃을 피합니다. 피하기: 표준 버튼 컴포넌트를 피합니다.
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
이것은 5주년을 기념하는 프리미엄 편집 스타일의 아티스트 웹사이트입니다. 'Glodok'이나 'Termina'와 같은 거대한 고대비 트랜지셔널 세리프 디스플레이 타이포그래피가 드라마틱한 사진 및 그라디언트 배경 위에 레이어링되어 있습니다. 주요 색상은 복잡한 배경 위에 흰색과 검은색 텍스트이며, 톤 다운된 블루 악센트(#4554ac)가 사용됩니다. 본문 텍스트는 중립적인 휴머니트산스 세리프를 사용합니다. 주요 주의사항: 표준 격자 레이아웃을 사용하지 마세요, 친근하거나 둥근 UI 요소를 사용하지 마세요, 작은 디스플레이 텍스트를 사용하지 마세요. 레이아웃은 겹치는 요소와 수직 텍스트를 가진 매우 비대칭적이며, 세련된 매거진 같은 경험을 만듭니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 음악 아티스트 쇼케이스에 적용된 프리미엄 편집적 디자인 언어의 강력한 예시로, 대담한 타이포그래피와 드라마틱한 사진을 사용하여 임팩트를 만듭니다.