큐레이션 · 오픈 · 무료

AREA 17

단색 팔레트와 넓은 여백을 갖춘 세련된 타이프 중심 에이전시 포트폴리오.

01

디자인 DNA

고급 건축 저널과 글로벌 전략 회사의 만남.

02

컬러

대비가 높은 타이포그래피와 넓은 여백을 활용하여 프리미엄하고 에디토리얼한 느낌을 구현하는 엄격한 단색 팔레트.

03

타이포그래피

grotesque-sans

• display55px · 400
• headline42px · 400
• body16px · 400

대형 디스플레이 크기용 타이트한 음수 자간 · 로고 마크 및 특정 UI 강조용으로 전용 중간 무게(500) · 블록 간 넉넉한 수직 여백을 둔 좌측 정렬 타이포그래피

04

여백

큰 빈 섹션과 패딩된 텍스트 블록을 둔 넉넉하고 비대칭적인 간격

05

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

주로 쿠키 동의 액션과 특정 구분선에 사용되는 미세한 1px 테두리.

rgb(0, 0, 0) 0px 0px 0px 1px · rgba(0, 0, 0, 0) 0px 0px 0px 0px

06

레이아웃

콘텐츠가 좌측에 크게 치중된 비대칭 그리드로, 구조를 정의하기 위해 거대한 padding과 여백을 사용합니다.

07

모션과 인터랙션

큰 이미지 및 페이지 로드 노출을 위한 느리고 부드러운 불투명도 및 transform 전환(1s) · 버튼과 같은 인터랙티브 요소를 위한 더 빠르고 미세한 색상 및 배경 전환(0.3s)

인터랙티브 텍스트와 버튼에서 미세한 색상 변화 또는 약간의 불투명도 변경. · 고요하고 에디토리얼한 분위기를 유지하기 위해 공격적인 시각적 피드백 없음.

08

컴포넌트

• button 미니멀한 플랫 또는 아웃라인 버튼으로, 주로 작은 둥근 모서리를 특징으로 하며 미세한 테두리로 형태를 명확히 합니다.
• card 그리드 기반 카드 레이아웃보다 연속 스크롤과 큰 이미지에 중점을 둔 것으로 보이며 두드러지게 사용되지 않습니다.
• chip 깔끔한 내비게이션 링크와 간단한 텍스트 분류를 선호하여 사용되지 않습니다.
• input 주요 UI에 보이지 않으며, 폼 컨텍스트용 표준 텍스트 필드가 암시됩니다.
• hero 위아래로 상당한 음수 공간을 두고 뷰포트를 지배하는 좌측 정렬의 거대한 텍스트 선언.

09

보이스와 금지 목록

• 톤 권위적, 자신감 넘치고 매우 전문적.
• 헤드라인 에이전시성과 전문성을 확립하는 선언적 1인칭 복수('We partner...') 선언.
• CTA 공격적인 프로모션 언어가 없는 미니멀하고 기능적인('Accept', 'Decline', 'Contact') 문구.

• 화려한 악센트 색상을 사용하지 마세요 — 스크린샷은 검정, 흰색, 회색으로 구성된 엄격한 단색 팔레트를 보여줍니다.
• 장식적인 세리프를 사용하지 마세요 — 스크린샷은 전체적으로 깔끔하고 기하학적인 grotesque-sans 타이포그래피를 보여줍니다.
• 요소들을 빽빽하게 배치하지 마세요 — 스크린샷은 넓은 여백과 텍스트 블록 간 넉넉한 padding을 보여줍니다.
• 무거운 그림자를 사용하지 마세요 — 스크린샷은 필요할 때만 미세한 1px 테두리를 사용한 미니멀하고 플랫한 표면을 보여줍니다.
• 장난스럽거나 둥근 디스플레이 폰트를 사용하지 마세요 — 스크린샷은 헤드라인용으로 진지하고 현대적인 sans-serif를 보여줍니다.
• 주요 텍스트 블록을 중앙 정렬하지 마세요 — 스크린샷은 모든 히어로 및 본문 콘텐츠에 강한 좌측 정렬을 보여줍니다.
• 피하기: 장난스러운 전문 용어
• 피하기: 느낌표
• 피하기: 지나치게 복잡한 문장 구조
• 피하기: 불필요한 단어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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