큐레이션 · 오픈 · 무료

Knock

복잡한 제품 메시징을 위한 명확성과 정보 계층 구조를 우선시하는 깔끔하고 기능적이며 개발자 중심적인 디자인 시스템.

devsaas
Knock 스크린샷
↓ 디자인 시스템 다운로드 (10 MB)OpenDesign 에서 열기

원본 사이트: https://knock.app

📦 팩 내용 보기 →

01

디자인 DNA

개발자 중심메시징 인프라AI 네이티브컴포저블운영

명확성과 제어가 가장 중요한 복잡한 통신 시스템 구축을 위한 정밀 도구.

02

컬러

#E8673CAccent
#000000Ink
#222222Ink soft
#F9F9FBBG
#60646CMuted
rgba(200, 206, 213, 1)Line

단정한 팔레트는 가독성을 위해 깊은 중립색을 사용하고, 주요 작업을 알리기 위해 단일의 선명한 따뜻한 강조색을 사용합니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

헤드라인에는 정밀함과 현대성을 전달하기 위해 geometric-sans를 사용합니다. · 본문 텍스트에는 최적의 가독성을 위해 humanist-sans를 사용합니다. · 코드 조각과 기술 데이터에는 monospace를 사용합니다. · 색상이 아닌 크기와 두께를 사용하여 엄격한 타이포그래피 계층 구조를 유지합니다.

04

여백

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

일관된 4px 기본 격자와 섹션을 구분하고 주의를 집중시키기 위한 넉넉한 여백.

05

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

sm · 4px
md · 8px
lg · 12px
pill · 9999px

1px solid #C8CED5

rgba(0, 0, 0, 0.06) 0px 1px 6px 0px · rgba(0, 0, 0, 0.16) 0px 2px 32px 0px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

풍부한 padding과 명확한 콘텐츠 계층 구조를 갖춘 구조화된 열 기반 레이아웃.

07

모션과 인터랙션

150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

피드백을 위한 인터랙티브 요소의 부드러운 전환. · 콘텐ços 출현을 위한 미세한 페이드인 애니메이션. · hover 상태를 위한 변환 효과.

표준 cubic-bezier 전환을 적용한 인터랙티브 요소의 색상 또는 배경 변경. · 미세한 변환 또는 색상 변화를 통해 즉각적인 시각적 피드백 제공.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

Knock은 고객 참여를 위한 개발자 중심 SaaS 플랫폼으로, 깔끔하고 정밀하며 강력한 도구로 자리매김하고 있습니다. 디자인 DNA는 단일의 고채도 산호색(#E8673C) 강조색을 사용한 단정한 밝은 중립 팔레트(#F9F9FB 배경, #000000 잉크)로 특징지어집니다. 타이포그래피는 헤드라인용 geometric-sans와 본문용 humanist-sans를 혼합하여 모두 뛰어난 가독성으로 렌더링됩니다. 핵심 주의 사항: 장식용 세리프를 절대 사용하지 말고, 경쟁적인 강조색을 피하며, 넉넉하고 여백이 풍부한 레이아웃을 복잡하게 만들지 마세요. 디자인은 기술 대상을 위한 명확성, 계층 구조, 기능적 우아함을 우선시합니다.

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

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

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

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