厳選・オープン・無料

Liveblocks

マルチプレイヤーアプリとエージェントのためのリアルタイムインフラ。

01

デザイン DNA

リアルタイムコラボレーション機能のためのVercel

02

カラー

極度の抑制を用いた、高コントラストのモノクロ暗色モード。

03

タイポグラフィ

humanist-sans · monospace

• display68px · 500
• h152px · 500
• body16px · 400
• small14px · 400

見出しには、タイトなトラッキングと高ウェイトを持つ幾何学/ヒューマニストサンスを使用します。 · 本文は、可読性のためにリラックスした1.5の行高を維持します。 · モノスペースフォントは、コードブロックと技術ラベルに厳密に使用します。

04

余白

息を吹き込むための豊富なパディングを備えた、一定の4pxグリッド。

05

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

1px solid rgba(255,255,255,0.1)

0 0 0 1px rgba(255,255,255,0.1) · 0 2.767px 2.214px 0px rgba(0,0,0,0.05) · 0 100px 80px 0px rgba(0,0,0,0.17)

06

レイアウト

最大幅のコンテナとフル幅の背景セクションを備えた、中央揃えカラムレイアウト。

07

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

インタラクティブ要素の、滑らかな不透明度と色のトランジション。 · ホバー時の、微妙な変形とスケール効果。

0.1秒から0.3秒の期間で、微妙な色や背景のシフト。 · 最小限のビジュアルフィードバックによる、即座のレスポンス。

08

コンポーネント

• button ピル型または角丸長方形のボタン。高コントラスト（黒地に白または白地に黒）を適用します。
• card 微妙な1pxボーダーを持ち、背景色による区別を行わない暗いカード。
• chip 微妙な背景またはボーダー処理を施した、小さな角丸ラベル。
• input 角丸と1pxボーダーを持つ、暗い背景の入力フィールド。
• hero 巨大な製品スクリーンショットと2つのCTAを備えた、中央揃えの巨大なタイポグラフィ。

09

文体と禁止事項

• トーン 技術的で、直接的、かつ権威あるトーン。
• 見出し 太字で簡潔、かつ価値志向のスタイル。
• CTA アクション志向で明確に。 Often emphasize 'Free' or 'Start'.

• プライマリ背景にカラフルなグラデーションを使用しない — スクリーンショットは純黒とダークグレーを示しています。
• 見出しにセリフフォントを使用しない — スクリーンショットはクリーンな幾何学的ヒューマニストサンセリフを示しています。
• 柔らかく角丸のパステルカラーを使用しない — スクリーンショットは高コントラストのモノクロパレットを示しています。
• 不必要なボーダーまたはシャドウでUIを散らかさない — スクリーンショットは極めて最小限のサーフェス処理を示しています。
• ジャストリフイ（両端揃え）のテキスト配置を使用しない — スクリーンショットは中央揃えと左揃えのレイアウトを示しています。
• 遊び心がある、または過度に装飾的なアイコンを使用しない — スクリーンショットはシンプルなラインベースのアイコノグラフィを示しています。
• 避ける: 過度にカジュアルまたはスラングの多い言語は避けてください。
• 避ける: UIコピーで、長く回りくった文は避けてください。
• 避ける: 技術的価値から注意をそらす装飾的な要素は避けてください。

10

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

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

11

System Prompt

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