큐레이션 · 오픈 · 무료

Bun

빠르고 올인원인 JavaScript 런타임 및 툴킷입니다.

devtoolsruntime
Bun 스크린샷
↓ 디자인 시스템 다운로드 (26 MB)OpenDesign 에서 열기

원본 사이트: https://bun.sh

📦 팩 내용 보기 →

01

디자인 DNA

성능개발자 중심올인원빠른런타임

JavaScript 개발자를 위한 고성능 스포츠카

02

컬러

#F472B6Accent
#FFFFFFInk
#E5E7EBInk soft
#0D0E11BG
#282A36BG soft
#9CA3AFMuted
rgba(255,255,255,0.16)Line

어두운 배경 위에 단일한 강렬한 핑크 포인트 컬러로 높은 대비를 적용합니다.

03

타이포그래피

grotesque-sans · system-sans · monospace

본문 텍스트에는 성능과 네이티브 느낌을 위해 system-ui를 사용합니다. · 코드 블록에는 가독성을 위해 JetBrains Mono 또는 유사한 폰트를 사용합니다. · 헤드라인 텍스트는 촘촘한 행간을 유지하여 밀도 높고 현대적인 느낌을 연출합니다.

04

여백

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

엄격한 4px 기반 그리드 시스템으로 수직 및 수평 리듬을 일관되게 유지합니다.

05

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

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

어두운 카드 테두리를 정의하기 위한 미세한 흰색 테두리(불투명도 0.16)를 적용합니다.

rgba(0, 0, 0, 0.25) 0px 25px 50px -12px · rgba(131, 24, 67, 0.1) 0px 10px 15px -3px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

중앙 정렬된 최대 너비 컨테이너를 갖춘 표준 12열 반응형 그리드입니다.

07

모션과 인터랙션

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

hover 시 부드러운 색상 및 배경 전환. · 상호작용 피드백을 위한 미세한 불투명도 변화.

미세한 배경색 변화 및 텍스트 색상 변경. · 최소 지연으로 즉각적인 시각적 반응.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

Bun은 개발자를 위한 현대적이고 올인원 솔루션으로 포지셔닝된 고성능 JavaScript 런타임 및 툴킷입니다. 디자인은 깊은 어두운 배경(#0D0E11)에 높은 대비의 흰색 텍스트(#FFFFFF)와 단일의 활기찬 핑크 포인트(#F472B6)를 사용합니다. 타이포그래피는 헤드라인에 굵은 grotesque-sans, 본문에 깔끔한 system-sans를 사용합니다. 핵심 제약 조건: 밝은 테마를 사용하지 않으며, 헤드라인에 세리프 폰트를 사용하지 않으며, 복수의 강조 색상이나 과도한 장식 요소로 UI를 복잡하게 만들지 않으며, 비알약 컴포넌트에 지나치게 큰 border-radius를 사용하지 않습니다.

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

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

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

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