厳選・オープン・無料

Deno

モダンなウェブのための、単純化されたJavaScriptランタイム。

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

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

📦 パックの中身を見る →

01

デザイン DNA

開発者ランタイムjavascript簡素化モダン

モダンなウェブ開発者のための整然としたツールボックス

02

カラー

#70ffafAccent
#0a0e1cInk
#1f2328Ink soft
#ffffffBG
#ecf3fdBG soft
#f5f5f5BG quiet
#868789Muted
rgba(229, 234, 234, 1)Line

クリーンな白を背景に、 PRIMARYなアクションには特徴的なミントグリーンのアクセントカラー。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

04

余白

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

行の高さに基づいた一貫した垂直リズムを持つ、標準的な4pxグリッド。

05

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

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

1px solid #e5eaea

0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

全幅のヒーローを2カラムに分割し、モバイルでは1カラムにシフトする。

07

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

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

フェードイントランジション · スムーズなホバー状態の変化

インタラクティブ要素に対する、微妙な背景色や不透明度の変化。 · マイクロインタラクションによる即座のビジュアルフィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

これは、オープンソースのJavaScriptランタイムであるDenoのウェブサイトです。デザインはクリーンでモダン、開発者に焦点を当てています。主要カラーには、白い背景（#ffffff）、柔らかいセクション用の非常に薄いブルーグレー（#ecf3fd）、テキスト用の深い暗いインク色（#0a0e1c）、およびコール・トゥ・アクション用の特徴的なミントグリーン（#70ffaf）が含まれます。タイポグラフィには、ヘッドラインにボルドなグロテスクサンセリフ、本文にヒューマニストサンセリフ、コードスニペットにモノスペースフォントを使用しています。重要な禁止事項：複雑なダーク背景を避け、装飾的なセリフフォントを使わず、散らかったレイアウトではなく豊富なホワイトスペースを維持すること。システムは落ち着きがあり、洗練されており、開発者ツールを単純化することに焦点を当てています。

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

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

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

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