厳選・オープン・無料

Aura Bora

遊び心のある、イラストを多用した飲料ブランドで、大胆なアウトライン付きタイポグラフィと柔らかなパステルカラーを使用し、天然でゼロカロリーのスパークリングウォーターを表現しています。

01

デザイン DNA

自然なフレーバーについての、フレンドリーなイラスト入りの絵本。

02

カラー

柔らかくオーガニックなパステルカラーに、対照的な黒のアウトラインを配置することで、フレンドリーで親しみやすい美感を生み出します。

03

タイポグラフィ

grotesque-sans · monospace

• display120px · 800
• h180px · 800
• h232px · 800
• body17px · 400
• caption13px · 400

ラベルやナビゲーション要素には大文字を使用 · ディスプレイテキストには、非常に可変的な文字間隔を設定

04

余白

8pxをベースグリッドとし、ホワイトスペースを生み出すための広いpaddingを配置

05

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

1px solid black

6px 6px 0px rgba(0,0,0,1)

06

レイアウト

中心に配置されたヒーローで、左に大きなタイポグラフィ、右に製品ディスプレイを配置

07

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

スクロールマーキー · ボタンのホバースケーリング

スケールトランスフォームと背景色の変化 · 控えめなプレス効果

08

コンポーネント

• button 黒のアウトライン付き、丸みのあるピル形状で、透明またはソリッドの背景
• card 角丸で、太い黒のアウトラインを描き、しばしば幻想的なイラストを含む
• chip 黒い境界線を持つシンプルなテキスト
• input 黒い境界線を持つ角丸長方形フィールド
• hero 巨大なアウトライン付きタイポグラフィと製品イラストを含む分割レイアウト

09

文体と禁止事項

• トーン フレンドリーで、遊び心があり、親しみやすい
• 見出し 大胆で、非常に大きく、太いアウトライン付きの大文字
• CTA 明確でシンプルなコール・トゥ・アクション、ピル形状の境界線付き

• 複雑なグラデーションを使用しない — スクリーンショットではソリッドなパステル背景が表示される
• 細く繊細な線を使用しない — スクリーンショットでは everywhere に太い1pxの黒いアウトラインが表示される
• エレガントなセリフフォントを使用しない — スクリーンショットでは太く丸みのあるグロテスクとモノスペースが表示される
• ダークでムードの効いたカラーパレットを使用しない — スクリーンショットでは明るく軽やかなパステルが表示される
• 境界線のない角丸長方形を使用しない — スクリーンショットでは明確な黒いアウトラインが表示される
• 雑然としたレイアウトを使用しない — スクリーンショットでは広いホワイトスペースと焦点を絞ったセクションが表示される
• 避ける: 複雑な専門用語
• 避ける: 無機質な美感
• 避ける: 重い影

10

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

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

11

System Prompt

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