큐레이션 · 오픈 · 무료

Locomotive

고대비, 타이포그래피 중심 레이이웃을 통해 작업을 선보이는 디지털 중심 디자인 에이전시.

01

디자인 DNA

에디토리얼의 우아함과 대담한 기술적 정밀함의 균형을 이루는 프리미엄 디자인 스튜디오.

02

컬러

강렬한 흑백을 사용한 고대비 팔레트에, 단 하나의 고채도 오렌지 강조색이 포인트로 사용됩니다.

03

타이포그래피

didone-serif · grotesque-sans

• display110px · 400
• headline70px · 400
• body26px · 400
• caption15px · 400

04

여백

개방적이고 넓은 레이아웃으로, 넉넉한 패딩(수직 40px)과 요소 간 일관된 간격(20px)을 사용합니다.

05

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

구분선 및 구조화된 레이블을 위해 최소한이지만 정확한 2px 실선 테두리를 사용합니다.

06

레이아웃

대형 영웅 이미지와 텍스트가 시각 요소 위에 겹쳐지는 것을 강조하는 비대칭 그리드 레이아웃입니다.

07

모션과 인터랙션

hover 시 불투명도 및 배경색 변화를 위한 부드러운 전환. · 인터랙티브 UI 요소를 위한 정확하고 빠른 변형. · 배경 이미지를 위한 몰입형, 복잡한 캔버스 또는 WebGL 효과 가능성.

정확한 완화 곡선을 사용한 미세한 불투명도 또는 배경색 변화. · 변형 또는 불투명도 변화를 통한 즉각적인 피드백.

08

컴포넌트

• button 전통적인 버튼 스타일링 없이, 미세한 방향 화살표 또는 맞춤 타이포그래피가 있는 텍스트 기반 내비게이션 링크.
• card 영웅 영역에는 최소화되거나 존재하지 않으며, 포함된 카드 대신 대형 몰입형 이미지에 의존합니다.
• hero 겹쳐지는 대형 세리프 타이포그래피를 사용한 전체 폭 또는 지배적인 사진/비디오 배경.

09

보이스와 금지 목록

• 톤 전문적이고 혁신적이며 자신감 있으면서, 약간의 장난기 있는 어조.
• 헤드라인 에디토리얼하고 프리미엄 느낌의 굵은 대형 세리프 타이포그래피.
• CTA 내비게이션이나 레이아웃에 자연스럽게 통합된, 미세한 텍스트 중심 호출.

• 모든 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 0px 반경의 날카로운 박스와 카드를 보여줍니다.
• 드롭 섀도우나 복잡한 깊이 효과를 사용하지 마세요 — 스크린샷은 순수한 타이포그래피와 색상 대비에 의존합니다.
• 다색 팔레트를 사용하지 마세요 — 스크린샷은 엄격히 흑백과 하나의 오렌지 강조색만 사용합니다.
• 헤드라인에 작고 압축된 타이포그래피를 사용하지 마세요 — 스크린샷은 거대한 110px 크기의 디스플레이 텍스트를 특징으로 합니다.
• 표준적이고 무거운 버튼 컴포넌트를 사용하지 마세요 — 스크린샷은 인터랙션을 위해 텍스트 링크와 미세한 테두리를 사용합니다.
• 텍스트 뒤에 지나치게 바쁜 배경을 사용하지 마세요 — 스크린샷은 고대비 단색 배경이나 깔끔한 이미지를 사용합니다.
• 피하기: 캐주얼하거나 지나치게 친근한 언어는 피합니다.
• 피하기: 복잡한 그라데이션이나 드롭 섀도우는 피합니다.
• 피하기: 복잡한 레이아웃이나 과도한 UI 컴포넌트는 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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