Huly
真夜中の天文台で見るオーロラ ― 主役は紫から珊瑚色へと変化する垂直の光線で、その下の静かな各セクションは、より落ち着いたトーンで語られる同じ2色の物語を借用している。
Hulyは、宇宙的なワークスペースの雰囲気を醸し出しています。ほぼ黒のキャンバスに、メイン要素を貫く紫がかった琥珀色の光が一つだけあり、その下には生産性を高めるためのより落ち着いたグリッドが配置されています。システムは狭い色域で動作し、明るい青と珊瑚の2色が、重ねられたグラファイトの表面に対してすべてのブランディング作業を担っているため、ダークモードは決してニュートラルな印象を与えません。機能的なすべての要素にはInter-styleのタイポグラフィが使用され、重要なポイントにはカスタムフォント（Esbuild）が使用され、ピッチは80～84px、文字間隔は大胆なネガティブスペースとなっています。コンポーネントはカプセル型で、コントロールには9999pxの半径、カードには12pxの半径、最小限の影、そして主な装飾として光るグラデーションラインが使用されています。ページは全ページの暗い領域と穏やかな明るい領域が交互に表示されるため、新しい画面では色を選択する前にモードを決定する必要があります。
全幅のホームページには、オーロラの縦長のビームと左揃えの見出し、右下隅に配置された製品のスクリーンショットが特徴的です。ホームページの下には、最大幅1200pxのコンテンツエリアがあり、濃淡のストライプが交互に配置されています。各セクションは単一の縦長ブロックで構成されており、見出しと、96px間隔で区切られた3列または4列のカードグリッドがあります。「MetaBrain」セクションでは、中央に配置された見出しと、さまざまなサイズのカード（大きなメインカードと小さな補助カード）のモザイクでグリッドが破られています。このページはSaaSの標準に従ってコンテンツが豊富ですが、濃淡のストライプを交互に使用することで、各セクションにゆとりを持たせています。ナビゲーションは、スクロールすると不透明になる単一の透明なトップバーです。
メイン要素は、写真を含まない純粋なオーロラのグラデーションです。すべてのイラストは、製品のUI（ダークモードのカンバン、受信トレイ、カレンダー）の実際のスクリーンショットで、証拠と装飾の両方の役割を果たすカードフレームに収められています。ライフスタイル写真、ストック画像、3Dレンダリングは一切使用していません。UIとは関係のない唯一の視覚要素は、オーロラの基部にある温かみのある放射状の太陽光線で、CSSグラデーションとしてレンダリングされています。アイコンは、#95979または白のモノクロの線アイコンで、マルチカラーは一切使用していません。このシステムは、独自のダークUIをメイン要素として扱い、製品そのものが写真であるかのように扱っています。
パレット
ブランド
- Electric Iris
#5683da— メインの背景、アクティブなナビゲーションインジケーター、そして印象的なオーロラのアクセント（漆黒の背景に鮮やかな紫青色）は、企業活動というよりも、むしろ人々の関心を引きつける印象を与える。 - Ember Pulse
#ff8964— 二次的なアクセント、温かみのあるオーロラゾーン、通知ポイント、そしてイラストのハイライトとして、青色の落ち着いた印象を打ち破り、光線に温かみを加える琥珀色の色合いが用いられています。
中性
- Obsidian Canvas
#303236— ページの背景、つまり主要な表面は、わずかに暖色系の色合いを帯びたほぼ黒色で、あらゆるコンテンツにとって標準的な環境となっている。 - Void
#090a0c— メイン画面のグラデーション、モーダル背景、キャンバスに溶け込むべきフレームに使用される、最も深い表面レイヤー。 - Charcoal Card
#111111— キャンバスより一段高い位置に配置された、段ボールとパネルで作られた隆起した表面。 - Slate Edge
#4a4b50— 暗い表面にさりげない境界線と仕切り線 - Iron Veil
#6b6c6d— タグ、リスト項目の塗りつぶし、および無効化された塗りつぶしの背景を暗くします。 - Smoke
#95979e— アイコンの輪郭、追加テキスト、および非アクティブなコントロールは、中程度のグレーで表示される主要な作業要素です。
タイポグラフィ
11～80ピクセル・8段階
- Inter — 交換： DM Sans · 概要 300, 400, 500, 600, 700 · ユーザーインターフェース内のすべての機能的なテキスト（本文、ナビゲーション、ボタン、リスト項目、ラベル、小さな見出しなど）は、強調表示には500～600、本文には400、そして目立たないメタデータには300のフォントウェイトが控えめに使用されています。
- Esbuild — 交換： Sora · 概要 400, 500, 600 · 表示専用：スプラッシュタイトル、セクション見出し、MetaBrain記事タイトル。84pxは、コンパクトな形状と狭い文字間隔のため、SaaSプロジェクトよりも編集作業に適しているという印象を与えます。28px未満は絶対に使用しないでください。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 広々とした |
| 基本的なステップ | 12px |
| ボタンの半径 | 9999px |
| カード半径 | 12px |
| 影 | 柔らかな影 |
| セクション間 | 96px |
| ページ幅 | 1200px |
AI がHulyスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- monday — パステルカラーのステッカーが貼られた白い工房
- Slack — 舞台はナス色で、白いスポットライトが照らされている。暗い部分は濃いプラム色で覆われ、オフホワイトのキャンバス地が、大きく前衛的なタイトルを際立たせている。
- Base44 — ライム色のマーカーで描いた、陽光あふれるノート
- Supahub — 紫色の尾根に降り注ぐ柔らかな日光。ほとんどが白く、軽やかなキャンバスに、一筋の明るい紫色の太陽が照らす。装飾的なグラデーションの球体が余白に色を滲ませ、ゆったりとした丸みを帯びた幾何学模様が、それぞれの表面に心地よい、触れることのできるような重厚感を与えている。
- Raycast — ミッドナイト・コマンドセンター、コーラルネオン
- Dimension — 夕暮れ時の光に照らされた、曇りガラスのパネルを備えたワークステーション
- Wiza — 夕暮れ時、薄紫色の霧に包まれた鉱物探査観測所。
- Paste — 白い大理石の上に置かれた琥珀色のランタン――ブランドの温かみのあるグラデーションロゴが、雪に覆われた建物の中で唯一明かりの灯った窓のように、広大な白い空間に浮かんでいる。
- Reworkd — 製品図の柔らかな昼光色だけが、それ自体で意味を成す色であり、アクションボタンとその上のグラデーションの見出しも同様です。
- Reflect Notes — 星空のような紫色の空間は、暗い天文台であり、そこでは音符が星座のように、ほぼ黒に近い藍色の虚無を背景に浮かんでいる。
- Ameba — 真夜中の管制室――曇りガラスのパネルの中に、鮮やかな青い光が脈打つ。
- Todoist — 日当たりの良い作業スペースには、紙の日記帳、温かみのあるクリーム色の机、インクのメモ、赤いペンが1本置かれている。