精选 · 开放 · 免费

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）和标准字重。 · 正文在深色背景上使用浅灰色，确保清晰易读。 · 等宽字体用于技术术语、标签和面向开发者的界面元素。

04

间距

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

一致的8px和16px增量构建出紧凑、高效的网格系统。

05

表面 (圆角 / 阴影 / 边线)

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

纤细、低不透明度的白色边框用于定义浮动表面，如Cookie弹窗和卡片。

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列网格，配以充裕留白，强调大尺寸、字距紧凑的标题以增强冲击力。交互效果平滑，具有细微的颜色过渡，保持高性能的技术感。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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