厳選・オープン・無料

Drizzle ORM

TypeScriptとJavaScriptのための、モダンで高速なORM。

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

オリジナル: https://orm.drizzle.team

📦 パックの中身を見る →

01

デザイン DNA

ORMTypeScriptJavaScriptデータベース開発者

開発者がデータを効率的に管理するための、クリーンで高速なツールキットのようなものです。

02

カラー

#222222Ink
#444444Ink soft
#FFFFFFBG
#FAFAFABG soft
#F1F2F3BG quiet
#71687BMuted
rgba(33, 39, 46, 0.12)Line

クリーンな白い背景に、高コントラストで、淡いグレーの構造要素を用います。

03

タイポグラフィ

sans-serif · monospace

システムsans-serifスタックがメインのフォントです。 · モノスペースフォントは、コードスニペットや技術ラベルに使用します。 · 手書きフォントは、遊び心のある注釈に選択的に使用します。

04

余白

4px
8px
12px
16px
20px
24px
32px
40px
64px

一貫した4pxベースグリッドと、セクションに豊かなpadding。

05

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

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

1px solid rgb(229, 231, 235)

rgba(0, 0, 0, 0.08) 0px 0px 0px 1px · rgba(0, 0, 0, 0.075) 0px 2px 4px 0px · rgb(255, 255, 255) 0px 0px 1px 1px inset

06

レイアウト

1200container
12columns
24pxgutter
768 / 1024breakpoints

レスポンシブなスタックに対応した、中央揃えのコンテンツコンテナ。

07

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

200msmicro
300mssmall
800msmedium
ease-in-outeasing

hover時の滑らかなカラー遷移 · 不透明度のフェードイン

微細な背景色の変化またはカラー遷移。 · 目立った変化はなく、標準のポインターカーソル。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

これはORMのための開発者ツールSaaSサイトで、白い背景を持つクリーンでミニマルなデザインを特徴としています。主要なカラーには、ダークチャコールテキスト（#222222）とライトグレーボーダー（#E5E7EB）が含まれます。タイポグラフィには、本文に標準のsans-serifスタック、コードにモノスペーススタックを使用しています。デザインは、重いシャドウではなく、豊かな余白と淡いボーダーに依存しています。重要な注意点：ダークモードは使用せず、グラデーション背景を追加せず、装飾的なフォントは使用しないでください。レイアウトは中央揃えでレスポンシブ이며、明確な階層構造と読みやすさに焦点を当てています。

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

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

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

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