厳選・オープン・無料

Render

アプリケーションをデプロイしスケーラビリティを実現する直感的なクラウドインフラストラクチャ。

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

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

📦 パックの中身を見る →

01

デザイン DNA

インフラストラクチャクラウドプラットフォームデプロイ開発者本番環境

複雑なインフラストラクチャを管理するための、清潔でプロフェッショナルなワークスペース

02

カラー

#8A05FFAccent
#0D0D0DInk
#4D4D4DInk soft
#FFFFFFBG
#6B6B6BMuted
rgba(227,227,227,1)Line

インタラクティブ要素やブランディングには鮮やかな紫アクセントを用いた、高コントラストの黒と白を基盤とする。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

ディスプレイフォントはインパクトのためにタイトなトラッキングと行間を使用 · 本文テキストは快適な読みやすさを実現するため、十分な行間を維持 · 等幅フォントはコードスニペットやターミナルコマンドに使用 · フォントウェイトの変動を限定し、デザインをクリーンで読みやすく保つ

04

余白

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

一貫した4pxベースグリッド。呼吸の余地をもたせる十分なホワイトスペース。

05

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

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

カードやコンテナには1px solid #E3E3E3。プライマリアクションには1px solid #0D0D0D。

0px 0px 0px 1px rgba(227,227,227,1) · 0px 0px 0px 1px rgba(13,13,13,1)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

左にテキスト、右にイラストレーションを配置した非対称2カラムのヒーロー。コンテンツセクションには標準の12カラムグリッドを使用。

07

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

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

色と背景の変化にはスムーズな遷移 · インタラクティブ要素にはトランスフォームアニメーション · コンテンツの表示には不透明度のフェード

0.3s easingのカラートランジション。インタラクティブ要素の微細な背景色変化。 · トランスフォームと色の変化による即座のビジュアルフィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

これはクリーンで高コントラストの黒と白を基盤としたプロフェッショナルな開発者ツールSaaSプラットフォームです。デザインでは鋭い2px radiusの角、ジオメトリックsans-serifのヘッドライン（PPNeueMontreal）、ヒューマニストsans-serifの本文テキストを使用しています。主要なHEXカラーは、インクに#0D0D0D、背景に#FFFFFF、紫アクセントに#8A05FF、ボーダーに#E3E3E3です。重要な禁止事項：プライマリボタンに角丸を使用しない、カードにドロップシャドウを追加しない、複数のアクセントカラーを使用しない、装飾的なフォントを使用しない、低コントラストのテキストを使用しない、雑然とした背景を使用しない。レイアウトは技術的なダッシュボードイラストレーションを含む非対称2カラムのヒーローを特徴とし、本番環境対応のインフラストラクチャを強調しています。

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

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

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

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