큐레이션 · 오픈 · 무료

Merci-Michel

몰입감 있는 애니메이션 배경 위에 굵은 세리프 타이포그래피를 사용하는 프리미엄 크리에이티브 스튜디오 웹사이트.

studiocreative

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

원본 사이트: https://www.merci-michel.com

📦 팩 내용 보기 →

디자인 DNA

게이미피케이션크리에이티브경험적브랜드장난스러운

우아한 세리프 타이포그래피와 몰입감 있는 다채로운 3D 및 시네마틱 배경을 결합하여 작업을 선보이는 하이엔드 크리에이티브 에이전시 웹사이트.

컬러

#ffffffInk

#000000BG

rgba(255,255,255,0.2)Line

전체 화면의 역동적이고 어둡거나 다채로운 배경 위에 흰색 텍스트를 사용하는 고대비적이고 몰입감 있는 색상입니다.

타이포그래피

didone-serif · monospace

display70px · 400
display-italic64px · 400
body16px · 400
caption12px · 400
micro11px · 400

네비게이션과 본문 텍스트는 모두 넓은 자간의 대문자로 표시합니다. · 디스플레이 타입은 표준 didone 세리프와 이탤릭체 변형을 혼합하여 사용합니다. · 본문 텍스트는 기술적이고 구조화된 느낌을 주기 위해 모노스페이스 폰트를 사용합니다.

여백

4px

8px

16px

24px

32px

48px

64px

96px

전체 화면 섹션과 중앙 정렬된 콘텐츠 블록에 의해 유연하게 결정됩니다.

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

sm · 0px

md · 0px

lg · 0px

pill · 999px

구분선 및 밑줄로 사용되는 얇고 반투명한 흰색 선입니다.

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

동적인 배경과 종종 겹치는 중앙 정렬된 텍스트 콘텐츠를 가진 전체 화면 히어로 섹션입니다.

모션과 인터랙션

300msmicro

500mssmall

800msmedium

cubic-bezier(0.19, 1, 0.22, 1)easing

페이지 요소의 부드러운 fade-in 및 transform 전환. · 배경 이미지 또는 3D 요소에 대한 패럴렉스 유사 효과. · 텍스트 및 UI 컴포넌트에 대한 단계적 애니메이션.

미묘한 불투명도 변화 또는 부드러운 전환. · 부드러운 상태 변화로 즉각적인 응답.

컴포넌트

button 텍스트만으로 된 버튼으로, 자간이 넓은 대문자인 경우가 많으며, 세로 구분선이 있는 경우도 있습니다.
card 전체 화면 배경 카드 또는 이미지 오버레이입니다.
hero 전체 뷰포트 섹션으로, 큰 세리프 타이틀, 모노스페이스 설명, 그리고 애니메이션이나 3D 배경을 가진 CTA 링크를 특징으로 합니다.

보이스와 금지 목록

톤 자신감 있고, 창의적이며, 전문적인 어조.
헤드라인 굵고 우아한 세리프 타이포그래피로, 스타일화된 이탤릭체와 혼합되는 경우가 많습니다.
CTA 절제된, 대문자 모노스페이스 텍스트 링크.

헤드라인에 산세리프 폰트를 사용하지 마세요 — 스크린샷은 우아한 didone-serif 디스플레이 타입을 보여줍니다.
밝고 단색 배경색을 사용하지 마세요 — 스크린샷은 어둡거나 시네마틱하거나 풍부한 일러스트레이션이 있는 배경을 보여줍니다.
UI 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카로운 가장자리 또는 완전히 원형인 필을 보여줍니다.
본문에 소문자를 사용하지 마세요 — 스크린샷은 넓은 자간의 대문자가 널리 사용됨을 보여줍니다.
여러 칼럼을 가진 그리드 중심 레이아웃을 사용하지 마세요 — 스크린샷은 중앙 정렬된 전체 폭의 콘텐츠 블록을 보여줍니다.
좁고 밀집된 간격을 사용하지 마세요 — 스크린샷은 넉넉한 여백과 전 화면 뷰포트 섹션을 보여줍니다.
피하기: 화려하거나 네온색
피하기: 장난스럽고 둥근 산세리프 폰트
피하기: 복잡한 그리드 레이아웃
피하기: 화려하거나 지저분한 배경
피하기: 밝고 평면적인 UI 컴포넌트

팩 안의 실제 스크린샷

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

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

System Prompt

이것은 디지털 게이미피케이션 에이전시를 위한 프리미엄 크리에이티브 스튜디오 웹사이트입니다. 몰입감 있는 어둡고 다채로운 3D 배경 위에 흰색 텍스트를 사용하는 고대비 미학을 특징으로 합니다. 타이포그래피는 디스플레이용 우아한 didone serif와 본문용 모노스페이스가 혼합되어 있습니다. 레이아웃은 중앙 정렬되어 있으며 넓은 공간을 확보하고, 큰 전체 화면 히어로 섹션에 초점을 맞추고 있습니다. 주요 색상은 #000000과 #ffffff이며, 배경 미디어에는 풍부한 파란색, 빨간색, 핑크색이 사용됩니다. 중요 금지 사항: 헤드라인에 산세리프를 사용하지 말 것, 밝은 단색 배경을 사용하지 말 것, 둥근 모서리를 사용하지 말 것, 소문자 텍스트를 사용하지 말 것, 그리드 중심 레이아웃을 사용하지 말 것, 좁은 간격을 사용하지 말 것.

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

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

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

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