厳選・オープン・無料

099 Supply

3D Mockupsとインタラクティブなコンポーネントのための、クリーンでシステム化されたマーケットプレイス。

01

デザイン DNA

高品質なデザインアセットのデジタル倉庫。

02

カラー

厳格な無彩色で、純粋な黒とグレーを用い、フォーカスを製品レンダリングに集中させます。

03

タイポグラフィ

monospaced

• display54px · 400

全タイポグラフィに単一のモノスペース・フォント・ファミリーを使用。 · 見出しとUIラベルは一貫して大文字。 · 小文字テキストには、可読性のために広めの字間を設定。

04

余白

主要セクションには、一貫した40pxおよび80pxの外側パディング。

05

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

1px solid #E0E0E0

0 1px 2px rgba(0,0,0,0.05)

06

レイアウト

均等なサイズのカードによるレスポンシブ・グリッド。

07

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

ボーダーやカラー変更のための高速120msトランジション。 · インタラクティブ要素の繊細な不透明度とカラーのフェード。

ボーダー・カラーまたは背景色の微細な変化。 · 高速トランジションによる即座のビジュアルフィードバック。

08

コンポーネント

• button モノスペース大文字テキストを持つ、アウトライン付きピル型ボタン。
• card 薄い1pxボーダー、軽いホバー状態、底部ラベルバーを持つ白いカード。
• chip アウトラインのみで、トップレベルナビゲーションに使用。
• input モノスペース・テキストを持つシンプルなアウトライン入力フィールド。
• hero ブランドではなくアセットに焦点を当てた、高密度な製品カードのグリッド。

09

文体と禁止事項

• トーン 実用的、技術的、かつ効率的。
• 見出し 数字のプレフィックス often を伴う、大文字のモノスペース・テキスト。
• CTA 明確なボーダー付きボタン、またはシンプルなテキストリンク。

• セリフ体フォントを使用しないこと — スクリーンショットではモノスペース・フォントのみが使用されている。
• カラフルな背景を使用しないこと — スクリーンショットでは厳格な白とグレーのパレットが使用されている。
• 角を大きく丸めたカードを使用しないこと — スクリーンショットではtightな8pxの角が使用されている。
• ドロップシャドウで奥行きを表現しないこと — スクリーンショットではフラットなボーダーが使用されている。
• フォントウェイトを混在させないこと — スクリーンショットでは一貫して400ウェイトが使用されている。
• ヘッダーに小文字テキストを使用しないこと — スクリーンショットではすべて大文字のUIラベルが使用されている。
• 避ける: 装飾的な装い
• 避ける: 角丸でフレンドリーな形状
• 避ける: カラフルなグラデーション
• 避ける: セリフ体のタイポグラフィ

10

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

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

11

System Prompt

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