厳選・オープン・無料

Ouraring

洗練された控えめな美学を持つ、健康トラッキング用のプレミアムスマートリング。

01

デザイン DNA

日常生活に自然と溶け込む、ラグジュアリーな健康デバイス。

02

カラー

インタラクティブ要素には臨床的なブルーアクセントを一つ用いる、温かみのある自然なニュートラルカラー。

03

タイポグラフィ

transitional-serif · humanist-sans

• display80px · 400
• heading40px · 400
• body16px · 400

04

余白

プレミアム感を演出するための豊かな垂直方向の余白を備えた、標準4pxベースグリッド。

05

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

プライマリ区切り線として、1px solid #ECECEC

0 1px 0 rgba(255, 255, 255, 0.06) inset

06

レイアウト

豊かな余白と、時折サイドバイサイドで配置されるモーダルを備えた、センタリングされた単一カラムコンテンツ。

07

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

状態変化時の滑らかなフェードトランジション · ホバー時の微細な色と透明度の変化

0.15秒にわたる滑らかな色と透明度のトランジション · 微妙なフィードバックを伴う、即座の状態変化

08

コンポーネント

• button ピル型、ダークな背景に白文字またはブルーの背景。
• card 控えめなボーダー、または目に見えるカード自体を持たず、写真に依存したクリーンなデザイン。
• input ライトなボーダーを持つ、角丸ピル型の入力フィールド。
• hero シネマティックな製品写真と、大きなタイポグラフィの見出し。

09

文体と禁止事項

• トーン 自信に満ち、エレガントで、率直。
• 見出し 小文字または文頭大文字を使用した、短くインパクトのあるフレーズ。
• CTA 「探索する」や「続ける」のような、シンプルで行動を促す動詞。

• 明るいネオン色や攻撃的なアクセントカラーを使用しない — スクリーンショットでは、暖色系ニュートラルに対して一つの控えめなブルーアクセント（#2A72DE）が使われています。
• プライマリボタンにシャープな直角コーナーを使用しない — スクリーンショットでは、完全に丸みを帯びたピル型ボタン（border-radius: 9999px）が使われています。
• 見出しに太くモダンなサンセリフフォントを使用しない — スクリーンショットでは、ディスプレイテキストに洗練されたセリフフォント（Editorial New）が使われています。
• 複数の競合するビジュアル要素でインターフェースを過密にしない — スクリーンショットでは、豊かな余白と最小限のUIクロームが使われています。
• デフォルトとして stark な純黒の背景を使用しない — スクリーンショットでは、暖色系のオフホワイト背景（#F7F1E8）またはダークグレー（#4A4741）が使われています。
• 小さく窮屈なタイポグラフィや狭い行間を使用しない — スクリーンショットでは、豊かな間隔を持つ大きく読みやすいタイポが使われています。
• 避ける: 攻撃的なセールス言語
• 避ける: 専門用語の多い技術仕様
• 避ける: ごちゃごちゃしたビジュアルレイアウト
• 避ける: 派手で彩度の高いカラースキーム

10

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

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

11

System Prompt

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