큐레이션 · 오픈 · 무료

Tokyo Uk

인텔리전스로 구동하는 디지털 경험 엔지니어링.

01

디자인 DNA

시네마틱 이미징과 대형 타이포그래피를 통해 대담한 작업을 선보이는 프리미엄 디지털 에이전시.

02

컬러

복잡한 색상 시스템 대신 대담한 타이포그래피와 대규모 사진에 의존하는 날것 그대로의 고대비 팔레트.

03

타이포그래피

geometric-sans

• display400px · 500
• h140px · 400
• body16px · 400

히어로 텍스트가 뷰포트 너비를 채우도록 동적으로 확장됩니다. · 본문 텍스트는 약 680px의 편안한 읽기 너비를 유지합니다. · 내비게이션과 부제목에는 가벼운 굵기(300)가 사용됩니다.

04

여백

상단 패딩 120px, 그리드 항목 간 간격 80px의 넉넉한 여백.

05

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

눈에 띄는 테두리는 없습니다. 구분을 위해 이미지 대비와 여백에 의존합니다.

06

레이아웃

풀블리드 히어로 뒤에 프로젝트 쇼케이스를 위한 반응형 2열 그리드가 옵니다.

07

모션과 인터랙션

텍스트 링크의 hover 전환

텍스트 링크와 내비게이션의 미묘한 불투명도 또는 색상 전환. · 인터랙티브 요소에 표준 포인터 커서.

08

컴포넌트

• button 명시적인 버튼 모양 없이 텍스트 기반의 미니멀한 내비게이션.
• card 하단에 간단한 텍스트 설명이 있는 대형 이미지 기반 프로젝트 카드.
• hero 대형 오버레이 타이포그래피가 있는 시네마틱 풀뷰포트 배경 이미지.

09

보이스와 금지 목록

• 톤 자신감 있고, 전문적이며, 절제된.
• 헤드라인 뷰포트를 지배하는 대형 전부 대문자 또는 두꺼운 산세리프 문장.
• CTA 두드러진 버튼 대신 절제된 텍스트 링크.

• 화려한 강조색을 사용하지 마세요 — 스크린샷은 엄격한 흑백 팔레트를 보여줍니다.
• 카드에 드롭 섀도우를 추가하지 마세요 — 스크린샷은 플랫 이미지 기반 카드를 보여줍니다.
• 세리프 글꼴을 사용하지 마세요 — 스크린샷은 일관된 기하학적 산세리프 계열을 보여줍니다.
• 히어로에 UI 요소로 지저분하게 만들지 마세요 — 스크린샷은 대형 텍스트와 배경 이미지만 보여줍니다.
• 헤드라인에 작은 타이포그래피를 사용하지 마세요 — 스크린샷은 화면을 채우는 대형 디스플레이 텍스트를 보여줍니다.
• 명시적인 버튼 모양을 사용하지 마세요 — 스크린샷은 미니멀한 텍스트 기반 내비게이션을 보여줍니다.
• 피하기: 지저분한 레이아웃
• 피하기: 장식용 그래픽
• 피하기: 두드러진 CTA 버튼

10

팩 안의 실제 스크린샷

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

11

System Prompt

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