큐레이션 · 오픈 · 무료

Design Museum

사진적 임팩트와 대담한 타이포그래피 정체성을 우선시하는 정교한 문화 기관 사이트입니다.

museumdesign

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

원본 사이트: https://designmuseum.org

📦 팩 내용 보기 →

디자인 DNA

designmuseumcontemporaryLondonculture

대담하고 건축적인 갤러리 입구가 디지털 인터페이스로 번역된 형태입니다.

컬러

#E8E316Accent

#000000Ink

#FFFFFFBG

rgba(0,0,0,0.1)Line

건축적인 옐로우 액센트와 몰입감 있는 사진이 포함된 고대비 모노크롬을 사용합니다.

타이포그래피

geometric-sans · grotesque-sans

display50px · 700
heading30px · 700
body15px · 400
small12px · 500

대형 디스플레이 타입에 타이트한 자간을 사용하여 건축적인 긴장감을 연출합니다. · 탐색 및 액션 라벨에 대문자 스타일링을 우선시합니다. · 명확한 계층 구조를 위해 디스플레이와 본문 폰트 간의 고대비를 유지합니다.

여백

4px

8px

16px

24px

32px

48px

64px

96px

4px 기본 그리드와 주요 콘텐츠 블록 사이에 넉넉한 여백을 두어 사진이 숨 쉴 수 있도록 합니다.

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

sm · 0px

md · 4px

lg · 0px

pill · 999px

UI 요소에 1px solid 블랙, 활성 상태에 2px solid를 사용합니다.

0px 32px 68px 0px rgba(0,0,0,0.3)

레이아웃

1440container

12columns

24pxgutter

768 / 1024breakpoints

중앙 정렬된 콘텐츠와 그리드 기반 정보 레이아웃을 갖춘 풀와이드 사진 히어로입니다.

모션과 인터랙션

100msmicro

500mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

스크롤 시 텍스트 요소에 대한 순차적인 페이드인 및 슬라이드업. · 인터랙티브 요소에 부드러운 hover 전환. · 히어로 이미지에 미묘한 parallax 효과.

색상 반전 또는 날카로운 배경 전환. · 약간의 스케일링 또는 불투명도 변화를 통한 즉각적인 시각적 피드백.

컴포넌트

button 날카로운 모서리와 대문자 텍스트를 사용하는 고대비 솔리드 블록(블랙/화이트/옐로우)입니다.
card 날카로운 테두리 또는 미니멀한 패딩으로 정의된 깔끔한 컨테이너입니다.
chip 선택적 테두리가 포함된 단순한 텍스트 기반 태그입니다.
input 깔끔한 테두리와 표준 패딩을 사용하는 미니멀한 폼 요소입니다.
hero 대담한 타이포그래피 오버레이가 적용된 대형 포맷 사진 배경입니다.

보이스와 금지 목록

톤 제도적이고 권위 있으면서도 환영하는 분위기와 미래 지향적인 톤입니다.
헤드라인 대담하고 간결하며, 종종 건축적인 구문을 사용합니다.
CTA 직접적이고 행동 지향적이며, 강조를 위해 종종 대문자를 사용합니다.

기본 버튼에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 직사각형 버튼 모양을 보여줍니다.
텍스트에 저대비 색상을 사용하지 마세요 — 스크린샷은 흰색이나 옐로우 배경에 고대비 블랙 텍스트를 보여줍니다.
장식적이거나 세리프 폰트를 사용하지 마세요 — 스크린샷은 기하학적이고 그로테스크한 산세리프 패밀리를 보여줍니다.
부드럽고 파스텔 액센트 색상을 사용하지 마세요 — 스크린샷은 대담하고 고채도 옐로우 액센트를 보여줍니다.
모든 요소에 중앙 정렬 탐색을 사용하지 마세요 — 스크린샷은 중앙 정렬된 햄버거 메뉴와 함께 왼쪽 정렬 텍스트를 보여줍니다.
카드에 넉넉한 border-radius를 사용하지 마세요 — 스크린샷은 날카로운 모서리 또는 매우 미니멀한 둥글림을 보여줍니다.
피하기: 지나치게 장식적이거나 스크립트 폰트를 사용하지 마세요.
피하기: 부드럽고 파스텔 팔레트를 사용하지 마세요.
피하기: 기본 버튼에 둥근 모서리를 사용하지 마세요.
피하기: 여백이 부족한 복잡한 레이아웃을 사용하지 마세요.
피하기: 일반적인 스톡크 사진을 사용하지 마세요.
피하기: 중요한 정보에 저대비 텍스트를 사용하지 마세요.

팩 안의 실제 스크린샷

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

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

System Prompt

이것은 런던 디자인 뮤지엄을 위한 정교한 문화 기관 웹사이트입니다. 메인 액센트로 대담한 건축적인 옐로우(#E8E316)를 사용하는 고대비 모노크롬 팔레트(블랙 #000000, 화이트 #FFFFFF)를 사용합니다. 타이포그래피는 엄격하게 기하학적이고 그로테스크한 산세리프로, DIN Pro 패밀리에서 나왔을 가능성이 높으며, 대형 헤드라인에 타이트한 자간과 50px에서 12px까지 명확한 계층 구조를 가집니다. 레이아웃은 그리드 기반이며 여백이 넉넉하여 대형 포맷 사진과 대담한 텍스트 오버레이를 우선시합니다. 중요 지침: 기본 버튼에 절대 둥근 모서리를 사용하지 말 것, 저대비 텍스트를 절대 사용하지 말 것, 장식적이거나 세리프 폰트를 절대 사용하지 말 것. 전반적인 느낌은 제도적이고 권위적이며 건축적으로 정확합니다.

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

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

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

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