큐레이션 · 오픈 · 무료

Stephaniespecht

다양한 디자인 작업이 스스로 말하게 하는, 날것의 프로젝트 중심 포트폴리오입니다.

01

디자인 DNA

그래픽 디자인 스튜디오의 디지털 전시 공간

02

컬러

화려한 프로젝트 이미지가 지배하도록 엄격한 단색 기반을 적용합니다.

03

타이포그래피

humanist-sans · geometric-sans

• display32px · 700
• title25px · 400
• body16px · 400
• caption12px · 400

기본 폰트 스택은 'Helvetica Neue', Arial, sans-serif입니다. · 글꼴 두께 400과 700만 엄격히 사용합니다. · 프로젝트 시각과 경쟁하지 않도록 미니멀한 타이포그래피를 적용합니다.

04

여백

프로젝트 컨테이너와 탐색에 일관된 24px padding을 사용합니다.

05

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

구분을 위한 미세한 1px 테두리 또는 하단 테두리

rgba(0, 0, 0, 0.05) 0px 1px 3px 0px

06

레이아웃

단일 칼럼에서 다중 칼럼으로 적응하는 조밀한 메이슨리 스타일 그리드입니다.

07

모션과 인터랙션

탐색 요소에 대한 hover 시 부드러운 opacity 전환 · 인터랙티브 상태에 대한 미세한 테두리 전환

탐색 링크 및 프로젝트 이미지의 opacity 변화 · 프로젝트 상세 페이지로 직접 탐색

08

컴포넌트

• button hover 상태가 있는 텍스트 기반 탐색 링크
• card 개별 프로젝트를 나타내는 전체 폭 이미지 컨테이너
• chip 프로젝트 이미지 내부의 컬러 태그 또는 작은 레이블
• input 최소화하거나 숨김 처리
• hero 전체 뷰포트 너비를 차지하는 크고 몰입감 있는 프로젝트 이미지.

09

보이스와 금지 목록

• 톤 조용하고 자신감 있으며 프로세스 지향적
• 헤드라인 프로젝트 이미지 내부에 삽입되는 짧고 묘사적인 제목
• CTA 미세하고 통합적이며, 종종 간단한 텍스트 링크를 통해 구현

• 복잡한 색상 팔레트를 사용하지 마십시오 — 스크린샷은 흑백 회색을 엄격히 기반으로 보여줍니다.
• 장식적인 타이포그래피를 사용하지 마십시오 — 스크린샷은 모든 인터페이스 텍스트에 기능적인 humanist sans-serif를 사용합니다.
• 무거운 그림자나 발광 효과를 추가하지 마십시오 — 스크린샷은 일부 요소에만 매우 미세한 1px drop shadow를 보여줍니다.
• 프로젝트 이미지에 둥근 모서리를 사용하지 마십시오 — 스크린샷은 주요 콘텐츠 그리드에 날카로운 모서리를 보여줍니다.
• 아이콘이나 배지로 인터페이스를 복잡하게 만들지 마십시오 — 스크린샷은 텍스트 링크만 있는 미니멀한 헤더를 보여줍니다.
• 복잡한 탐색 시스템을 만들지 마십시오 — 스크린샷은 평면적인 수평 상위 메뉴를 보여줍니다.
• 피하기: 마케팅 문구나 지나치게 열정적인 언어
• 피하기: 크고 화려한 call-to-action 버튼
• 피하기: 작업에서 주의를 분산시키는 복잡한 인터랙티브 기교

10

팩 안의 실제 스크린샷

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

11

System Prompt

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