厳選・オープン・無料

Mono Frm Fm

ギャラリーの雰囲気を持った、グリッドベースのクリーンなハードウェアショーケース。

01

デザイン DNA

モダンハードウェアのためのギャラリーアイテムカタログ。

02

カラー

鋭い黒のボーダーがグリッドを定義する、ハイコントラストのモノクロームパレット。

03

タイポグラフィ

grotesque-sans · humanist-sans

• display43px · 300
• heading39px · 300
• subhead25px · 300
• body16px · 300
• caption12px · 300

ヘッドラインを含むほぼすべてのテキストに、ライトなフォントウェイト（300）を使用します。 · ボタンとラベルには大文字を使用します。 · 十分なline-heightで、 Tight な垂直リズムを維持します。

04

余白

一貫した4pxのベースグリッドがすべてのスペーシングを支配し、メインのグリッドセルには大きなパディングブロックを使用します。

05

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

2px solid #292929

06

レイアウト

すべての要素を隔てる2pxの黒いボーダーを持つ、厳格な非対称CSSグリッド。

07

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

円形テキストの回転アニメーション · コンテンツ表示のための滑らかな高さトランジション

最小限の視覚フィードバック。インタラクションは状態変化よりもコンテンツの表示に焦点を当てます。 · コンテンツの拡張またはナビゲーションをトリガーします。

08

コンポーネント

• button ボーダー半径がなく、大文字テキストでライトフォントウェイトのミニマルなアウトラインボタン。
• card レイアウトグリッドのボーダーで定義された、严格的に矩形のコンテナ。ドロップシャドウや角丸はありません。
• hero 製品写真、説明テキスト、円形テキスト要素を組み合わせた非対称なマルチパネルレイアウト。

09

文体と禁止事項

• トーン 瞑想的で、エレガントかつ洗練された。
• 見出し 詩的で、上を向いた印象。ライトなフォントウェイトを使用。
• CTA 直接的で、大文字、控えめな。

• 角丸を使用しない — スクリーンショットではすべての要素が90度の鋭いエッジを示しています。
• ドロップシャドウを使用しない — スクリーンショットでは深度表現に実線ボーダーのみに依存しています。
• 太いフォントウェイトを使用しない — スクリーンショットではライト（300）ウェイトのみが使用されています。
• 鮮やかなアクセントカラーを使用しない — スクリーンショットは厳格なモノクロームパレットに準拠しています。
• 有機的または非対称なパディングを使用しない — スクリーンショットでは rigid な4pxベースのグリッドスペーシングを使用しています。
• 流動的またはグラデーションの背景を使用しない — スクリーンショットでは固形の#FFFFFFと#292929のブロックを使用しています。
• 避ける: 角丸のUI要素
• 避ける: ドロップシャドウ
• 避ける: 明るいアクセントカラー
• 避ける: 遊び心のある言葉遣い
• 避ける: 雑然としたレイアウト

10

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

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

11

System Prompt

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