厳選・オープン・無料
Sandlandsleep
柔らかなグラデーション背景と大胆なイエローのアクセントを使用し、ユーザーを睡眠の悩み調査へと導く、ミニマリストなウェルネスインターフェースです。
ConsumerPremiumCleanPlayfulProduct
01
デザイン DNA
睡眠ウェルネス割引快適さ
より良い睡眠への、落ち着いた高級なご招待
02
カラー
#fae467Accent
#000000Ink
#9c9c9cInk soft
#dce4efBG
#f2ede8Muted
rgba(0,0,0,1)Line
鮮やかなイエローのアクセントと、柔らかでクールなグラデーション背景の間のハイコントラストです。
03
タイポグラフィ
humanist-sans · sans-serif
- display
48px · 600 - subtitle
20px · 400 - body
14px · 400
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
リラックス感を出すための余裕あるスペーシングを備えた、標準的なbase-4の垂直リズム
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 10px
lg · 20px
pill · 999px
プライマリーアイコンコンテナと一部のUI要素に使用される、実線1pxの黒いボーダー
0 4px 12px rgba(0,0,0,0.1) · 0 4px 20px rgba(0,0,0,0.1)
06
レイアウト
400container
1columns
16pxgutter
768breakpoints
モバイルおよび集中型デスクトップオーバーレイ用の、中央揃い単一カラムスタック
07
モーションとインタラクション
125msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素上の滑らかなcolorおよびbox-shadowトランジション
ボタンのbackground-colorまたはbox-shadowの微細な変化 · background-colorの変化による即座の視覚フィードバック
08
コンポーネント
- button ハイコントラストのイエロー背景と濃いテキストを持つ、フル幅のピル形ボタン。
- card 該当なし
- chip 該当なし
- input 該当なし
- hero 大きなタイポグラフィとシンプルなイラストを持つ、中央揃いのプロモーションオーバーレイ。
09
文体と禁止事項
- トーン 遊び心があり、率直で、親しみやすい
- 見出し 会話調の、二人称の質問や陈述
- CTA ユーザーの選択のための、明確で行動を促すstatement
- 暗くモードな背景を使わない — スクリーンショットは明るく柔らかなブルーグラデーションです。
- 鋭角の矩形ボタンを使わない — スクリーンショットは完全に丸みのあるピル形ボタンです。
- 小さく詰まったレイアウトを使わない — スクリーンショットは縦に積み重ねられ、適切にスペーシングされたレイアウトです。
- 複雑なマルチカラムグリッドを使わない — スクリーンショットは単一の中央揃いカラムです。
- 低コントラストのボタンテキストを使わない — スクリーンショットは明るいイエロー背景の暗いテキストです。
- 繊細なパステルイエローのアクセントを使わない — スクリーンショットは鮮やかな高彩度のイエローです。
- 避ける: 臨床用語
- 避ける: 攻撃的なセールス言葉
- 避ける: 複雑な医療専門用語
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これは、睡眠の悩み調査を中心とした、ミニマリストで消費者焦点のウェルネスインターフェースです。デザインは柔らかくクールなグラデーション背景と鮮やかなイエローのピル形ボタンを使用し、フレンドリーで高級感のある印象を作り出しています。タイポグラフィはハイコントラストのhumanist-sans-serifです。主要な16進数カラーには、濃いインク(#000000)と鮮やかなアクセントイエロー(#fae467)が含まれます。レイアウトは中央揃いの単一カラムで、余裕のあるスペーシングです。重要な禁止事項:ボタンの角を鋭くしない、暗い背景を使ない、イエローボタン上に低コントラストのテキストを使わない。トーンは遊び心があり率直で、ユーザーのニーズに焦点を当てています。
en · zh-CN · zh-TW · ja · ko