厳選・オープン・無料

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

見出しは tightened tracking（-1px）と標準ウェイトを使用。 · 本文はダーク背景上のライトグレーで、クリーンかつ非常に高い可読性を実現。 · 技術用語、タグ、開発者向けUI要素には monospaced フォントを使用。

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）を使用しています。タイポグラフィは、表示および本文にクリーンな humanist sans-serif を使用し、技術要素には monospaced フォントを使用。重要な注意点：複数のアクセントカラーの使用を避け、セリフフォントを使用せず、重いドロップシャドウを追加しないこと。レイアウトは標準的な12カラムグリッドで、豊かなホワイトスペースを確保。大きく tightened tracking の見出しを強調し、インパクトを与えています。インタラクションは滑らかで微妙な色のトランジションを維持し、高性能で技術的な印象を保ちます。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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