温かなクリーム色の紙面が Oura の既定の世界です。背景は純白ではなく #f7f1e8 のクリームで編集ページとマーケティングページを満たし、深い黒はニュースバンドとフッターだけに残します。Editorial New はウェイト 100〜300 の細いセリフで大きな見出しを担い、AkkuratLL が本文と UI ラベルを引き受けて、セリフの抒情とサンセリフの事実性という二重の声をつくります。マスタード、テラコッタ、オリーブはバンド、イラスト、データビジュアライゼーションにだけ現れ、唯一のアクションブルー #2a72de はコンバージョンボタンに厳しく限定され、完全な丸型のピル、24px のコンテンツカード、40px の製品画像が、柔らかく抑制の効いたリズムを保ちます。
Ouraメディアと消費
プロンプトテンプレート
基本テンプレート
Design an Oura-inspired interface. - Warm-paper canvas (#f7f1e8) as the default surface, cream rather than white, for editorial and marketing sections; - Editorial New thin serif (weights 100-300) for oversized headlines paired with AkkuratLL grotesque for body and UI; - A single action blue (#2a72de) reserved strictly for conversion pills, while earth tones such as gold #af751b, clay #6b443d, and olive #849671 live only in bands, illustration, and data viz; - Fully rounded pill buttons against 24px content cards and 40px product-image frames; - Three surface worlds in rhythm: cream editorial, near-black (#19191c) news and footer band, cool silver (#ececec) product stage. Colors: #f7f1e8, #2a72de, #4a4741, #af751b, #849671, #19191c with #2a72de accent. Typography: Editorial New and AkkuratLL.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Oura aesthetics. Use Oura color identity with #2a72de accents. Cream surfaces, serif headlines, and full-round health stats.
💻 Web
Design a web application with Oura style. Use Oura color identity with #2a72de accents. Warm paper canvas, editorial type, and calm section pacing.
📊 ダッシュボード
Design a dashboard with Oura design language. Use Oura color identity with #2a72de accents. Sleep scores, circular stats, and earth-tone data visualization.
📄 ランディングページ
Design a landing page with Oura visual identity. Use Oura color identity with #2a72de accents. Full-bleed lifestyle photography, thin serif display, and one blue CTA.
使用例
Oura 睡眠インサイトダッシュボード
ダッシュボードCreate a sleep insights dashboard in Oura's style: #f7f1e8 cream canvas, Editorial New headline, AkkuratLL labels, and one #2a72de action.
Oura Ring 製品ページ
ランディングページBuild an Oura Ring landing page with a silver product stage, 40px image frames, circular score badges, and an earth-tone accent band.
✅ 適した用途
- 健康・ウェアラブルデバイス
- 睡眠と活動データのダッシュボード
- ハイエンド健康ブランドの編集ページ
❌ 適さない用途
- 冷徹な産業用コントロールルーム
- 高彩度のゲーミング UI
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。