Caldera
温かい石灰岩の上で鍛造する炎。キャンバスは生の温かい漆喰で、オレンジ色の各要素は、表面に押し込まれたくすぶる燃えさしのように見える。
Calderaは、溶けたオレンジ色に染まった温かみのある石灰岩のキャンバスの上で動作します。インターフェースはフラットで影がなく、建築的なスケールに近い超太字の凝縮された文字（最大189ピクセル）が構造全体の負荷を担います。単色の温かみのあるグレーの背景に対して、鮮やかなオレンジ（#fc5000）が唯一の力強い色彩アクセントとして機能し、プラズマパープルはメインのハーフトーン画像に、硫黄色はタグに使用されています。視覚言語は火山的です。凝縮された太字の文字、ハーフトーンのドットパターン、カードとボタンの40ピクセルの半径、800ピクセルのピル型のコントロールなど、温かさが柔らかい紙のような表面に包まれています。
ビジュアルパレットはミニマルで考え抜かれたデザインです。メインウィンドウには写真の代わりに抽象的なハーフトーンのドットパターン（紫からオレンジへのグラデーションにオレンジ色のドット）が使われており、装飾ではなくブランドの芸術的な表現として機能しています。製品情報や告知を掲載したカードには、画像塗りつぶしとしてソリッドなEmberブロックまたはハーフトーンのPlasma Violetが使用され、統一されたグラフィックシステムが実現されています。パートナー/統合ロゴは、明るい背景にモノクロのアイコンとして表示されます。写真、3Dレンダリング、ライフスタイル画像は一切使用されていません。アイコンは小さく、モノクロでミニマルなデザインです。Discord、X、 Telegramナビゲーションにシンプルなグリフとして配置されています。ビジュアル言語は写真ではなく、グラフィックと編集的な要素が強く、ストック画像というよりはポスターデザインに近い印象を与えます。
パレット
ブランド
- Ember
#fc5000— 主要なアクションボタン、ステータスカード、および重要な視覚的アクセントのみが、目立つ色のアクセントとして使用されています。温かみのあるグレーの色調とのコントラストにより、追加の装飾要素を必要とせずに、緊迫感を生み出しています。 - Plasma Violet
#524ae9— メインのハーフトーングラデーションベース、追加のカード表面1枚 - メインのドットパターンと専用カード1枚にほぼ exclusively 使用され、コントロールには決して使用されません。
中性
- Sulfur
#f5f28e— タグやカテゴリのアイコン、小さなハイライトの背景色は、ブログ記事のカテゴリやプログラムのお知らせを示すために使用される淡い黄色です。 - Limestone
#f7f6f2— カードの表面、コンテンツブロックの背景、および追加のボタンの塗りつぶしには、ページキャンバス上で要素が際立つように、明るく温かみのある白色が使用されています。 - Pumice
#e2e2df— ページ全体の背景は、各セクションの土台となる温かみのあるミディアムグレーです。カードストックの表面よりもわずかに暗い色調になっているため、影を作らずに人物と背景をさりげなく区別することができます。 - Obsidian
#070607— 本文、見出し、リンクテキスト、ボタンの枠はほぼ黒色で、キャンバスの暖色系の色合いに合うように、わずかに温かみのある色合いが加えられています。 - Chalk
#ffffff— 暗い部分内のテキスト、暗い背景上の入力テキスト、高コントラストのオーバーレイなど、暗い表面とのコントラストを最大限に高める必要がある場合にのみ、純白が使用されます。
タイポグラフィ
12～189ピクセル・10ステップ
- PP Neue Corp Compact — 交換： Bebas Neue · 概要 400 (Ultrabold cut) · すべての見出しと本文。カスタムデザインされた、凝縮された極太フォントが、見出しに工業的な看板のような重厚感を与えています。メインブロックの189pxサイズは、ブランドのシグネチャースタイルである、凝縮された、タイポグラフィというよりは構造的なスタイルを反映しています。「ss06」と「ss10」の設定を有効にすると、代替の文字形状と間隔が有効になり、より力強く凝縮されたリズムが生まれます。プラスの文字間隔（+0.02em）はディスプレイサイズでは珍しく、80～189pxのサイズでテキストが窮屈に感じるのを防ぎます。
- DM Sans — 交換： Inter · 概要 500 (Medium only — never Regular or Bold) · 本文、ナビゲーションリンク、ボタンラベル、および副見出しは最大30ピクセルです。フォントの太さは意図的に中程度に設定しました。レギュラーでは極太の見出しフォントに対して細すぎに見え、ボールドでは太字と競合してしまうためです。DM Sansは、工業的な見出しフォントとは対照的に、人間味のある、やや幾何学的な印象を与えます。
- System sans-serif — 交換： Inter · 概要 400 · キャプション、メタテキスト、日付、マイクロタグ。12pxサイズでのみ使用されます。12pxサイズでは、重量やブランド認知度よりもサイズ削減が重要視されます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 16px |
| ボタンの半径 | 40px |
| カード半径 | 40px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 80px |
| ページ幅 | 1280px |
AI がCalderaスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- teenage engineering — スタジオ照明の工業カタログでは、製品がページ上で唯一の重要な対象物であり、その他すべてはその製品を中心に説明されている。
- basement — 午前3時のがらんとした印刷機――真っ暗な画面に巨大で圧縮されたフォントが広がり、ナビゲーションバーにオレンジ色の光がかすかに灯るだけ。それ以外はすべて白か、幽霊のような灰色だ。
- amra — 白い背景に虹色に輝く球体――ほぼ完全に無彩色なページの中で、ラベンダー色のアクセントだけが唯一の色のアクセントとなっており、この単一のグラデーション球体が、通常メインのイラストが担う役割を果たしている。
- Stink Studios — 真夜中の映画スタジオ――映写機が唸りを上げ、部屋は暗く、フィルムだけが照らされている。
- Andrei Rybin — モノクロスケッチブックとは、スマートフォンの画面をコンタクトシートのように白い壁に貼り付けた、デザイナーズノートのことである。
- Uniswap Cup — eスポーツ大会の放送は模擬会場で行われる。ピンク色のマーカーで白い正方形と細い線で構成されたグリッドが描かれている。
- Freytag Anderson — 映画の幕が上がると、たった一言が表示される。巨大な動画がスクリーン全体を占め、ブランド名がタイトルのように隅に表示され、それ以外に気を散らすものは何もない。
- Integrated Biosciences — 真夜中の生物発光実験室
- Vercel — 白い紙に印刷された端末
- Mintlify — ガラスのテーブルの上に広がる雲の庭園。手描きの空とドキュメンタリー映像が共に額装されている――ページが修道院のような白へと消えていく前に、色彩とコンセプトがぶつかり合う唯一の場所だ。
- Gleap — 温かみのあるクリーム色を基調に、グラファイトのアクセントを効かせたワークスペース。マットブラックのインクのドットが、リネンの建築の上に浮かんでいるように見えるスタジオ。
- ClickUp — 白い大理石を背景にした、力強いダッシュボード。このページは生産性向上ツールの製品パンフレットなので、視覚的な表現は製品そのものから借用されている。例えば、密度の高いリスト、ステータスインジケーター、アバターのグループ、そしてまるで製品仕様書を展示しているかのような大胆なタイポグラフィなどだ。