Auros
生物発光データボールを備えた深海端末
Aurosは、深淵に佇むフィンテック端末として機能します。ほぼ黒に近いターコイズブルーのキャンバスに、生物発光するデータオーブとターコイズからピンクへの光のグラデーションが、奥行き、流動性、流れを生み出します。インターフェースはミニマルで映画的であり、中程度の厚さの単一のユーザーディスプレイ（Matter）に依存し、過度にけばけばしくなくスケール感を出すために積極的なネガティブトラッキングを採用しています。色は均等に分布しており、無彩色の白とシルバーがほぼすべてのコンテンツに使用され、有色パレットは雰囲気のあるグラデーション、カード表面の区別、そしてターコイズブルーからラベンダーピンクに色が変わる単一の特徴的なピル型のボタンのために確保されています。カードは高さではなく、微妙なターコイズの表面の隆起（半径16ピクセル、影なし）の上に浮かんでいるため、階層は紙の影ではなく水の深さとして認識されます。コンポーネントは考え抜かれており、計器のように見えます。大文字のトラッキングマーク、細い幾何学的な矢印アイコン、淡いピンクの大きな数値表示。
最大幅1440pxのコンテンツを含む、暗い全幅キャンバス。メイン要素は、ビューポートの高さ全体に広がる中央のテキストブロック（見出し→サブテキスト→コールトゥアクション）で、背景要素としてパーティクルが使用されています。セクションは、68px以上の大きな垂直スペースで区切られた全幅のストリップで、キャンバスとわずかに凹んだ表面が交互に配置されています。「Explore」セクションでは、非対称の2列レイアウトが使用されています。左側の列には積み重ねられた機能カードがあり、右側の列には幾何学的な分子のイラストが表示されます。読みやすさを考慮して、コンテンツは端から端まで伸びるのではなく、狭い列（最大約600px）の中央に配置されています。フッターは、120pxの垂直マージンを持つ凹んだピット（#011d1c）で、深いプールのような効果を生み出しています。ナビゲーションは、16～24px間隔で要素が配置された薄い透明なパネルです。全体的なリズムは映画的で広がりがあり、どのセクションも息づいており、深く水のような色彩構成が、曲が進むにつれてより深く落ちていくような感覚を生み出す。
ビジュアルスタイルはミニマルで雰囲気のあるデザインです。ホームページには、3次元の粒子球が配置されています。何千もの小さなターコイズブルーと白のドットが回転する球体を形成し、キャンバスと縁に沿って配されたラベンダーピンクのアクセントが、情報オブジェクトを思わせる生物発光効果を生み出しています。右側のカラムには、フラットな幾何学的分子図（暗いキャンバス上に白い円と細い線で繋がったもの）が装飾要素として配置されています。写真もライフスタイル画像も人物も一切なく、視覚言語はクリーンなデータグラフィックと抽象的なフォルムに基づいています。粒子球はブランドアイデンティティを決定づける視覚要素であり、深海のメタファーを強調するために、重要なページには必ず一度は登場させる必要があります。
パレット
ブランド
- Liquid Abyss
#012624— メインの背景は、ページのベース、ヘッダー、主要要素、そして支配的な濃いターコイズブルーのフィールドです。深海のような雰囲気を醸し出しています。 - Liquid Deep
#011d1c— 凹んだ表面は、フッターの背景と、より厚みのある厚紙パネルで構成されています。キャンバスよりも半トーン暗い色調として認識され、微妙な下向きの奥行き感を生み出しています。 - Liquid Kelp
#003734— 隆起したカード表面とボタンの塗りつぶし ― 溝より一段高い位置に配置された隆起した表面。フィーチャーカード、コンテンツパネル、グラデーションボタンの開始点などに使用されます。
中性
- Liquid Mist
#edfffe— クールな白色が本文、セクション見出し、そして温かみのある淡いタイポグラフィを引き立てています。かすかな青みが本文をターコイズブルーの配色に調和させています。 - Platinum
#ffffff— 見出し、ナビゲーション要素、アイコンの輪郭、高コントラストのテキストには純白が使用されます。すべての見出しレベルと主要なナビゲーションにおいて、純白が主要なテキストカラーとなります。 - Silver Mist
#bbc7c6— 補助テキスト、控えめな説明文、リンクの色は元の状態のままです。わずかに緑がかった色合いで、ターコイズブルーの背景色を引き立てています。 - Ash
#f2f2f2— 引用文やレビュー用の追加テキスト。シルバーミストのターコイズブルーの色合いが明るすぎると感じる場合に最適な、ニュートラルでクールなグレーの色合いです。 - Slate Deep
#707777— 静止した背景や視認性の低い背景に適した、繊細な表面着色剤です。キャンバスと段ボールの間に挟み込むことで、ごくわずかな高さの違いを生み出します。 - Lavender Phosphor
#fde9ff— 大きな統計データ、カウンターの数値、重要な指標などを表示する際のバックライトの色。特徴的なグラデーションのピンク色は、暗い表面のアクセントとして控えめに使用されています。
タイポグラフィ
10～96ピクセル・6段階
- Matter — 交換： Inter · 概要 400, 500 · 見出しと本文のメインフォントは、見出し（H1～H3）と大きな動的なテキスト（86～295px）にはウェイト500で使用されています。本文とUIテキストにはウェイト400が使用されています。大きなサイズでは積極的な負の文字間隔（61pxで-0.04em、86pxで-0.046em）が、タイトルキャップでは広い正の文字間隔（20pxで0.08em、12pxで0.12em、10pxで0.15em）が特徴です。見出しには中程度のウェイトのみを使用するという戦略（太字や細字フォントを使用しない）は、フォントに均一で機械的な自信を与えています。
- Arial — 交換： system-ui · 概要 400 · インタラクティブなUI要素（ナビゲーション、ボタン、ヘッダーのマイクロコピー、フッター）の二次的なフォールバック。14pxでのみ表示され、Matterが読み込まれていない場合の安全で普遍的なフォールバックとして使用され、フォームラベル、ボタンのテキスト、および小さなヘルパーテキストをカバーします。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 20px |
| ボタンの半径 | 6px |
| カード半径 | 16px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 68px |
| ページ幅 | 1440px |
AI がAurosスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Design Full-Time — 温かみのあるスポットライトが1つあるスタジオシネマ
- Air — 彫刻作品「ガラス越しの真夜中の空」
- Slash — 金箔の帳簿が付いた真夜中の金庫
- Raycast — ミッドナイト・コマンドセンター、コーラルネオン
- Dimension — 夕暮れ時の光に照らされた、曇りガラスのパネルを備えたワークステーション
- Modal — 暗いサーバー室にある蛍光端末 ― 唯一の光源は鮮やかな緑色
- Giga — 霜の降りた黒曜石の上に広がる真夜中の地平線
- Reflect Notes — 星空のような紫色の空間は、暗い天文台であり、そこでは音符が星座のように、ほぼ黒に近い藍色の虚無を背景に浮かんでいる。
- Ameba — 真夜中の管制室――曇りガラスのパネルの中に、鮮やかな青い光が脈打つ。
- AgentQL — 夜間、ターミナル上空に浮かぶオーロラ
- Frame — 深夜映画上映のための映画館。暗い室内では、たった一つの青いスポットライトがすべての役割を果たし、ユーザーインターフェースは背景に溶け込み、創造的なコンテンツが前面に投影される。
- Harness — 真夜中の管制室、燐光を放つ緑色のアクセント