큐레이션 · 오픈 · 무료

Work & Co

타이포그래피와 유명 클라이언트 작업이 스스로 말하게 만드는 미니멀하고 자신감 있는 에이전시 포트폴리오입니다.

01

디자인 DNA

격조 있는 디자인 및 기술 컨설팅 기업입니다.

02

컬러

단일 공격적인 빨간색 강조가 있는 고대비 미니멀리즘입니다.

03

타이포그래피

transitional-serif

• display56px · 500
• heading36px · 400
• body16px · 400

모든 본문 텍스트와 제목에 트랜지셔널 세리프를 사용합니다. · 'Part of Accenture Song'과 같이 소규모 유틸리티 텍스트 또는 특정 브랜드 로고에는 산세리프를 사용합니다. · 대형 헤드라인에는 좁은 자간을 적용합니다.

04

여백

주요 섹션 간에 넉넉한 수직 간격(60px, 100px)의 대형 패딩을 사용합니다.

05

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

섹션을 구분하기 위한 1px 얇은 단색 실선 테두리를 사용합니다.

0px -1px 0px 0px inset rgb(0,0,0)

06

레이아웃

모바일에서 축소되는 비대칭 2열 격자(1/3 레이블, 2/3 콘텐츠)입니다.

07

모션과 인터랙션

텍스트 링크에 대한 색상 및 밑줄 전환 효과입니다.

텍스트 색상 변경 또는 밑줄 애니메이션입니다. · 표준 포인터 커서입니다.

08

컴포넌트

• button 밑줄이 있는 텍스트 링크로, 강조 빨간색 또는 검은색으로 표시합니다.
• card 상단 정렬 이미지와 하단의 간결한 세리프 텍스트를 가진 미니멀리스트 카드입니다.
• hero 지지하는 인용문과 CTA가 포함된 대형 왼쪽 정렬 텍스트 블록입니다.

09

보이스와 금지 목록

• 톤 권위 있고 간결하며 절제된 어조입니다.
• 헤드라인 선언적이고 약간 학술적인 스타일입니다.
• CTA 간결한 밑줄 텍스트 링크(예: '자세히 알아보기')입니다.

• 본문 타이포그래피에 산세리프를 사용하지 마세요 — 스크린샷은 트랜지셔널 세리프 폰트에 크게 의존하고 있습니다.
• 여러 강조 색상을 사용하지 마세요 — 스크린샷은 강조에 빨간색(#DB2223)만 일관되게 사용하고 있습니다.
• 깊이감을 위해 드롭 섀도우를 사용하지 마세요 — 스크린샷은 보이는 그림자 요소가 없는 완전히 평면적인 2D 레이아웃을 보여줍니다.
• 레이아웃을 중앙 정렬하지 마세요 — 스크린샷은 텍스트와 섹션 구조를 일관되게 왼쪽 정렬하고 있습니다.
• 카드 또는 UI 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 모든 직사각형 요소에 0px 반경의 날카로운 모서리를 보여줍니다.
• 본문 텍스트에 볼드체를 사용하지 마세요 — 스크린샷은 표준 텍스트에 일관된 font-weight 400을 보여줍니다.
• 피하기: 전문 용어
• 피하기: 지나친 대문자 사용
• 피하기: 과장된 CTA 버튼

10

팩 안의 실제 스크린샷

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

11

System Prompt

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