큐레이션 · 오픈 · 무료

Collins

대담한 편집적 타이포그래피와 절제된 세련된 미니멀리즘을 균형 있게 조화시킨 프리미엄 디자인 에이전시 사이트입니다.

01

디자인 DNA

하이엔드 디자인 에이전시 스튜디오

02

컬러

미묘한 따뜻한 회색과 고대비 흑색 잉크를 사용한 거의 단일 색조로 최대의 편집적 임팩트를 줍니다.

03

타이포그래피

transitional-serif · humanist-sans

• display72px · 400
• heading36px · 400
• body16px · 400
• caption14px · 400

04

여백

좁은 자간의 넉넉한 여백이 숨 쉬는 듯한 편집 리듬을 만듭니다

05

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

따뜻하고 무채색의 회색을 사용한 미묘한 1px 테두리

06

레이아웃

넉넉한 수직 패딩이 있는 중앙 정렬 영웅 영역과 비대칭 콘텐츠 섹션

07

모션과 인터랙션

clip-path 표시 · transform 슬라이드 · opacity 사라짐

0.7s easing을 사용한 미묘한 색상 전환 · 바운스 없이 즉각적인 피드백

08

컴포넌트

• button 어두운 잉크 채우기와 흰색 텍스트를 사용한 미니멀 알약 모양 버튼
• card 모서리가 둥근 (16px) 대형 이미지 중심 카드로 사례 연구를 선보입니다
• chip 수평 플렉스 레이아웃으로 배열된 월계수 프레임 수상 배지
• input 미묘한 테두리가 있는 미니멀 인라인 텍스트 필드
• hero 풍부한 수직 호흡 공간이 있는 전면 뷰포트 중앙 정렬 헤드라인

09

보이스와 금지 목록

• 톤 권위 있으면서도 초대하는
• 헤드라인 마침표가 있는 짧고 강렬한 명령형 문장
• CTA 단순한 단어 행동 (탐색)

• 밝은 강조색을 사용하지 마세요 — 사이트는 지배적인 강조색이 없는 거의 단일 색조 팔레트에 의존합니다
• 무거운 drop shadow를 사용하지 마세요 — 표면 디자인은 플랫하고 깨끗합니다
• 헤드라인에 좁은 줄 간격을 사용하지 마세요 — 전체적으로 넉넉한 수직 리듬이 유지됩니다
• 표시 텍스트에 sans-serif를 사용하지 마세요 — 영웅 헤드라인에는 독점적으로 serif 타이프페이스를 사용합니다
• 레이아웃을 여러 요소로 복잡하게 만들지 마세요 — 섹션당 최대 여백과 단일 초점
• 장식용 테두리를 사용하지 마세요 — 유일하게 눈에 보이는 테두리는 1px의 미묘한 구분선입니다
• 피하기: 기술 전문 용어
• 피하기: 지나치게 캐주얼한 언어
• 피하기: 일반적인 마케팅 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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