큐레이션 · 오픈 · 무료

Gretel

근명확한 대비, 넉넉한 여백, 대형 타이포그래피로 정의된 하이엔드 디자인 스튜디오 포트폴리오입니다.

01

디자인 DNA

작품이 호흡하고 스스로 말하게 내버려두는 미니멀 갤러리입니다.

02

컬러

사진과 타이포그래피에 최대한 집중하기 위해 엄격한 단색 체계를 사용합니다.

03

타이포그래피

humanist-sans

• display75px · 400
• heading39px · 400
• body16px · 400

대형 디스플레이 텍스트에는 좁은 음의 자간을 사용합니다. · 가독성을 위해 소형 본문 텍스트에는 높은 행간(1.7)을 유지합니다. · 볼드 웨이트는 사용하지 않으며, 단일 폰트 패밀리의 크기와 웨이트 변화에 의존합니다.

04

여백

기본 리듬은 8px이며, 주요 섹션 사이에 넉넉한 수직 마진을 둡니다.

05

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

UI 테두리는 보이지 않으며, 구분은 오직 여백으로 처리합니다.

06

레이아웃

좌측 정렬 텍스트 열과 우측 정렬 풀블리드 또는 인셋 이미지로 구성된 비대칭 그리드입니다.

07

모션과 인터랙션

불투명도 페이드인 · 미세한 transform translate · 부드러운 hover 전환

링크와 이미지의 미세한 불투명도 감소. · 무거운 바운스 없이 즉각적인 피드백.

08

컴포넌트

• button 미세한 불투명도 또는 색상 전환을 사용하는 미니멀리스트 텍스트 링크입니다.
• card 대형 타이포그래피와 모서리까지 차는 이미지를 사용하는 갤러리 스타일 프로젝트 카드입니다.
• hero 뷰포트를 지배하는 대형 좌측 정렬 타이포그래피 문구로, 상단/하단에 상당한 padding을 둡니다.

09

보이스와 금지 목록

• 톤 자신감 있고 권위적이며 약간 시적입니다.
• 헤드라인 좁은 자간과 문장형 대문자 사용을 통한 선언적 문구.
• CTA 두드러진 버튼 컨테이너 없이 절제된 텍스트 링크.

• 드롭 섀도우 사용 금지 — 스크린샷은 고도감 없이 완전히 평평한 표면을 보여줍니다.
• 장식 테두리 추가 금지 — 스크린샷은 여백으로만 구분하는 것을 보여줍니다.
• 대형 본문 텍스트를 중앙 정렬 금지 — 스크린샷은 강한 좌측 정렬 읽기 무게감을 보여줍니다.
• 화려한 액센트 사용 금지 — 스크린샷은 엄격한 흑백 팔레트를 보여줍니다.
• 둥근 모서리 사용 금지 — 스크린샷은 날카로운 90도 모서리 또는 모서리까지 차는 이미지를 보여줍니다.
• 두꺼운 폰트 웨이트 사용 금지 — 스크린샷은 전체 UI에서 지배적인 일반 웨이트(400)를 보여줍니다.
• 피하기: 지나친 느낌표 사용
• 피하기: 마케팅 용어
• 피하기: 지저분한 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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