큐레이션 · 오픈 · 무료

Stinkstudios

대담한 타이포그래피, 시네마틱 사진, 그리고 강렬한 흑백 팔레트가 특징인 프리미엄 크리에이티브 스튜디오 포트폴리오.

AgencyStudioPortfolioBold TypographyPhotographic

↓ 디자인 시스템 다운로드 (17 MB)OpenDesign 에서 열기

원본 사이트: https://www.stinkstudios.com

📦 팩 내용 보기 →

디자인 DNA

크리에이티브 스튜디오광고시네마틱대담한

고대비 타이포그래피로 대규모 크리에이티브 작품을 전시하는 시네마틱한 갤러리.

컬러

#FFFFFFInk

#000000BG

#101010Muted

rgba(255,255,255,0.2)Line

시네마틱한 프로젝트 사진이 주요 시각적 초점이 되도록 고대비 모노크롬 기반을 설정합니다.

타이포그래피

grotesque-sans · monospace

display60px · 300
heading52px · 300
body16px · 300
caption14px · 300

Helvetica, sans-serif를 기본 서체로 사용합니다. · 대형 디스플레이 텍스트에는 극도로 촘촘한 네거티브 letter-spacing을 유지합니다. · 모든 UI 텍스트는 가벼운 두께(300 weight)를 사용합니다.

여백

4px

8px

16px

24px

32px

48px

64px

96px

대형 비주얼 요소 주변에 넉넉한 padding을 두되, 내비게이션과 목록에는 더 촘촘하고 일관된 간격을 유지합니다.

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

sm · 0px

md · 10px

lg · 10px

pill · 999px

구분선 및 밑줄에 주로 사용되는 1px solid의 흰색 또는 검은색 얇은 선.

레이아웃

1280container

12columns

20pxgutter

768 / 1024breakpoints

풀블리드 히어로 이미지 뒤에 대소 혼합된 프로젝트 카드의 그리드가 옵니다.

모션과 인터랙션

200msmicro

250mssmall

400msmedium

ease-outeasing

인터랙티브 요소에서의 부드러운 opacity 페이드. · 내비게이션 및 카드의 Transform 기반 hover 상태. · 로딩 상태에서 로고 요소에 대한 회전 또는 스핀 애니메이션.

인터랙티브함을 나타내기 위한 미묘한 opacity 감소 또는 약간의 색상 변화. · 즉각적인 상태 변화 또는 프로젝트 상세 페이지로의 내비게이션.

컴포넌트

button 밑줄이나 hover opacity 변화를 통한 간단한 텍스트 기반 링크.
card 하단이나 옆에 최소한의 텍스트 오버레이가 있는 엣지투엣지 사진 썸네일.
chip 'ADVERTISING'과 같은 카테고리를 위한 작고 대문자, 넓은 간격의 모노스페이스 텍스트.
input 하단 테두리가 있는 간단한 텍스트 필드 형태로 나타나는 미니멀한 입력 필드.
hero 전체 뷰포트 몰입형 비디오 또는 이미지 배경 위에 촘촘한 트래킹의 대규모 디스플레이 타이포그래피.

보이스와 금지 목록

톤 자신감 있고 미니멀하며 프로페셔널한.
헤드라인 복잡한 표현보다 스케일에 의존하는 짧고 강렬하며 시각적으로 지배적인 스타일.
CTA 전체적인 미니멀리스트 미학에 녹아드는 절제된 텍스트 링크.

장식용 세리프 서체를 사용하지 않습니다. 스크린샷에는 모든 UI 및 디스플레이 텍스트에 깨끗한 기하학적 고트릭-산스체가 보입니다.
UI 요소에 그림자를 추가하지 않습니다. 스크린샷에는 고도 효과가 전혀 없는 완전히 평면적인 표면이 보입니다.
화려하고 고채도의 포인트 색상을 사용하지 않습니다. 스크린샷에는 검정, 흰색, 무채도 회색으로 구성된 엄격한 모노크롬 팔레트만 보입니다.
내비게이션에 텍스트를 중앙 정렬하지 않습니다. 스크린샷에는 히어로 하단에 우측 정렬된 내비게이션 링크가 보입니다.
본문 텍스트에 두꺼운 글꼴 두께를 사용하지 않습니다. 스크린샷에는 세련된 느낌을 위해 대부분 가벼운 두께(300) 텍스트가 보입니다.
주요 카드에 둥근 모서리를 사용하지 않습니다. 스크린샷에는 프로젝트 이미지의 날카로운 모서리가 보이며, 작은 요소에만 10px radius가 사용됩니다.
피하기: 장식용 세리프 서체를 사용하지 않습니다.
피하기: 화려한 네온이나 다색 그라데이션을 사용하지 않습니다.
피하기: 과도한 테두리나 그림자로 복잡한 UI를 만들지 않습니다.
피하기: 장난스럽거나 둥근 버블 모양의 UI 요소를 사용하지 않습니다.
피하기: 히어로 섹션에 빽빽한 본문 텍스트 블록을 사용하지 않습니다.
피하기: 사진에서 주의를 빼앗는 복잡한 애니메이션을 사용하지 않습니다.

팩 안의 실제 스크린샷

Stinkstudios — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

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

System Prompt

고대비, 시네마틱 미학의 프리미엄 크리에이티브 에이전시 포트폴리오를 디자인하십시오. #000000 배경과 #FFFFFF 텍스트의 엄격한 모노크롬 팔레트를 사용하십시오. 세련되고 현대적인 느낌을 위해 기하학적 고트릭-산스체(Helvetica와 같은)의 가벼운 두께(300)를 사용하십시오. 대규모 디스플레이 타이포그래피에는 촘촘한 네거티브 letter-spacing(예: -3px)을 적용하십시오. 중요 금지 사항: 절대로 장식용 세리프를 사용하지 말고, 그림자를 피하며, 화려한 포인트 색상을 사용하지 마십시오. UI는 대규모 사진과 비디오가 주요 초점이 되도록 허용하는 조용하고 프로페셔널한 갤러리처럼 느껴져야 합니다.

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

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

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

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