큐레이션 · 오픈 · 무료

Deno

현대 웹을 위한 간단한 자바스크립트 런타임입니다.

devtoolsruntime

Deno 스크린샷

↓ 디자인 시스템 다운로드 (17 MB)OpenDesign 에서 열기

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

📦 팩 내용 보기 →

01

디자인 DNA

개발자런타임자바스크립트간소화된현대적인

현대 웹 개발자를 위한 잘 정돈된 도구 상자

02

컬러

#70ffafAccent

#0a0e1cInk

#1f2328Ink soft

#ffffffBG

#ecf3fdBG soft

#f5f5f5BG quiet

#868789Muted

rgba(229, 234, 234, 1)Line

주요 액션을 위한 선명한 믹트 그린 강조색과 함께 깨끗한 흰색 배경을 사용합니다.

03

타이포그래피

grotesque-sans · humanist-sans · monospace

display44px · 700
headline18px · 700
body16px · 400
small13px · 400

04

여백

4px

8px

12px

16px

24px

32px

48px

64px

96px

128px

표준 4px 그리드와 줄 높이에 기반한 일관된 수직 리듬을 사용합니다.

05

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

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid #e5eaea

0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)

06

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

전체 너비의 히어로를 두 개의 칼럼으로 나누고, 모바일에서는 단일 칼럼으로 전환됩니다.

07

모션과 인터랙션

150msmicro

200mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

페이드 인 전환 · 매끄러운 hover 상태 변경

인터랙티브 요소의 미세한 배경색 또는 불투명도 변경. · 마이크로 인터랙션을 통한 즉각적인 시각적 피드백.

08

컴포넌트

button 단색 믹트 그린 배경에 어두운 텍스트를 가진 알약 모양의 주요 버튼; 어두운 배경에 흰색 텍스트를 가진 보조 버튼입니다.
card 흰색 배경과 미세한 둥근 모서리를 가진 부드러운 그림자의 컨테이너입니다.
chip 태그 또는 인터랙티브 레이블로 사용되는 작은 둥근 알약 모양 요소입니다.
input 미세한 테두리와 통합된 검색 아이콘을 가진 둥근 검색 필드입니다.
hero 왼쪽에는 굵은 헤드라인, 오른쪽에는 둥근 일러스트레이션이 있는 큰 비대칭 분할 레이아웃입니다.

09

보이스와 금지 목록

톤 전문적이고 친근하며 자신감 있는 어조.
헤드라인 직설적이고 행동 지향적이며 굵은 스타일.
CTA '문서' 및 'GitHub'와 같은 핵심 액션에 초점을 맞춘 간단하고 명확한 스타일.

복잡한 그라디언트를 사용하지 마세요 — 스크린샷은 단색 플랫 배경을 보여줍니다.
장식용 세리프 글꼴을 사용하지 마세요 — 스크린샷은 깔끔한 산세리프 타이포그래피를 보여줍니다.
거친 네온 색상을 사용하지 마세요 — 스크린샷은 강조를 위해 부드러운 특정 믹트 그린을 사용합니다.
많은 경쟁 초점이 있는 복잡한 레이아웃을 사용하지 마세요 — 스크린샷은 충분한 여백을 사용합니다.
주요 요소에 날카롭고 상자 같은 모서리를 사용하지 마세요 — 스크린샷은 둥글고 알약 모양의 모서리를 사용합니다.
다크 모드를 기본 테마로 사용하지 마세요 — 스크린샷은 주로 밝고 흰색 기반의 인터페이스를 보여줍니다.
피하기: 불필요한 전문 용어
피하기: 공격적인 마케팅 언어
피하기: 지나치게 형식적인 어조

10

팩 안의 실제 스크린샷

Deno — 桌面首屏（hero） — 桌面首屏（hero）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 移动首屏 — 移动首屏

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

11

System Prompt

이것은 오픈 소스 자바스크립트 런타임인 Deno의 웹사이트입니다. 디자인은 깔끔하고 현대적이며 개발자 중심입니다. 주요 색상에는 흰색 배경(#ffffff), 부드러운 섹션을 위한 매우 연한 블루 그레이(#ecf3fd), 텍스트를 위한 깊은 어두운 잉크(#0a0e1c), 그리고 주요 강조를 위한 독특한 믹트 그린(#70ffaf)이 포함됩니다. 타이포그래피는 헤드라인에는 굵은 고딕 산세리프를, 본문 텍스트에는 휴머니스트 산세리프를, 코드 스니펫에는 모노스페이스 글꼴을 사용합니다. 중요한 주의사항: 복잡한 어두운 배경을 피하고, 장식용 세리프 글꼴을 사용하지 않으며, 복잡한 레이아웃 대신 충분한 여백을 유지합니다. 시스템은 차분하고 정교하며 개발자 도구의 복잡함을 해소하는 데 초점을 맞추고 있습니다.

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

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

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

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