큐레이션 · 오픈 · 무료

Perkybros

따뜻하고 중립적인 배경을 가진 깔끔한 타이포그래피 중심의 에이전시 포트폴리오.

01

디자인 DNA

명확하고 대담한 타이포그래피를 강조하는 현대적이고 공예 중심의 디자인 스튜디오 포트폴리오.

02

컬러

따뜻한 오프화이트 배경을 가진 고대비 단색 핵심.

03

타이포그래피

geometric-sans · transitional-serif

• display48px · 500
• headline40px · 400
• body18px · 400

제목은 기하학적 산세리프를 대문자로 사용합니다. · 본문은 과도기적 세리프를 사용합니다. · 작은 레이블은 기하학적 산세리프를 대문자로 사용합니다.

04

여백

타이트하고 의도적인 공간 관계를 위한 일관된 기본 4 스케일링.

05

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

인터랙티브 요소와 구분선을 위한 미묘한 1px 하단 테두리.

06

레이아웃

대형, 비구조화된 이미지 영역을 가진 유연한 그리드.

07

모션과 인터랙션

hover 시 미묘한 색상 및 배경 전환. · 매끄러운 테두리 색상 전환.

링크와 버튼을 위한 표준 색상/배경 전환. · 보이는 사용자 정의 클릭 애니메이션 없음.

08

컴포넌트

• button 대문자 스타일링과 미묘한 hover 트랜지션이 있는 텍스트 기반 내비게이션.
• card 대형 이미지 다음에 텍스트 레이블이 오는 간단한 레이아웃.
• chip 미니멀리스트 텍스트 전용 표시기 (예: '03 of 06').
• input 보이는 것 없음.
• hero 오버레이 내비게이션이 있는 전체 폭 사진 프레젠테이션.

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있으며 공예 지향적.
• 헤드라인 직설적이고 대문자.
• CTA 미니멀리스트 텍스트 전용.

• 그림자를 사용하지 마세요 — 스크린샷은 완전히 평평한 디자인을 보여줍니다.
• 둥근 모서리를 사용하지 마세요 — 스크린샷은 모든 모서리가 날카로운 것을 보여줍니다.
• 복잡한 그라디언트를 사용하지 마세요 — 스크린샷은 단색으로 채워진 평평한 색상을 보여줍니다.
• 밀집된 텍스트 블록을 사용하지 마세요 — 스크린샷은 넓은 여백과 큰 타이포그래피를 보여줍니다.
• 선명한 네온 컬러를 사용하지 마세요 — 스크린샷은 무채색 톤과 고대비 단색을 보여줍니다.
• 범용 산세리프 본문 텍스트를 사용하지 마세요 — 스크린샷은 설명에 과도기적 세리프를 사용하고 있습니다.
• 피하기: 장식 패턴
• 피하기: 둥근 모서리
• 피하기: 그림자
• 피하기: 그라디언트
• 피하기: 선명한 네온 컬러
• 피하기: 밀집된 텍스트 블록

10

팩 안의 실제 스크린샷

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

11

System Prompt

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