큐레이션 · 오픈 · 무료

Urbanwoodsystems

거대한 타이포그래피와 뉴트럴 팔레트를 사용한 대담한 그리드 기반 하드웨어 제품 사이트.

01

디자인 DNA

미니멀리스트 스위스 디자인 매거진과 하드웨어 카탈로그의 만남.

02

컬러

따뜻한 뉴트럴 배경을 가진 고대비 단색 팔레트.

03

타이포그래피

grotesque-sans

• display140px · 500
• body11px · 500

모든 텍스트는 엄격히 미디엄 웨이트(500)로 설정합니다. · 모든 요소에서 좁은 자간(-0.1px ~ -2px)을 사용합니다. · 폰트 웨이트 변화 없이, 오직 거대한 스케일 차이를 통해서만 위계를 구현합니다.

04

여백

엄격한 4px 그리드와 인터랙티브 요소 주변의 최소한의 padding을 적용합니다.

05

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

기본 1px 시스템 기본값 외에는 눈에 보이는 테두리를 사용하지 않으며, 전적으로 레이아웃과 spacing에 의존합니다.

06

레이아웃

데스크톱에서는 비대칭 2열 그리드, 모바일에서는 단일 열로 쌓입니다.

07

모션과 인터랙션

인터랙티브 요소에서의 색상 전환(0.2초). · 복잡한 입장 애니메이션이나 동적 패턴이 눈에 띄지 않음.

클릭 가능한 요소에 표준 포인터 커서. · 없음.

08

컴포넌트

• button 메인 네비게이션 허브 역할을 하는 큰 흰색 원형 컨테이너.
• card 없음; 네비게이션은 큰 기하학적 형태로 처리됩니다.
• chip 없음.
• input 없음.
• hero 한쪽에 큰 제품 사진, 다른 쪽에 거대한 타이포그래피 블록이 있는 비대칭 분할 레이아웃.

09

보이스와 금지 목록

• 톤 자신감 있고 절제된 기능적 어조.
• 헤드라인 거대하고 볼드하며 자간이 좁은 스타일.
• CTA 큰 기하학적 네비게이션 허브에 통합된 은은한 스타일.

• 가볍거나 얇은 폰트 웨이트를 사용하지 마세요 — 스크린샷에서는 모든 텍스트가 웨이트 500으로 표시됩니다.
• 표면에 드롭 섀도우나 깊이감을 추가하지 마세요 — 스크린샷에서는 완전히 플랫한 요소가 보입니다.
• 순백 배경을 사용하지 마세요 — 스크린샷에서는 따뜻한 뉴트럴(#E6E6DD)이 보입니다.
• 버튼에 복잡한 border-radius를 사용하지 마세요 — 스크린샷에서는 큰 알약/원형(300px radius)이 보입니다.
• 밝거나 다채로운 악센트 팔레트를 사용하지 마세요 — 스크린샷은 블랙 잉크로 엄격히 단색입니다.
• 넓거나 느슨한 자간을 사용하지 마세요 — 스크린샷에서는 좁고 압축된 타이포그래피가 보입니다.
• 피하기: 과도한 형용사 또는 마케팅성 표현.
• 피하기: 복잡하거나 다단계 네비게이션 메뉴.
• 피하기: 선명하거나 네온 컬러 스킴.
• 피하기: 장식적 요소 또는 불필요한 UI 플러리시.
• 피하기: 이탤릭체 또는 스크립트 타이포그래피.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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