큐레이션 · 오픈 · 무료

Jams Basicagency

스택된 앨범 아트와 대담한 타이포그래피를 특징으로 하는 비주얼 음악 컬렉션 인터페이스.

ConsumerPhotographicCurationGalleryExperimental
Jams Basicagency 스크린샷
↓ 디자인 시스템 다운로드 (39 MB)OpenDesign 에서 열기

원본 사이트: https://jams.basicagency.com

📦 팩 내용 보기 →

01

디자인 DNA

바이닐음악컬렉션크레이트 디깅비주얼

향수를 불러일으키는 촉각적 UI의 디지털 바이닐 레코드 크레이트.

02

컬러

#FFF8F1Ink
#8FCEEEBG
#E5E7EBMuted
rgba(255, 248, 241, 0.15)Line

주된 밝은 파란색 배경과 따뜻한 오프화이트 텍스트를 사용하는 고대비 소프트 팔레트.

03

타이포그래피

grotesque-sans

텍스트는 대문자 변환으로 크게 강조됩니다. · 제목은 대담하고 현대적인 느낌을 위해 극도로 좁은 음수 자간을 사용합니다. · 대형 타이포그래피는 단순한 콘텐츠가 아닌 구조적 그래픽 요소로 기능합니다.

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

사진 콘텐츠가 숨을 쉴 수 있도록 크고 드라마틱한 패딩에 초점을 맞춘 불규칙한 간격.

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

따뜻한 오프화이트와 중립 그레이의 실선 테두리로 레이어를 정의합니다.

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

이미지가 스택되고 오프셋되어 물리적 크레이트 같은 깊이감을 만드는 비대칭적, 층을 이룬 구성.

07

모션과 인터랙션

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

상태 변경을 위한 0.5초의 부드러운 불투명도 및 변환 전환. · 그랩 커서로 제안되는 드래그 상호작용이 포함될 가능성이 높음.

상호작용 요소에 포인터로, 드래그 가능한 이미지에 그랩으로 커서 변경. · 컬렉션 뷰어의 상호작용 요소를 활성화합니다.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Jams Basicagency — 桌面首屏（hero）
桌面首屏（hero）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 移动首屏
移动首屏

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

11

System Prompt

음악 또는 사진 컬렉션을 위한 대담하고 큐레이션된 인터페이스로, 물리적 크레이트 디깅을 연상시킵니다. 이 디자인은 밝은 파란색 배경과 따뜻한 오프화이트 텍스트에 크게 의존하며, 크고 좁은 자간의 제목을 위해 깔끔한 그루테스크 산세리프를 사용합니다. 사진은 깊이감을 만들고 탐색을 장려하기 위해 오프셋된 스택 레이어로 제시됩니다. 중요 금지 사항: 다크 모드를 피하고, 메인 컨테이너에 둥근 모서리를 피하고, 표준 문장 대소문자 헤더를 피하고, 표준 버튼 컴포넌트를 피합니다. 레이아웃은 의도적으로 비대칭적이며 대형 타이포그래피를 구조 요소로 사용하여 프리미엄, 큐레이션된 느낌을 유지하기 위해 넉넉한 패딩과 엄격한 대문자 텍스트 변환이 필요합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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