큐레이션 · 오픈 · 무료

Basement Studio

멋진 작업물을 만드는 디지털 스튜디오이자 브랜딩 파워하우스.

01

디자인 DNA

고급 크리에이티브 작업을 선보이는 어둡고 몰입감 있는 디지털 워크숍 또는 갤러리.

02

컬러

깊은 블랙과 밝은 화이트를 사용한 고대비 단색으로, 프로젝트 이미지로만 포인트를 줍니다.

03

타이포그래피

geometric-sans · monospace

• display76px · 600
• h138px · 600
• body16px · 400
• caption13px · 600

04

여백

대체로 16px 또는 24px의 넓은 padding과 gutter를 갖춘 그리드 기반 레이아웃입니다.

05

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

rgba(230, 230, 230, 0.3)를 사용한 1px 두께의 수평 구분선.

06

레이아웃

풀폭 히어로 이미지 뒤에 큰 제목과 설명이 있는 그리드 기반 프로젝트 쇼케이스가 이어집니다.

07

모션과 인터랙션

배경색 및 색상 변경을 위한 부드러운 전환. · 인터랙티브 요소를 위한 transform 기반 애니메이션.

커서가 pointer 또는 alias로 변경됨; 미묘한 색상 또는 배경 전환. · 즉각적인 피드백, 주로 링크 내비게이션을 통해.

08

컴포넌트

• button 배경이나 테두리가 없는 두꺼운 웨이트의 텍스트 기반 내비게이션 링크.
• card 큰 이미지와 설명 텍스트로 구성된 프로젝트 항목으로, 가느다란 선으로 구분됩니다.
• chip 관찰되지 않음.
• input 관찰되지 않음.
• hero 오버레이 텍스트와 'Scroll to Explore' 프롬프트가 포함된 몰입감 있는 풀폭 이미지 또는 비디오 배경.

09

보이스와 금지 목록

• 톤 자신감 있고 대담하며 약간의 반항적인 어조.
• 헤드라인 높은 대비를 가진 큰 자간의 기하학적 sans-serif.
• CTA 직접적이고 행동 지향적이며, 대체로 소문자 또는 브랜드 톤에 맞춥니다.

• 세리프 폰트를 사용하지 마세요 — 스크린샷에는 모든 텍스트에 기하학적 sans-serif가 사용되어 있습니다.
• 버튼에 배경색을 추가하지 마세요 — 스크린샷에는 텍스트만 있는 내비게이션 링크가 있습니다.
• 무거운 그림자를 사용하지 마세요 — 스크린샷에는 완전히 평평한 표면이 있습니다.
• 카드 또는 컨테이너에 둥근 모서리를 사용하지 마세요 — 스크린샷에는 날카롭고 사각형의 모서리가 있습니다.
• 여러 악센트 색상을 사용하지 마세요 — 스크린샷에는 엄격한 단색 팔레트와 프로젝트 이미지로만 색상이 제공됩니다.
• 레이아웃을 테두리로 지저분하게 만들지 마세요 — 스크린샷에는 최소한의 수평 구분선이 있습니다.
• 피하기: 격식 있는 기업 언어
• 피하기: 지저분한 인터페이스
• 피하기: 저대비 텍스트

10

팩 안의 실제 스크린샷

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

11

System Prompt

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