厳選・オープン・無料

MotherDuck

Infrastructure for answers.

datadb
MotherDuck のスクリーンショット
↓ デザインシステムをダウンロード (14 MB)OpenDesign で開く

オリジナル: https://motherduck.com

📦 パックの中身を見る →

01

デザイン DNA

Data WarehouseAnalyticsSQLDuckDBCloud

複雑なデータインフラのための、親しみやすく利用しやすいユーティリティ。

02

カラー

#FFDE00Accent
#383838Ink
#F4EFEABG
#666666Muted
rgba(56,56,56,1)Line

高コントラスト、暖色系のニュートラルベース。エネルギッシュな黄のアクセントと、明確なillustrative感を出す2pxの黒アウトライン。

03

タイポグラフィ

monospaced · humanist-sans

見出しはすべて大文字で、等幅フォントで設定。 · 本文テキストは読みやすさのため、クリーンなhumanist-sansを使用。

04

余白

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

標準の4pxベースグリッド。主要セクションの周りに余裕のあるpadding。

05

サーフェス (角丸 / 影 / 罫線)

sm · 2px
md · 2px
lg · 2px
pill · 999px

2px solid rgb(56, 56, 56)

rgb(56, 56, 56) -8px 8px 0px 0px · rgb(255, 222, 0) -6px 6px 0px 0px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

中央揃いのヒーローセクション。コンテンツが縦に並び、その後にマルチカラムのロゴグリッド。

07

モーションとインタラクション

120msmicro
200mssmall
400msmedium
cubic-bezier(0.34, 0, 0.12, 1)easing

hover時の精巧なtransform · 滑らかな状態変化のためのease-in-outトランジション

精巧なtransformと可能性としてのシャドウの変化。 · 標準のポインターカーソル。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

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

実ページから取得 · 実 computed styles

11

System Prompt

MotherDuckは、開発者およびデータチーム向けのクラウドData Warehouseプラットフォーム。親しみやすさと正確な技術的美学が特徴。デザインでは、暖かいベージュ背景（#F4EFEA）、濃いグレーインク（#383838）、鮮やかな黄アクセント（#FFDE00）、プライマリボタン用の明るいライトブルー（#6FC2FF）を使用。タイポグラフィは、見出しに等幅フォント（Aeonik Mono）を大文字で多用し、本文テキストにはクリーンなhumanist-sansと組み合わせ。重要なデザインルール：ソフトなグローではなく鋭い2px黒ボーダーとハードオフセットシャドウを維持、ディスプレイテキストは厳密に大文字を使用、一般的な丸みのあるまたは「ソフト」なUIパターンを避ける。全体的な雰囲気はillustrative、構造化、親しみやすいもの。

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

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

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

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