厳選・オープン・無料

Weights & Biases

ダークテーマと遊び心のある手書きアノテーションを用い、複雑な技術ツールを人間味のあるものとするエンタープライズAIプラットフォーム。

01

デザイン DNA

パーソナリティを纏った高性能エンジニアリングダッシュボード

02

カラー

温かみを加える鮮やかなアンバーアクセントと、セカンダリーCTA用の特徴的なシアンを採用した高コントラストダークテーマ

03

タイポグラフィ

transitional-serif · humanist-sans · monospace

• display80px · 400
• h148px · 400
• body20px · 400

大型ディスプレイタイプや権威のある見出しにはトランジショナルセリフを使用 · 本文およびUI要素にはヒューマニストサンスを使用 · コードブロックやターミナル風インターフェースにはモノスペースを使用 · 手書きアノテーション（例：'easy'）は、標準タイポグラフィの上に特殊な装飾レイヤーとして扱う

04

余白

スケールと重要性を強調するための、ゆとりのある余白を備えた標準4pxグリッド

05

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

rgba(43, 48, 59, 1.0)を使用した、コンテナの微妙な区切りのための1px実線ボーダー

rgba(10, 14, 21, 0.5) 0px -1px 16px 0px · rgba(10, 14, 21, 0.5) 0px 16px 16px 0px

06

レイアウト

セクション区切りが明確な、中央揃えのワイドフォーマットレイアウト。コードサンプルには2カラムグリッドを活用

07

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

ボタンおよびインタラクティブ要素のホバーステート · ホバー時の微妙な背景色トランジション · インタラクティブカード要素のトランスフォーム

背景色がわずかに暗くまたは明るく変化。カーソルがポインタに変更。 · 軽微なスケールや色の変化による即座のビジュアルフィードバック。

08

コンポーネント

• button プライマリボタンはアンバー背景にダークテキスト。セカンダリボタンはシアン背景にダークテキスト。アウラインボタンはナビゲーションリンクに使用。
• card コードブロックや機能モジュール用の、ダークでわずかに浮き上がったコンテナ。角丸と微妙なシャドウを採用。
• chip ステータスインジケーターや装飾ドット用の、border-radius: 50%の小型バッジ。
• input 行番号付きのターミナル風ウィンドウとしてスタイル化。ダーク背景とモノスペースフォントを採用。
• hero 遊び心のある手書きアノテーションオーバーレイを持つ大型中央見出し。明確なバリュー・プロポジションと主要CTAをサポート。

09

文体と禁止事項

• トーン 専門的でありながらも親しみやすく、テクニカルな精緻さと遊び心のある自信を融合。
• 見出し 大胆で断定的なステートメント。時折、遊び心のある訂正を挿入（例：'hard'を消し線で引いて'easy'に変更）。
• CTA 直接的でアクション重視。強調のため大文字を使用（例：'GET STARTED WITH WEAVE'）。

• ライト背景を使用しない — スクリーンショットではメイン背景#202226のダークテーマを確認
• 大型ディスプレイ見出しにサンセリフを使用しない — スクリーンショットではメインヘッドラインにトランジショナルセリフフォントを使用
• プライマリCTAに赤色を使用しない — スクリーンショットでは主要アクセントカラーとしてアンバー（#FCBC32）を使用
• 厳格で純粋にユーティリティなレイアウトを使用しない — スクリーンショットでは標準タイポグラフィの上に遊び心のある手書きスタイルアノテーションを確認
• 小さく密なコンテナを使用しない — スクリーンショットでは主要コンポーネントにゆとりのあるパディングとスペーシングを確認
• 背景に複雑なグラデーションを使用しない — スクリーンショットでは装飾要素に時折微妙なグラデーションを含む、ソリッドなダークカラーを使用
• 避ける: 過度にコーポレートまたはドライな言葉遣いを避ける
• 避ける: 雑然とした、カオスなレイアウトを避ける
• 避ける: 純粋にミニマルで無機質な美学を避ける
• 避ける: ビジュアルサポートのない複雑な専門用語を避ける

10

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

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

11

System Prompt

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