큐레이션 · 오픈 · 무료

Pentagram

다양한 멀티디시플리너리 작업을 선보이는 프리미엄 디자인 에이전시 포트폴리오입니다.

studiobrandingeditorial

Pentagram 스크린샷

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

원본 사이트: https://pentagram.com

📦 팩 내용 보기 →

01

디자인 DNA

하이엔드 디자인포트폴리오미니멀리즘에디토리얼

하이엔드 디자인 프로젝트를 큐레이팅한 갤러리입니다.

02

컬러

#1a1a1aInk

#767676Ink soft

#ffffffBG

#8c8c8cMuted

rgba(26, 26, 26, 1.0)Line

고대비 흑백 기반에 그레이스케일 중간색을 사용합니다.

03

타이포그래피

grotesque-sans · humanist-sans

display52px · 500
heading32px · 400
body19px · 400
small16px · 400
tiny13px · 400

04

여백

4px

8px

12px

16px

24px

32px

48px

64px

96px

일관된 4px 기반에 섹션 사이 넉넉한 여백을 둡니다.

05

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

sm · 4px

md · 8px

lg · 0px

pill · 9999px

보이지 않는 테두리를 사용하며, 간격과 배경색 변화로 분리를 구현합니다.

06

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

풀블리드 히어로 이미지 뒤에 구조화된 그리드 섹션이 이어집니다.

07

모션과 인터랙션

150msmicro

300mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

UI 요소의 부드러운 불투명도 및 변환 트랜지션. · hover 시 미세한 스케일링 또는 페이딩.

텍스트 링크의 미세한 색상 변화 또는 밑줄; 상호작용 요소의 약간의 스케일링 또는 초점. · 부드러운 트랜지션으로 즉각적인 반응을 보입니다.

08

컴포넌트

button hover 효과로 밑줄이 지는 최소한의 텍스트 내비게이션 링크입니다.
card 최소한의 텍스트 오버레이가 있는 대형 사진 프로젝트 카드입니다.
hero 대형 타이포그래피 오버레이와 설명적 메타데이터가 있는 풀幅 사진 슬라이드쇼입니다.

09

보이스와 금지 목록

톤 권위 있고, 전문적이며, 자신감 있는 어조입니다.
헤드라인 크고 깔끔하며 직접적인 타이포그래피 표현.
CTA 내비게이션 또는 설명 블록에 통합되는 미세한 텍스트 기반 행동 유도.

다색 팔레트를 사용하지 마세요 — 스크린샷은 사진이 색상을 제공하는 엄격한 단색 체계를 보여줍니다.
장식적이거나 스크립트 폰트를 사용하지 마세요 — 스크린샷은 깔끔하고 기능적인 grotesque-sans 타이포그래피를 보여줍니다.
드롭 섀도우나 복잡한 그라디언트를 사용하지 마세요 — 스크린샷은 간격을 통한 명확한 분리가 있는 플랫 디자인을 보여줍니다.
좁은 간격으로 빽빽한 레이아웃을 사용하지 마세요 — 스크린샷은 넉넉한 여백과 명확한 계층 구조를 보여줍니다.
주요 컨테이너에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 직사각형의 프로젝트 카드를 보여줍니다.
굵고 채도 높은 강조색을 사용하지 마세요 — 스크린샷은 모든 색채적 관심사가 사진 콘텐츠에서 나온다는 것을 보여줍니다.
피하기: 장난스러운 언어
피하기: 화려한 색상
피하기: 장식적 요소

10

팩 안의 실제 스크린샷

Pentagram — 桌面首屏（hero） — 桌面首屏（hero）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Pentagram — 移动首屏 — 移动首屏

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

11

System Prompt

Pentagram은 하이엔드 멀티디시플리너리 디자인 스튜디오 포트폴리오입니다. 이 디자인은 극도의 절제가 특징이며, 단색 팔레트(ink: #1a1a1a, bg: #ffffff, muted: #767676)를 사용하여 사진 프로젝트 작업이 초점이 되도록 합니다. 타이포그래피는 본문에 humanist-sans를, 디스플레이에 grotesque-sans를 사용하여 깔끔하고 기능적이며, 크기는 13px에서 52px까지 범위가 있습니다. 주요 특징에는 넉넉한 여백, 풀블리드 이미지, 최소한의 UI 요소가 포함됩니다. 핵심 디자인 제약 조건: 장식적 폰트를 절대 사용하지 말 것, 화려한 강조색을 피할 것, 큰 타이포그래피 스케일을 유지할 것, 콘텐츠 블록 사이에 상당한 수직 리듬을 유지할 것.

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

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

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

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