큐레이션 · 오픈 · 무료

Wandelmaier

제품 디자인 전략가를 위한 세련된 하이컨트라스트 포트폴리오

PortfolioTypographyCleanStudioRefined

Wandelmaier 스크린샷

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

원본 사이트: http://wandelmaier.com

📦 팩 내용 보기 →

01

디자인 DNA

전문적인사람 중심전략적창의적인

미니멀리스트 건축 스튜디오의 포트폴리오

02

컬러

#FFFFFFInk

#191816BG

#A9A9A9Muted

rgba(255, 255, 255, 0.1)Line

차분한 중립 텍스트 색상으로 높은 대비의 다크 테마

03

타이포그래피

transitional-serif · humanist-sans

display187px · 300
heading50px · 300
body24px · 300
caption16px · 300

04

여백

4px

8px

16px

24px

32px

48px

64px

96px

32px 기본 증분을 사용한 넉넉한 수직 리듬

05

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

sm · 4px

md · 48px

lg · 72px

pill · 9999px

대부분의 요소에 눈에 띄는 테두리 없음

06

레이아웃

1440container

12columns

32pxgutter

768 / 1024breakpoints

넉넉한 여백을 가진 큰 중앙 정렬 콘텐츠 블록

07

모션과 인터랙션

220msmicro

400mssmall

800msmedium

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

인터랙티브 요소의 미묘한 배경색 전환 · 즉각적인 시각적 피드백

08

컴포넌트

button 단색으로 채워진 알약 모양 또는 큰 둥근 사각형
card 단순한 텍스트 설명이 아래에 있는 이미지 중심 프로젝트 카드
chip N/A
input N/A
hero 겹치는 coloured 도형이 있는 거대한 타이포그래피 히어로

09

보이스와 금지 목록

톤 전문적이고 간결하며 직접적
헤드라인 소문자, 미니멀리스트, 그리고 매우 스타일리시
CTA 단순한 텍스트 또는 아이콘 기반 행동 유도

여러 경쟁 강조 색상을 사용하지 마세요 — 스크린샷에는 세 가지 뚜렷하고 굵은 강조 도형이 드물게 사용되며, UI 크롬으로 결코 함께 사용되지 않습니다.
모든 텍스트 콘텐츠를 중앙 정렬하지 마세요 — 스크린샷에는 명확한 왼쪽 정렬 본문 텍스트와 설명이 있습니다.
복잡한 카드 테두리나 그림자를 사용하지 마세요 — 스크린샷에는 평평하고 무테두리 이미지 카드가 있습니다.
작고 촘촘한 타이포그래피를 사용하지 마세요 — 스크린샷에는 매우 크고 넉넉한 디스플레이 타입이 있습니다.
라이트 테마를 사용하지 마세요 — 스크린샷에는 일관된 깊은 다크 배경이 있습니다.
헤드라인에 대문자를 사용하지 마세요 — 스크린샷에는 메인 히어로 텍스트에 소문자가 사용되어 있습니다.
피하기: 과도한 전문 용어
피하기: 복잡한 레이아웃
피하기: 모호한 설명

10

팩 안의 실제 스크린샷

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Wandelmaier — 移动首屏 — 移动首屏

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

11

System Prompt

이것은 제품 디자인 전략가를 위한 개인 포트폴리오입니다. 포지셔닝은 전문적이고 세련되었으며 하이엔드 기술에 초점을 맞추고 있습니다. 주요 색상은 깊고 따뜻한 오프블랙 배경(#191816)에 깨끗한 흰색 텍스트(#FFFFFF)와 보조 정보를 위한 차분한 회색(#A9A9A9)입니다. 팔레트는 세 가지 굵은 단색 도형으로 강조됩니다: 밝은 녹색(#34A847), 부드러운 핑크(#FBCBCB), 따뜻한 코랄(#F27851). 타이포그래피는 UI에 휴머니스트 산세리프(PolySans)를, 표현적인 디스플레이 텍스트에는 트랜지셔널 세리프(Canela)를 사용하며, 모두 매우 가벼운 무게입니다. 중요 주의사항: 작고 촘촘한 텍스트를 사용하지 마세요; 여러 경쟁 강조 색상을 동시에 사용하지 마세요; 카드에 무거운 그림자나 테두리를 사용하지 마세요; 헤드라인에 대문자를 사용하지 마세요; 라이트 컬러 스키마를 사용하지 마세요; 복잡하고 복잡한 레이아웃을 사용하지 마세요.

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

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

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

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