厳選・オープン・無料

Sandlandsleep

柔らかなグラデーション背景と大胆なイエローのアクセントを使用し、ユーザーを睡眠の悩み調査へと導く、ミニマリストなウェルネスインターフェースです。

01

デザイン DNA

より良い睡眠への、落ち着いた高級なご招待

02

カラー

鮮やかなイエローのアクセントと、柔らかでクールなグラデーション背景の間のハイコントラストです。

03

タイポグラフィ

humanist-sans · sans-serif

• display48px · 600
• subtitle20px · 400
• body14px · 400

04

余白

リラックス感を出すための余裕あるスペーシングを備えた、標準的なbase-4の垂直リズム

05

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

プライマリーアイコンコンテナと一部のUI要素に使用される、実線1pxの黒いボーダー

0 4px 12px rgba(0,0,0,0.1) · 0 4px 20px rgba(0,0,0,0.1)

06

レイアウト

モバイルおよび集中型デスクトップオーバーレイ用の、中央揃い単一カラムスタック

07

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

インタラクティブ要素上の滑らかなcolorおよびbox-shadowトランジション

ボタンのbackground-colorまたはbox-shadowの微細な変化 · background-colorの変化による即座の視覚フィードバック

08

コンポーネント

• button ハイコントラストのイエロー背景と濃いテキストを持つ、フル幅のピル形ボタン。
• card 該当なし
• chip 該当なし
• input 該当なし
• hero 大きなタイポグラフィとシンプルなイラストを持つ、中央揃いのプロモーションオーバーレイ。

09

文体と禁止事項

• トーン 遊び心があり、率直で、親しみやすい
• 見出し 会話調の、二人称の質問や陈述
• CTA ユーザーの選択のための、明確で行動を促すstatement

• 暗くモードな背景を使わない — スクリーンショットは明るく柔らかなブルーグラデーションです。
• 鋭角の矩形ボタンを使わない — スクリーンショットは完全に丸みのあるピル形ボタンです。
• 小さく詰まったレイアウトを使わない — スクリーンショットは縦に積み重ねられ、適切にスペーシングされたレイアウトです。
• 複雑なマルチカラムグリッドを使わない — スクリーンショットは単一の中央揃いカラムです。
• 低コントラストのボタンテキストを使わない — スクリーンショットは明るいイエロー背景の暗いテキストです。
• 繊細なパステルイエローのアクセントを使わない — スクリーンショットは鮮やかな高彩度のイエローです。
• 避ける: 臨床用語
• 避ける: 攻撃的なセールス言葉
• 避ける: 複雑な医療専門用語

10

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

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

11

System Prompt

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