Authkit
真夜中の曇りガラスの大聖堂
AuthKitは、夜間の製品プレゼンテーションをイメージしたデザインを採用しています。ほぼ黒に近いキャンバスに、すりガラスのような表面、かろうじて見えるグリッド状の線、そしてガラス層によって照らされているように見える光るテキストが特徴です。フォントは暗い背景にほぼ完全に白で、唯一の機能要素として鮮やかな紫色のアクセントが一つだけ使われています。各インタラクティブな表面には、硬いフレームではなく、柔らかく細い青白いクールなラインが施されています。コンポーネントは半透明のレイヤー上に配置され、周囲の光の上に重ねられています。カードは紙のパネルではなく、下から照らされたガラス板のように見えます。間隔は広くリズミカルで、メイン要素はページ全体に広がる光るロゴで、従来の分割画面レイアウトではなく、浮遊するガラスカードに囲まれています。
全幅の暗いキャンバスに、中央にコンテンツコンテナを配置します。最大幅は 1200 ピクセルです。メイン要素は、中央に配置された単一の照明付きロゴ (グラデーション フォントの「AuthKit」) で、その下に小さな眉毛型のテキストがあります。その背後/下には、ログイン フォームが表示された 3 つのフローティング グラス カードが扇状に広がっています (左のカードは左に傾き、中央のカードは最大化され、右のカードは右に傾いています)。メイン要素の下には、ライト/ダーク テーマの切り替えボタンが中央に配置されています。フィーチャー行は、円形のアイコン間に細い接続線がある 6 つのアイコンの水平タイムラインです。セクションのリズム: 各セクションは、フェードアウトする水平線で囲まれた中央の眉毛型のテキストで始まり、続いて中央に配置された大きなタイトル (44-48 ピクセル)、続いて控えめな本文の 1 行 (16-18 ピクセル) が続きます。最大幅は約 640 ピクセルです。カスタマイズセクションには、ブラウザウィンドウのモックアップが表示されます。中央にはログインカードがあり、その周囲には、デザインツールのワークスペースのように、キャンバスの四隅にフローティングUIインスペクターパネル（カラーパレット、半径スライダー、ロゴアイコンセレクター、ボタンテキストフィールド、ページ背景フィールド）が配置されています。
ビジュアルデザインは、ログインフォームのモックアップが中心で、「ガラスの形態」スタイルで作成されています（メールアドレス/パスワード入力フィールド、ソーシャルメディアログインボタン、パスワードなしのコード入力）。これらは、真夜中のキャンバスに浮かぶ半透明のカードとして表示されます。機能アイコンは、丸いマットなタイルの中に#d1e4faのモノクロの線状グリフです。控えめなグリッド（rgba(186,215,247,0.06)の1pxの線）がページ全体を覆い、雰囲気を作り出しています。メイン要素の上部には、円錐形のグラデーションスポットライトが輝いています。写真も、ライフスタイル画像も、製品のスクリーンショットもありません。製品そのものがビジュアル要素です。ログインフィールドは、暗いスタジオでガラスのプロトタイプのように配置されています。
パレット
ブランド
- Void Violet
#663af3— コールトゥアクション（CTA）ボタンのメインカラーは、ログインフォーム内の「続行／送信」ボタン専用のアクセントカラーとして唯一使用されています。ほぼ黒の背景に鮮やかな紫色が映えることで、単色系の配色を損なうことなく、緊急性を感じさせます。
中性
- Midnight Canvas
#05060f— ページの背景、カードの最も深い表面、バッジの塗りつぶし――ほぼ黒に近いベースがあり、その上に他のすべてが浮かんでいる。 - Steel Plate
#2f343e— 隆起した表面、ファントム/セカンダリーアクションボタン、目立たないパネル背面。 - Fog Veil
#9da7ba— カードに書かれている本文は読めるものの、見出しに比べると背景に追いやられている。 - Moon Mist
#c7d3ea— 本文、追加ラベル、ミュートされた補助テキスト - Frost Glow
#d1e4fa— 本文とリンクのテキスト、アイコンのテキスト、アイコンの塗りつぶしに使用される主要な塗りつぶし色は、デフォルトの光る前景色です。 - Ice Highlight
#d8ecf8— 暗い背景に明るい文字、反転したラベル、高コントラストの見出しを使用してください。行動喚起のメインカラーとして使用しないでください。AuthKitのロゴと主要な見出しには、ライトブルーからソフトブルーへと上から下に向かって滑らかに変化するグラデーションが使用されています。
タイポグラフィ
12～48ピクセル・8段階
- Untitled Sans — 交換： Inter · 概要 400, 500, 600, 700 · 本文、ユーザーインターフェース、ボタン、入力フィールド、アイコン、小さな見出しなど、あらゆる機能的な要素に使える汎用フォント。
- aeonikPro — 交換： Space Grotesk · 概要 400, 500 · AuthKitのブランドロゴ、セクションの見出し、本文のみを表示する場合、44～48ピクセルの500ポイントのフォントを使用することで、ブランドロゴに派手なアクセントではなく、幅広く控えめな印象を与えることができます。
- dotDigital — 交換： JetBrains Mono · 概要 400 · すべて大文字のテキスト（「Introducing」、「Expandable Design」、「Shine Bright」） - 0.10em間隔の等幅フォントですべて大文字のテキストは、本文と見出しの間のさりげない区切りとして機能します。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 広々とした |
| 基本的なステップ | 16px |
| ボタンの半径 | 999px |
| カード半径 | 16px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 120px |
| ページ幅 | 1200px |
AI がAuthkitスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Resend — 紫のネオンカラーの黒いベルベット
- Gsap — デザインスタジオにある、アニメーションが描かれたホワイトボード。ほぼ黒に近い壁、温かみのあるクリーム色のチョーク、そして5色のカラーマーカー――それぞれアニメーションの各分野に対応する色だ。
- Slash — 金箔の帳簿が付いた真夜中の金庫
- Raycast — ミッドナイト・コマンドセンター、コーラルネオン
- Dimension — 夕暮れ時の光に照らされた、曇りガラスのパネルを備えたワークステーション
- Modal — 暗いサーバー室にある蛍光端末 ― 唯一の光源は鮮やかな緑色
- Reflect Notes — 星空のような紫色の空間は、暗い天文台であり、そこでは音符が星座のように、ほぼ黒に近い藍色の虚無を背景に浮かんでいる。
- LaunchDarkly — ネオンが輝く操縦室は、漆黒のパネルを通して紫色の信号が脈打つ、薄暗いコックピットだ。
- Ameba — 真夜中の管制室――曇りガラスのパネルの中に、鮮やかな青い光が脈打つ。
- AgentQL — 夜間、ターミナル上空に浮かぶオーロラ
- Neon — 夜のサーバー室。完全な暗闇の中、唯一の光源はデータとユーザーの操作だけだ。
- N8n — 真夜中のワークフローエンジン ― 暗いサーバー室に、ステータスインジケーターとデータストリームに照らされたリアルタイム自動化キャンバスが広がっている感覚