큐레이션 · 오픈 · 무료

Neutra Vdl

역사적 건축 랜드마크를 위한 고요한 편집적 프레젠테이션.

01

디자인 DNA

웹으로 옮겨진 1960년대 건축 단행본.

02

컬러

따뜻한 오프화이트 배경과 거의 검은 잉크가 특징인, 고대비의 거의 단색 팔레트입니다.

03

타이포그래피

grotesque-sans · monospace

• display67px · 400
• body18px · 400
• caption12px · 400

04

여백

일정한 행간과 텍스트 블록 간의 수직 여백을 통해 수직 리듬을 유지합니다.

05

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

콘텐츠 블록을 구분하기 위해 얇은 실선을 사용하며, 링크와 내비게이션 요소에는 밑줄을 사용합니다.

06

레이아웃

큰 타이포그래피 요소와 충분한 여백을 가진 넓은 그리드 기반 레이아웃입니다.

07

모션과 인터랙션

페이드 인 · 불투명도 변화

인터랙티브 텍스트 요소에 미세한 불투명도 또는 색상 변화. · 모든 클릭 가능 요소에 대한 표준 포인터 커서.

08

컴포넌트

• button 보이는 배경이나 테두리 없이 텍스트로만 구성된 링크.
• card 얇은 수평선으로 분리된 콘텐츠 블록.
• chip 없음
• input 없음
• hero 명확한 수평 규칙이 포함된, 크고 임팩트 있는 타이포그래피 헤더.

09

보이스와 금지 목록

• 톤 교육적, 정제되고 전문적인 어조.
• 헤드라인 직접적이고 사실적이며, 크고 간격을 좁힌 타이포그래피를 사용.
• CTA 레이아웃에 자연스럽게 통합되는 절제된 텍스트 링크.

• 둥근 모서리를 사용하지 마세요 — 스크린샷은 엄격히 직선적이고 날카로운 모서리의 레이아웃을 보여줍니다.
• 그림자(드롭 섀도우)를 사용하지 마세요 — 스크린샷은 깊이 효과 없는 평면적인 2D 요소를 보여줍니다.
• 주요 강조색을 사용하지 마세요 — 스크린샷은 단일 주요 색조 없이 단색 팔레트를 보여줍니다.
• 가운데 정렬 레이아웃을 사용하지 마세요 — 스크린샷은 왼쪽 정렬된 텍스트와 요소를 보여줍니다.
• 밀집된 다단락 텍스트를 사용하지 마세요 — 스크린샷은 넓은 여백과 블록 간의 명확한 분리를 보여줍니다.
• 장식적 테두리를 사용하지 마세요 — 스크린샷은 간단하고 기능적인 수평 규칙만을 보여줍니다.
• 피하기: 장난스러운 언어
• 피하기: 밝은 색상
• 피하기: 장식적 요소

10

팩 안의 실제 스크린샷

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

11

System Prompt

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