큐레이션 · 오픈 · 무료

Bareis Nicolaus

비주얼 커뮤니케이션 에이전시를 위한 고대비, 태그 기반 디자인 포트폴리오.

01

디자인 DNA

비주얼 작업을 위한 세련된 단색 아카이브 시스템.

02

컬러

프로젝트 이미지가 모든 색상을 제공하는 엄격히 단색.

03

타이포그래피

geometric-sans · humanist-sans

• display72px · 400
• body24px · 400

폰트 패밀리: Lausanne, sans-serif · 폰트 웨이트: 856개 요소에 걸쳐 일관되게 400 사용. · 폰트 크기: 24px가 주요 텍스트 크기.

04

여백

인터랙티브 태그 요소의 padding으로 정의되는 일관된 수직 및 수평 리듬.

05

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

태그와 버튼에 2px solid white 테두리.

06

레이아웃

왼쪽에 탐색/필터 태그, 오른쪽에 프로젝트 이미지가 배치된 분할 화면 레이아웃.

07

모션과 인터랙션

인터랙티브 태그에 대한 hover 시 부드러운 전환. · 섹션 확장 및 축소를 위한 flex 및 opacity 전환.

태그의 배경 채우기 또는 불투명도 변화. · 태그가 프로젝트 그리드를 필터링.

08

컴포넌트

• button 2px solid white 테두리가 있는 알약 모양(border-radius 120px)의 태그, 검정 배경, 흰색 텍스트.
• card 오버레이된 알약 모양 텍스트 레이블이 포함된 풀블리드 사진 이미지.
• chip 카테고리 필터링에 광범위하게 사용되며, 태그와 동일한 스타일.
• input 태그 기반 상호작용으로 암시되는 최소화된 검색 또는 필터 입력.
• hero 거대한 타이포그래피의 탐색과 고품질 프로젝트 사진을 결합한 대형 분할 화면.

09

보이스와 금지 목록

• 톤 전문적이고 직접적이며 집중적.
• 헤드라인 주요 탐색을 위한 크고 굵은 sans-serif 타이포그래피(72px).
• CTA 탐색과 필터링을 초대하는 인터랙티브 알약 모양 태그.

• 흰색 배경을 사용하지 마세요 — 스크린샷은 순수한 검정 배경을 보여줍니다.
• 주요 UI에 장식적이거나 세리프 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 sans-serif를 보여줍니다.
• 컬러 버튼이나 악센트를 사용하지 마세요 — 스크린샷은 엄격히 단색 UI 요소를 보여줍니다.
• 무거운 드롭 그림자를 사용하지 마세요 — 스크린샷은 테두리 기반의 플랫 요소를 보여줍니다.
• 복잡한 다단계 텍스트 레이아웃을 사용하지 마세요 — 스크린샷은 깔끔한 태그 기반 그리드를 보여줍니다.
• 알약 모양보다 작은 둥근 모서리를 사용하지 마세요 — 스크린샷은 매우 둥근 테두리(120px)를 보여줍니다.
• 피하기: 필기체 폰트
• 피하기: 부드러운 그림자
• 피하기: 장식적 그라데이션

10

팩 안의 실제 스크린샷

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

11

System Prompt

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