큐레이션 · 오픈 · 무료

Bond

과장된 타이포그래피와 생동감 있는 산호색 강조를 사용하여 인상적이고 표현적인 포트폴리오를 만드는 대담하고 에너지 넘치는 크리에이티브 에이전시 웹사이트입니다.

01

디자인 DNA

표현적인 타이포그래피와 생동감 있는 색상을 사용하여 주목을 끄는 대담하고 에너지 넘치는 크리에이티브 스튜디오입니다.

02

컬러

생동감 있는 산호색 강조와 사진 배경을 사용한 고대비입니다.

03

타이포그래피

grotesque-sans

• display123px · 700
• heading70px · 700
• body18px · 700
• small12px · 400

대부분의 텍스트 요소에 볼드체(700)를 사용합니다. · 디스플레이 텍스트에는 좁은 line height를 사용합니다. · 내비게이션과 레이블에는 대문자를 사용합니다.

04

여백

대형 타이포그래피 주변에는 넉넉한 padding을, UI 요소에는 좁은 간격을 적용합니다.

05

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

1px solid #000000

0 0 10px 0 rgba(0, 0, 0, 0.12) · 0 0 20px 0 rgba(0, 0, 0, 0.1)

06

레이아웃

전체 폭 이미지 히어로 다음에 대형 타이포그래피 섹션이 옵니다.

07

모션과 인터랙션

hover 상태와 메뉴 상호작용을 위한 부드러운 전환. · 타이포그래피를 위한 parallax 또는 스크롤 트리거 애니메이션.

버튼의 색상 반전 또는 배경색 변경. · 미세한 scale 또는 opacity 변화.

08

컴포넌트

• button 산호색 배경에 흰색 텍스트, 또는 흰색 배경에 검은색 텍스트와 검은색 테두리를 가진 알약 모양 버튼입니다.
• card 대형 타이포그래피와 사진 요소를 포함한 미니멀 카드입니다.
• chip 알약 모양 태그 또는 레이블입니다.
• input 검은색 테두리를 가진 미니멀 폼 입력 필드입니다.
• hero 전체 화면 사진 히어로에 텍스트를 겹치거나 미니멀 헤더를 사용합니다.

09

보이스와 금지 목록

• 톤 자신감 있고 직접적이며 약간 장난스러운 어조입니다.
• 헤드라인 과장되고 볼드하며, 주로 소문자 또는 문장 첫 글자 대문자입니다.
• CTA 화살표 아이콘이 포함된 행동 지향적인 스타일입니다.

• 미묘하거나 절제된 타이포그래피를 사용하지 마세요 — 스크린샷은 과장되고 볼드한 헤드라인을 보여줍니다.
• 음은색이나 파스텔 팔레트를 사용하지 마세요 — 스크린샷은 생동감 있는 산호색(#FF5D60)과 고대비 흑백을 보여줍니다.
• 대형 타이포그래피가 없는 복잡한 그리드를 사용하지 마세요 — 스크린샷은 풍부한 여백과 과장된 텍스트를 보여줍니다.
• 헤드라인용 세리프 서체를 사용하지 마세요 — 스크린샷은 볼드한 그로테스크 산세리프를 보여줍니다.
• 작고 밀집된 문단을 사용하지 마세요 — 스크린샷은 넓은 line height를 가진 짧고 강렬한 카피를 보여줍니다.
• 대부분 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카로운 모서리 또는 알약 모양 버튼을 보여줍니다.
• 피하기: 미묘하거나 절제된 타이포그래피.
• 피하기: 음은색이나 파스텔 팔레트.
• 피하기: 대형 타이포그래피가 없는 복잡한 그리드 또는 레이아웃.
• 피하기: 명확하고 표현적인 주제가 없는 스톡 사진.
• 피하기: 헤드라인용 세리프 서체.
• 피하기: 작고 밀집된 문단 텍스트.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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