厳選・オープン・無料

Microwaver59

モノクローム、タイポグラフィ中心、高インタラクティブ性のポートフォリオ・インターフェース。

01

デザイン DNA

実験的デザインスタジオのランディングページ。

02

カラー

ハイコントラストなモノクローム。黒、白、および単一の微妙なグレーのみを使用。

03

タイポグラフィ

monospace

• body19px · 700

すべてのテキストは大文字 · 技術的で均一な美学のために、すべてに monospace フォントを使用 · すべてのテキスト要素に十分な文字間隔を設定

04

余白

4pxのベースグリッドに厳密に整列し、 Tight で一貫した内部パディング。

05

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

インタラクティブ要素と構造的な区切りに、1pxの実線ボーダーを使用。

0 0 0 1px rgba(252, 252, 250, 1)

06

レイアウト

余白の多いセクションを持つ、フルブリードのシングルカラム・レイアウト。

07

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

ロゴアニメーションをプログレススピナーに変形させる · hover 状態における滑らかでわずかに弾力のある cubic-bezier トランジション · 読み込み状態の不透明度フェード

インタラクティブ要素に対する微妙な不透明度またはアンダーラインの変化。 · インタラクティブ要素でカーソルがポインタに変化。

08

コンポーネント

• button 大文字の monospace テキストを持つ角型ボタン。デフォルトでは hover 時にアンダーラインが表示されます。
• card カードは、重いコンテナよりもタイポグラフィと微妙な hover 状態で定義されます。
• chip 提供されたスクリーンショットでは視覚的に確認できません。
• input 提供されたスクリーンショットでは視覚的に確認できません。
• hero 動的で中央配置されたタイポグラフィのロゴアニメーション。プログレスインジケーターに変形します。

09

文体と禁止事項

• トーン 技術的で直接的、かつ非常に抑制的。
• 見出し 大文字、monospace、そして広めのトラッキング。
• CTA 直接的、大文字、そしてミニマル。

• カラフルなグラデーションを使用しない — スクリーンショットは厳格なモノクロームの黒と白のパレットを示しています。
• メイン要素に角丸を使用しない — スクリーンショットは鋭い矩形のエッジを示しています。
• 複数のフォントウェイトを使用しない — スクリーンショットはほぼすべてのテキストに一様な太字ウェイトを使用しています。
• 左揃えのテキストを使用しない — スクリーンショットは中央揃えの対称的なレイアウトを示しています。
• 標準的な文頭大文字を使用しない — スクリーンショットはすべて大文字を示しています。
• 広めの文字間隔を使用しない — スクリーンショットは Tight で凝縮されたテキストを示しています。
• 避ける: 角丸の形状
• 避ける: 柔らかいグラデーション
• 避ける: 装飾的な画像
• 避ける: 複数のカラー

10

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

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

11

System Prompt

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