Monad
温熱羊皮紙に関する編集技術誌
Monadは、温かみのある羊皮紙のようなキャンバス（#f6f3f1）上にインターフェース全体を表示し、典型的な純白のSaaSテンプレートとは一線を画しています。見出しは編集的な重みがあり、Untitled Serifという400ウェイトのフォント（太字は使用しない）で設定されています。一方、本文、ナビゲーション、UI要素はすべてABC Diatype Monoで設定されており、まるで文芸誌向けに組版された技術マニュアルのような質感をサイトにもたらしています。鮮やかな青（Lake）が主要なアクションに唯一のアクセントカラーとして使用され、その他はすべて温かみのあるグレーのパレットで統一されているため、ペリウィンクル色のカード表面（#cfdaf5）と柔らかなパステル調のグラデーション（コーラル、スカイブルー、ミント、ゴールド）は、ノイズではなく意図的な句読点のように感じられます。コンポーネントは影ではなく、控えめな境界線とピル型の容器に依存しており、カードのようなインデントとセクション間の十分な垂直方向のスペースのおかげで、リズムは穏やかでゆったりとしています。
ビジュアル言語は、開発されたデータパイプライン図に基づいています。細い曲線で縁取られたピル型のノードがあり、各ノード内にはデータソース（あらゆるソース、クラウドログ、脆弱性）と宛先（SIEM、クラウドストレージ、データレイク）を表す小さなアイコンがあります。図の中央には、データ正規化を強調するために、柔らかな緑色の放射状の光が使用されています。メインコンテンツと機能コンテンツの背後には、強いぼかしフィルターを使用したグラデーションの雰囲気のある色調（コーラル→スカイブルー、スカイブルー→ミント）によって、柔らかな色のハローが生まれます。パートナーのロゴは1列に表示され、社会的影響を強調しています。「進行中のデータ変換」カードには、重なり合う半透明の幾何学的形状の大きなグラデーションのイラストが使用されています。写真は使用されていません。ブランドは、タイポグラフィ、図、配色のみで情報を伝達しています。
パレット
ブランド
- Parchment
#f6f3f1— ページキャンバスと表面の大部分を占めるこの温かみのあるクリーム色の色合いは、ブランドの象徴的な色であり、すべて白で統一されたSaaSテンプレートとは一線を画している。 - Lake Blue
#2b59d1— 紫色は、背景の強調、装飾的なストライプ、コンテンツのさりげないアクセントとして使用されます。行動喚起のメインカラーとして使用すべきではありません。
中性
- Off-Black
#242424— 明るい表面上の主要ボタンには、コントラストの高いニュートラルな塗りつぶしを使用します。 - Periwinkle Mist
#cfdaf5— 無効化されたコントロール、目立たないパネル、およびプレースホルダーブロックには、控えめなインターフェースが採用されています。 - Sky Blue
#a0b5eb— 装飾的なグラデーションストップ - 配管図の大気の塗りつぶしや流れ線に表示されますが、UIの塗りつぶしとして使用されることはありません。 - Mint
#a7fccd— メインカラーパレットとのコントラストが必要な場合に、小さな装飾アクセントとして使用できる補助的なカラーパレット。 - Coral
#ff9473— メインカラーパレットとのコントラストが必要な場合に、小さな装飾アクセントとして使用できる補助的なカラーパレット。 - Gold
#ecda98— 装飾的なグラデーションドットは、グラデーションの遷移における温かみのあるアクセントであり、機能的なユーザーインターフェースでは決して使用されません。
タイポグラフィ
12～80ピクセル・10段階
- ABC Diatype Mono — 交換： JetBrains Mono · 概要 400, 500 · メインテキスト、ナビゲーション、ボタン、アイコン、タグ、およびすべてのUIテキスト。すべての機能要素に等幅フォントを使用することで、インターフェースは技術マニュアルのような印象を与えます。16～20ピクセルのメインテキストは、マーケティング情報ではなくデータとして認識されます。ナビゲーションラベルとアイコンには、より正確な文字間隔の18ピクセルフォントを使用し、より小さなフォントとメタテキストには、すべて大文字の12ピクセルフォントを使用します。500ピクセルのフォントサイズは、目立つUI要素のために確保されています。
- Untitled Serif — 交換： Times New Roman · 概要 400 · 見出しと小見出しのみに使用。サイズは80px（本文）、48px（セクション）、40pxと32px（サブセクション）、24px（説明カードの見出し）です。フォントの太さは全サイズ共通で400に固定。セリフ体の自然なコントラストと-0.02emの文字間隔が、太字ではなく主役となる要素を際立たせます。これが編集スタイルです。見出しは、太字で主張するのではなく、洗練されたタイポグラフィでささやくように表現されます。
- Untitled Sans — 交換： Inter · 概要 400 · Untitled Sansフォント - 抽出されたデータには含まれているが、AIによって説明されていない。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 16px |
| ボタンの半径 | 100px |
| カード半径 | 40px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 64px |
| ページ幅 | 1432px |
AI がMonadスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Mollie — カシミヤのカウンター、濃い色の帳簿。黒いテキストの周りには編集デザインのための十分な余白を残し、温かみのあるクリーム色やエスプレッソブラウン、実際の支払い方法の触覚的な写真を使って、製品関連のポイントを強調する。
- Kagi — 独立した読書室。大胆な鉛筆の文字を中心に、広々とした白い空間を作り出し、さりげない紫のアクセントと温かみのあるパステルカラーの表面を用いることで、静寂に変化をつける。
- Milanote — Milanoteは、クリエイティブな活動に特化したスタジオです。フローティングビジュアルボード（ダークフレームの壁、白い表示スペース、柔らかな奥行き感のある実物のように見えるスクリーンショットなど）を使用して、エディトリアルギャラリースタイルのページを作成できます。
- Co2 — 冬の光の中で描かれた気候図。まるで航空写真のようなページ構成で、セリフ体の見出し、カテゴリ別にコード化されたデータ、そして氷に覆われた画像が、広い白い余白を際立たせます。
- GitButler — テキストの末尾にターコイズブルーを使用。コントラストの高いセリフ体の見出しに、繊細なテクニカルグリッド、温かみのあるグラファイト調の表面、そして控えめなターコイズブルーのアクセントを組み合わせたデザイン。
- ElevenLabs — 温かみのあるクリーム色を基調としたフォトエッセイに、さりげない見出しを添えた一冊。バウハウス風のノートは、卵の殻のような色の紙に黒インク、そして製品紹介のために紫とオレンジのアクセントを一つだけ配している。
- Awesomic — オレンジ色の句読点が紙吹雪を思わせる、編集用の亜鉛メッシュ。
- Dub — リンクのマットな和紙製コントロールパネル
- Seline Analytics — 温かい紙の上に静かに置かれた分析表
- Notion — 真昼の太陽の下、温かい紙のノート
- Anthropic — 温かみのある羊皮紙に印刷された科学分野の専門誌――落ち着いた象牙色の表面、セリフ体の編集見出し、そして行動が必要な時だけ現れる、たった一つの粘土色のアクセント。
- Calendly — 冷たい大理石に濃い青色のインク