큐레이션 · 오픈 · 무료

Bou

시네마틱 히어로와 깔끔한 고대비 섹션을 갖춘 세련된 에디토리얼 디자인 에이전시 웹사이트.

01

디자인 DNA

하이엔드 사진과 깔끔한 에디토리얼 타이포그래피를 결합하여 세련되고 전문적인 디지털 존재감을 만드는 프리미엄 디자인 스튜디오.

02

컬러

엄격한 흑백 핵심을 기반으로 한 단색 및 무채색 팔레트로, 사진이 모든 색상과 따뜻함을 제공하도록 설계되었습니다.

03

타이포그래피

humanist-sans

• display42px · 300
• body16px · 300
• caption14px · 300

모든 주요 텍스트에 웨이트 300을 사용하여 우아하고 가벼운 느낌을 유지합니다. · 'SERVICES'나 'HELSINKI'와 같은 작은 레이블에만 대문자 변환을 적용합니다. · 최적의 가독성을 위해 넉넉한 line-height(1.4~1.5)를 유지합니다.

04

여백

요소 간의 패딩과 간격에 일관된 8px 또는 16px 수직 리듬을 적용하여 구조적이고 여유로운 레이아웃을 보장합니다.

05

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

rgba(0, 0, 0, 0.3) 0px 32px 68px 0px

06

레이아웃

전체 폭 사진 히어로 섹션에 이어 콘텐츠와 서비스를 위한 두 열 분할 레이아웃을 사용하며, 유연한 정렬을 위해 12열 그리드를 활용합니다.

07

모션과 인터랙션

링크와 버튼을 위한 부드러운 색상 전환. · 콘텐츠 섹션이 뷰포트에 들어올 때의 미세한 페이드인.

링크와 버튼에 미세한 색상 변화 또는 불투명도 변경. · 부드러운 전환 효과가 있는 즉각적인 반응.

08

컴포넌트

• button 검은색 배경에 화이트 텍스트의 둥근 모양 버튼, 또는 어두운 배경 위에 화이트 테두리가 있는 미니멀리스트 고스트 버튼.
• card 큰 사진과 깔끔한 타이포그래피로 계층을 만드는 미니멀리스트 보더리스 카드.
• chip 대문자 텍스트와 얇은 테두리가 있는 작은 둥근 모양 태그로, 위치나 카테고리에 사용됩니다.
• input 단순한 1px 하단 테두리와 배경 없는 미니멀리스트 입력 필드.
• hero 중앙 정렬된 대규모 타이포그래피가 오버레이된 전체 뷰포트 시네마틱 사진.

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있으며 직접적입니다.
• 헤드라인 깔끔하고 우아하며 설명적인 스타일로, 에이전시의 핵심 서비스에 초점을 맞춥니다.
• CTA 미니멀리스트로, 간단한 텍스트 링크 또는 작은 둥근 모양 버튼을 사용합니다.

• 고채도 색상을 사용하지 마세요 — 스크린샷은 엄격한 단색 흑백 팔레트를 보여줍니다.
• 두껍고 볼드한 타이포그래피를 사용하지 마세요 — 스크린샷은 가볍고 우아한 느낌을 주는 웨이트 300의 지배적인 사용을 보여줍니다.
• 그림자가 있는 둥근 카드를 사용하지 마세요 — 스크린샷은 사진이 경계를 정의하는 평면적이고 보더리스 레이아웃을 보여줍니다.
• 좁고 밀집된 간격을 사용하지 마세요 — 스크린샷은 여유로운 패딩과 간격(8px-16px)을 보여줍니다.
• 장식적인 테두리를 사용하지 마세요 — 스크린샷은 칩이나 입력 필드와 같은 기능성 요소에만 미니멀리스트 1px 테두리를 사용합니다.
• 복잡하고 다채로운 그라데이션을 사용하지 마세요 — 스크린샷은 사진적 깊이를 가진 깔끔한 단색 배경을 보여줍니다.
• 피하기: 过于 캐주얼하거나 비속어 사용을 피합니다.
• 피하기: 과도한 느낌표 사용을 피합니다.
• 피하기: 서비스에 필수적이지 않은 복잡하거나 기술적인 전문 용어 사용을 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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