큐레이션 · 오픈 · 무료

Vitaarchitecture

엄격한 미니멀리즘과 정교한 타이포그래피 디테일의 균형을 맞춘 건축 포트폴리오.

01

디자인 DNA

미세한 세리프 악센트가 있는 깨끗한 갤러리 공간.

02

컬러

건축 사진이 숨 쉴 수 있도록 고대비의 무채색을 사용한 극도의 절제.

03

타이포그래피

didone-serif · grotesque-sans

• display196px · 200
• headline48px · 400
• body16px · 400

'214' 숫자와 같이 크고 우아한 전시 요소에는 didone-serif를 사용합니다. · 기능적인 UI, 탐색, 일반 단락 텍스트에는 grotesque-sans를 사용합니다. · 정교한 미학을 유지하기 위해 모든 타이포그래피에서 자간을 촘촘하게 유지합니다.

04

여백

여유로운 여백과 격리된 수직 패딩 (예: 상단/하단 207px)

05

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

구분을 위해 절제되게 사용하는 가늘고 명료한 검정색 선

06

레이아웃

거대한 공백이 지배하는 단일 컬럼 또는 매우 체계적인 비대칭 그리드

07

모션과 인터랙션

인터랙션 시 색상 서서히 변화 · 요소의 투명도 전환

인터랙티브 요소에 대한 미세한 텍스트 색상 변화. · 최소한의 시각적 피드백으로 즉각적인 반응.

08

컴포넌트

• button hover 시 간단한 밑줄 변화 또는 상태 변화가 있는 텍스트 전용 버튼.
• card 여유로운 여백을 사용하는 타이포그래피 중심 카드, 배경 컨테이너 없음.
• hero 거대한 didone 숫자와 가느다란 수평선으로 구성된 여백이 많은 타이포그래피.

09

보이스와 금지 목록

• 톤 자신감 있고, 정적으며, 매우 정제된 톤.
• 헤드라인 미니멀하며, 종종 큰 숫자 또는 단어 하나를 사용합니다.
• CTA 절제되고 기능적인 텍스트.

• 그림자를 사용하지 마세요 — 스크린샷은 완전히 평평한 표면을 보여줍니다.
• border-radius를 사용하지 마세요 — 스크린샷은 날카롭고 둥글지 않은 모서리를 보여줍니다.
• 화려한 색상을 사용하지 마세요 — 스크린샷은 철저히 모노크롬/흑백입니다.
• 드롭 그림자를 사용하지 마세요 — 스크린샷은 완전히 플랫 디자인에 의존합니다.
• 인터페이스를 복잡하게 만들지 마세요 — 스크린샷은 극단적인 여백을 보여줍니다.
• 전시 텍스트에 sans-serif를 사용하지 마세요 — 스크린샷은 큰 숫자에 didone-serif를 사용합니다.
• 피하기: 감탄사
• 피하기: 마케팅 용어
• 피하기: 화려한 행동 유도 문구
• 피하기: 장식적인 UI 요소

10

팩 안의 실제 스크린샷

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

11

System Prompt

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