큐레이션 · 오픈 · 무료

Wemakethings De

엄격한 단색 그리드로 뒷받침되는 대담한 타이포그래피 스테이트먼트.

EditorialBold TypographyMonochromeProductRestrained
Wemakethings De 스크린샷
↓ 디자인 시스템 다운로드 (2 MB)OpenDesign 에서 열기

원본 사이트: https://wemakethings.de

📦 팩 내용 보기 →

01

디자인 DNA

정밀함장인정신독일 공학미니멀리즘명료성

산업용 설계도면

02

컬러

#000000Ink
#FFFFFFBG
rgba(0,0,0,1)Line

절대적인 블랙과 화이트를 사용한 순수한 단색 이진 시스템.

03

타이포그래피

geometric-sans

타이포그래피가 주요 구조적이고 표현적인 요소 · 거대한 배경 텍스트는 반드시 윤곽선 처리되고 비인터랙티브해야 함 · 네비게이션 링크는 대문자 기하학적 산세리프

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

여유로운 padding이 있는 엄격한 그리드

05

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

sm · 0px
md · 0px
lg · 0px
pill · 0px

그리드 경계를 정의하고 활성 상태를 밑줄 처리하기 위해 사용되는 얇은 1px 실선 블랙 라인

06

레이아웃

1920container
12columns
24pxgutter
768 / 1024breakpoints

1px 블랙 보더가 교차하는 전체 폭 섹션. 기술적인 설계도면 그리드를 만듭니다.

07

모션과 인터랙션

220msmicro
400mssmall
600msmedium
cubic-bezier(0.22, 1, 0.36, 1)easing

부드러운 페이지 전환 · 그리드 기반 고정 스크롤 효과

정의된 그리드 셀 내에서 섬세한 줄 색상 반전 · 과도한 피드백 없이 즉각적인 상태 변화

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

이 디자인 시스템은 프리미엄 자전거 및 라이프스타일 브랜드를 위해 서비스하며, 절대적인 단색 절제와 거대하고 자신감 있는 타이포그래피를 통해 포지셔닝합니다. 팔레트는 엄격히 이진적입니다: 화이트 배경(#FFFFFF)과 절대적인 블랙 텍스트(#000000), 보조나 포인트 컬러는 없습니다. 타이포그래피 카테고리는 독점적으로 기하학적 산세리프이며, 미세한 네비게이션 링크부터 864px 배경 워터마크까지 모든 스케일에서 사용됩니다. 레이아웃은 기술적 설계도면과 유사한 얇은 1px 블랙 보더의 엄격한 그리드로 정의됩니다. 핵심 제약 조건: 절대 둥근 모서리를 사용하지 마세요(반경은 항상 0px), 절대 컬러를 도입하지 마세요(디자인은 엄격히 단색), 절대 부드러운 그림자나 그라데이션을 사용하지 마세요. 상호작용 모델은 섬세하며, 엄격한 구조적 프레임워크 내에서 날카롭고 정확한 전환과 명확한 시각적 계층 구조에 의존합니다.

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

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

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

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