큐레이션 · 오픈 · 무료

Serpentine

과장된 흑백 타이포그래피와 콘텐츠 중심 레이아웃을 특징으로 하는 정제된 에디토리얼 뮤zeum 인터페이스.

01

디자인 DNA

대담한 건축적 타이포그래피와 고요한 사진 배경의 균형을 이루는 큐레이션된 갤러리 공간.

02

컬러

대담한 흑백 요소를 통해 예술 작품을 우선시하는 고대비 단색 팔레트.

03

타이포그래피

geometric-sans · transitional-serif

• display56px · 700
• body16px · 400
• caption13px · 700

모든 내비게이션과 UI 레이블은 대문자 기하학적 산세리프로 설정해야 합니다. · 기사 본문은 가독성을 위해 전환형 세리프를 사용해야 합니다. · 큰 디스플레이 제목에는 타이트한 마이너스 자간을 유지합니다.

04

여백

대형 타이포그래피 요소의 깔끔한 정렬을 보장하는 일관된 4px 기본 단위.

05

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

날카로운 모서리를 유지하기 위한 흰색 또는 검은색의 철저한 1px 실선 테두리.

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

06

레이아웃

전체 폭의 사진 히어로 섹션 다음에 구조화된 와이드 마진 콘텐츠 블록.

07

모션과 인터랙션

인터랙티브 요소의 부드러운 색상 및 불투명도 전환 · 모달 오버레이의 표준 리니어 페이드

텍스트 링크의 섬세한 불투명도 변화 또는 색상 반전. · 표준 브라우저 포커스 상태를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 대문자 텍스트와 검은색 또는 흰색의 단색 채우기를 사용한 미니멀리스트 사각형.
• card 계층 구조를 위해 큰 타이포그래피에 의존하는 깔끔한 보더리스 이미지 컨테이너.
• chip 내비게이션용 간단한 밑줄 텍스트 탭.
• input 하단 테두리 강조가 있는 표준 양식 필드.
• hero oversized 타이포그래피 오버레이가 있는 고대비 사진 배경.

09

보이스와 금지 목록

• 톤 권위 있고, 문화적으로 세련되며, 미니멀리스틱.
• 헤드라인 attention을 끄는 짧고 강렬한 대문자 명령어.
• CTA 단순 텍스트 버튼이나 간단한 화살표를 사용하는 직접적이고 꾸밈없는 스타일.

• 둥근 모서리를 사용하지 마세요 — 스크린샷은 모든 컨테이너에 0px의 철저한 날카로운 반경을 보여줍니다.
• 장식적인 스크립트 글꼴을 사용하지 마세요 — 스크린샷은 대담한 기하학적 산세리프와 전환형 세리프만 사용합니다.
• 장난스럽고 화려한 색상을 사용하지 마세요 — 스크린샷은 철저한 고대비 흑백 팔레트를 보여줍니다.
• 그림자가 강한 버튼을 사용하지 마세요 — 스크린샷은 간단한 테두리가 있는 플랫하고 단색 채우기 버튼을 보여줍니다.
• 작고 숨겨진 내비게이션을 사용하지 마세요 — 스크린샷은 헤더에 대담하고 대문자 텍스트 링크를 보여줍니다.
• 빽빽하고 복잡한 그리드를 사용하지 마세요 — 스크린샷은 넉넉한 여백과 전체 폭 사진을 보여줍니다.
• 피하기: 장난스럽거나 지나치게 캐주얼한 언어를 피합니다.
• 피하기: 장식적이거나 스크립트 스타일의 글꼴을 피합니다.
• 피하기: 주요 UI 요소의 둥근 모서리를 피합니다.
• 피하기: 화려한 색상의 과도한 사용을 피합니다.
• 피하기: 표준 버튼의 드롭 그림자를 피합니다.
• 피하기: 복잡하거나 빽빽한 레이아웃을 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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