큐레이션 · 오픈 · 무료

Tinybird

개발자를 위한 실시간 데이터 분석 플랫폼.

devdata
Tinybird 스크린샷
↓ 디자인 시스템 다운로드 (7 MB)OpenDesign 에서 열기

원본 사이트: https://www.tinybird.co

📦 팩 내용 보기 →

01

디자인 DNA

실시간데이터분석개발자빠른

데이터 스트림을 위한 고성능 터미널.

02

컬러

#27F795Accent
#FFFFFFInk
#8D8D8DInk soft
#0A0A0ABG
#151515BG quiet
#999999Muted
rgba(255, 255, 255, 0.2)Line

집중을 위한 단일의 선명한 네온 그린 악센트가 포함된 고대비 다크 모드.

03

타이포그래피

humanist-sans · monospace

헤드라인은 촘촘한 트래킹(-1px)과 표준 웨이트를 사용합니다. · 본문 텍스트는 다크 배경 위의 밝은 그레이로 깔끔하고 매우 가독성 있게 표시됩니다. · 기술 용어, 태그, 개발자 중심 UI 요소에는 모노스페이스 폰트가 사용됩니다.

04

여백

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

일관된 8px와 16px 단위는 촘촘하고 효율적인 그리드를 만듭니다.

05

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

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

얇고 불투명도가 낮은 화이트 테두리는 쿠키 모달과 카드 같은 상승된 표면을 정의합니다.

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

콘텐츠 가독성을 위해 풍부한 여백을 가진 표준 12열 그리드.

07

모션과 인터랙션

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

배경색과 텍스트 상태의 미묘하고 부드러운 전환. · 인터랙티브 요소의 최소한의 스케일 또는 트랜스폼 애니메이션.

인터랙티브 요소의 미묘한 색상 변화 또는 불투명도 변경. · 색상 전환을 통한 즉각적인 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

Tinybird는 다크 모드 우선 설계를 가진 개발자 중심 실시간 데이터 플랫폼입니다. 팔레트는 딥 블랙과 그레이(#0A0A0A, #151515)와 단일의 선명한 네온 그린 악센트(#27F795)로 주로 구성됩니다. 타이포그래피는 디스플레이 및 본문 텍스트를 위해 깔끔한 휴머니스트 산세리프를, 기술 요소를 위해 모노스페이스 폰트를 사용합니다. 핵심 주의 사항: 여러 악센트 색상 사용을 피하고, 세리프 폰트를 사용하지 않으며, 무거운 드롭 섀도우를 추가하지 마세요. 레이아웃은 풍부한 여백을 가진 표준 12열 그리드로, 임팩트를 위해 크고 촘촘한 트래킹의 헤드라인을 강조합니다. 인터랙션은 부드럽고 미묘한 색상 전환을 통해 고성능의 기술적 느낌을 유지합니다.

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

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

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

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