Superpower
生物発光健康管理センター
Superpowerは、映画のような雰囲気のあるユーザーインターフェースで、臨床における確かな可能性を体現しています。暗いフルワイドの写真が、鮮明な白いコンテンツ画面へとシームレスに移行し、鮮やかな日の出のようなオレンジ色のアクセントがシステム全体に脈打っています。タイポグラフィはブランドを象徴するもので、最小限のネガティブスペースを持つ特徴的な幾何学的サンセリフ体を採用し、メタデータでは11px、ディスプレイでは66pxに拡大縮小され、行間はサイズが大きくなるにつれて圧縮されます（ディスプレイでは1.00、本文では1.40～1.50）。浮遊する暗いカプセル型のナビゲーションバーが画像の上に浮かび、カプセル型のコールトゥアクションが、臨床的な精密さと温かく活気に満ちたエネルギーとの間の緊張感を生み出しています。画面はほぼフラットで、システムは強い立体感ではなく、十分な余白、控えめな亜鉛色の仕切り、そして単一の控えめな影のパターンに依存しています。色は控えめに使用され、ほとんどすべてが黒、白、または亜鉛グレーで、オレンジはアクションやブランディングにおける機能的な句読点としてのみ登場します。
メイン画像は、深いターコイズブルーの空を背景に人物のシルエットが写った、画面いっぱいに広がる映画のような写真が中心となっています。この画像は、感情的な重みを生み出し、健康に関する約束とのコントラストを生み出すために、意図的に暗く、雰囲気のある仕上がりになっています。二次的な画像は、ライフスタイル写真ではなく、マーブル模様のオレンジ色の会員カードやアプリのスクリーンショットなど、細長くすっきりとした商品写真です。イラスト、3Dレンダリング、抽象的なグラフィックは一切使用されていません。写真のコントラストがビジュアルアイデンティティとなっています。会員カードには、サンライズトーンのオーガニックなマーブル模様/溶岩ランプがあしらわれており、これが唯一の装飾的なビジュアル要素です。アイコンは、7.5ピクセルの線半径（丸みを帯びた四角形）で、ブラックカーボンの繊細なストロークが施されています。
パレット
ブランド
- Sunrise Coral
#fc5f2b— オレンジ色は、装飾的なディテールや、時折現れる重要なポイントを強調するための補助的なアクセントカラーとして使用されます。行動喚起のメインカラーとして使用すべきではありません。 - Coral Glow
#ff8b64— グラデーションの終点とサンライズコーラルカラーを組み合わせた、会員カードの装飾デザイン。
中性
- Carbon Black
#18181b— メインテキスト、フローティングナビゲーションバーの塗りつぶし、見出し、アイコンのアウトライン。 - Pure Black
#000000— ロゴ、テキストサイン、コントラストの強いフレーム - Zinc Gray
#71717a— 本文、追加説明、非表示メタデータ、補助テキスト。 - Ash Gray
#a1a1aa— 三次テキスト、非アクティブな境界線、無効化された状態 - Mist Gray
#e4e4e7— 細い縁取り線、カードの輪郭線、区切り線、ボタンの枠。 - Fog Gray
#f4f4f5— 表面の微妙な凹凸、落ち着いた背景、メッシュベースに重ねられた画像。
タイポグラフィ
11～66ピクセル・8段階
- NB International Pro — 交換： Inter Tight · 概要 400, 700 · デザイン、見出し、本文、ユーザーインターフェース、ナビゲーションなど、すべてがシームレスに統合されています。特徴的なソリューションは、サイズに応じて調整可能な（-0.025emから小さな本文では66pxまで）極端に狭いネガティブスペースと、サイズが大きくなるにつれて圧縮される行間を組み合わせることで、見出しに一枚岩のようなポスターのような密度を与え、Superpowerを医療技術分野における軽量な競合他社から際立たせています。
- NB International Mono Pro — 交換： JetBrains Mono · 概要 400 · 表形式のメタデータ、マイクロテキスト注釈、技術ラベルは、臨床的／機器的なアプローチが必要な状況において、控えめに使用される。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 11px |
| ボタンの半径 | 9999px |
| カード半径 | 15px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 75px |
| ページ幅 | 1200px |
AI がSuperpowerスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Visitors — 白いエンジニアリング図面
- Dock — サンリットクリームペーパー、コバルトパルス
- Flying Papers — 土曜朝のアニメでの告白
- Quizlet — 教室は白い背景に様々な色で装飾されている。静かな机の後ろには、パステルカラーのカードが4枚飾られており、涼しげなグレーの壁とインディゴ色のマーカーで描かれた1つの印を背景に、唯一の明るいアクセントとなっている。
- ON.energy — 真夜中の鋼鉄に描かれた黄色の高電圧警告標識
- Navigate — ボードに貼られた大量のステッカー：大きなグロテスクなフォント、すべてタブレットの形をしており、5つの多色アイコンがロゴのように繰り返されている。
- Linear — ミッドナイト・プレシジョン・インスツルメント
- Pop Site — 簡素なタイポグラフィギャラリー――白い壁に巨大な黒い見出しが浮かび、そこに一つの青い点が意図を表している。
- Hyperstudio — デザインは黒曜石に刻まれている。文字と細い線が真っ黒な白い空間を縁取り、時折金色の羅針盤の印が道を示している。
- Pa'lais — まるで蜂蜜に浸したかのような、植物画のスケッチブック。クリーム色の紙、青いトワル・ド・ジュイの線画、そして温かみのある鮮やかな色彩が手作りのレシピブックを彷彿とさせ、大胆で凝縮されたフォントとたっぷりの余白が、モダンで洗練された印象を与えます。
- Raus — クリーム色の紙に書かれた、居心地の良い日記帳。どのページも森からの絵葉書のようだ。
- Privy — 大理石にインクで描かれた社説。白い大理石のキャンバスに、ぎっしりと詰め込まれた黒いセリフ体の見出し、上部を横切る一本の紫色のバナー――抑制された表現が権威を物語っている。