厳選・オープン・無料

Valohealth

巨大なタイポグラフィとシアンアクセントを活用し、科学的権威とハイテクイノベーションを伝える、スターシュなプレミアムダークモードインターフェース。

01

デザイン DNA

科学工学会社のデジタルマニフェスト。

02

カラー

主要ブランドメッセージ用に、単一の高彩度シアンアクセントを加えた、ハイコントラストのモノクロダークモード。

03

タイポグラフィ

geometric-sans · monospace

• display88px · 300
• h156px · 300
• body-lg24px · 400
• body18px · 400
• caption14px · 400
• overline12px · 600

ディスプレイテキストには、優雅さを保つためにライト（300-400）ウェイトを使用する · カテゴリーラベルには、トラッキング（字間）を設定した大文字オーバーラインを使用する · すべてのテキストブロックは厳格に左揃えにする · ダーク背景での長文の可読性のために、大きなline-heightを設定する

04

余白

コンテンツの重みを強調するために、大きなpaddingブロック（例：40.5px）やセクション間のゆったりとした間隔で構成される、広々とした縦のリズム。

05

サーフェス (角丸 / 影 / 罫線)

極めて最小限。可視ボーダーよりも、カラーコントラストと間隔に依存する。アクティブ要素の繊細な1pxアンダーラインのみ。

rgba(0,0,0,0.3) 0px 32px 68px 0px

06

レイアウト

フルワイドのダークキャンバスに、巨大なタイポグラフィブロックを配置し、その後にクリーンな2x2の写真グリッドが続く。

07

モーションとインタラクション

hover時の滑らかなカラーとopacityのトランジション · インタラクティブ要素への微細なtransformシフト · 大きなコンテンツブロックへの拡張フェードイン

高速な150msのトランジションによる、微細なカラーの変化や背景opacityの変化。 · 微細なscaleの縮小やopacityの低減による、即座のフィードバック。

08

コンポーネント

• button 主にテキストベースのリンクで、ピル型（9999px radius）のhover状態や、微細な背景色の変化を伴う。
• card ダーク背景を分離に活用する、クリーンでボーダーレスの写真カード。
• chip 使用頻度は低い。主にテキストベースのナビゲーション要素。
• input 微細なボトムボーダーを持つ、ミニマリストなダークテーマの入力フィールド。
• hero ビューポート高さ全体にまたがる、タイポグラフィファーストの巨大なヒーローセクション。

09

文体と禁止事項

• トーン 権威があり、未来志向で、非常にプロフェッショナル。
• 見出し 「動詞 + 名詞」の構造を用いた、大胆で宣言的なフレーズでインパクトを伝える。
• CTA 直接的でアクション指向。 often 'APPROACH' のような全角大文字オーバーラインで始まる。

• 装飾的なボーダーやボックスシャドウを使用しない — スクリーンショットはボーダーレスのダークフラットサーフェスを示しています。
• 大胆なディスプレイウェイトを使用しない — スクリーンショットは大きなヘッダーにライト（300-400）ウェイトを使用しています。
• レイアウトを複数のアクセントカラーで雑然とさせない — スクリーンショットは単一のシアンアクセント（#1CB6E0）を示しています。
• 複雑な複数ステップのアニメーションを使用しない — スクリーンショットは高速で微細な150msのマイクロインタラクションを示しています。
• 長い段落に中央揃えテキストを使用しない — スクリーンショットは厳格に左揃えのタイポグラフィを示しています。
• 明るい、またはライトモードのテーマを使用しない — スクリーンショットは純黒（#000000）の背景を示しています。
• 避ける: 文脈のない専門用語の Medical buzzwords
• 避ける: 遊び心のある、またはカジュアルな言葉遣い
• 避ける: 雑然とした、または密度の高い情報レイアウト

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko