큐레이션 · 오픈 · 무료

Wearemotto

대형 디스플레이 폰트와 넓은 여백을 통해 주목을 끄는, 타이포그래피를 이끄는 대담한 에이전시 사이트입니다.

AgencyBold TypographyCleanPremiumCase Study
Wearemotto 스크린샷
↓ 디자인 시스템 다운로드 (16 MB)OpenDesign 에서 열기

원본 사이트: https://wearemotto.com

📦 팩 내용 보기 →

01

디자인 DNA

전략디자인컨설팅혁신퓨처리즘

브랜드 전략을 위한 고급 건축 회사

02

컬러

#1B1B1CInk
#717476Ink soft
#F4F3F0BG
#848484Muted
rgba(0, 0, 0, 1)Line

따뜻한 중성색을 기반으로 한 고대비 단색

03

타이포그래피

geometric-sans · humanist-sans

레이아웃을 지배하는 대형, 대문자 디스플레이 타입 · 대형 디스플레이 텍스트를 위한 타이트한 라인 하이트 (1.0) · 모든 텍스트에 일관되게 사용되는 미디엄 웨이트 (500)

04

여백

4px
8px
16px
19px
24px
32px
38px
48px
67px
77px
99px
158px

주요 섹션에 158px 상단 패딩을 포함한 넉넉한 수직 간격

05

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

sm · 0px
md · 9px
lg · 9999px
pill · 9999px

활성 CTA 밑줄을 위한 1px solid black

06

레이아웃

1440container
12columns
23pxgutter
768 / 1024breakpoints

포트폴리오 항목을 위한 넓은 멀티칼럼 그리드가 있는 풀블리드 히어로

07

모션과 인터랙션

350msmicro
400mssmall
750msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing

콘텐츠 노출을 위한 부드럽고 높은 아웃 이징 · hover 시 미묘한 투명도 트랜지션 · 포트폴리오 요소를 위한 복잡한 transform 애니메이션

링크와 버튼에 미묘한 색상 또는 투명도 변화 · 새 상태로의 부드러운 이징으로 즉각적인 응답

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Wearemotto — 桌面首屏（hero）
桌面首屏（hero）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 移动首屏
移动首屏

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

11

System Prompt

이것은 대형, 대담한 디스플레이 타이포그래피와 넓은 여백으로 특징지어지는 하이엔드 에이전시 및 컨설팅 사이트입니다. 주요 색상은 따뜻한 오프화이트 배경(#F4F3F0)과 깊은 블랙 텍스트(#1B1B1C)로, 정교하고 고대비의 미학을 만듭니다. 타이포그래피는 기하학적 및 휴머니스트 산세리프 범주를 사용하며, 디스플레이 헤드라인은 타이트한 1.0 라인 하이트와 미디엄 웨이트로 극단적인 크기(150px+)로 설정됩니다. 인터랙션은 미묘한 투명도와 색상 변화에 의존하는 부드럽고 정제된 방식입니다. 결정적으로, 둥근 모서리, 드롭 섀도우, 밝은 악센트 색상을 사용하지 마세요; 디자인은 순수하게 타이포그래피 스케일과 공간 리듬에 의존합니다. 지저분한 레이아웃을 피하고 모든 헤드라인이 최대 효과를 위해 왼쪽 정렬과 대문자로 유지되도록 하세요.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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