厳選・オープン・無料

Oatly

Oatlyは、限られたパレットと表現力豊かなタイポグラフィを用いた遊び心のあるスケッチ風の美学で、個性的で透明性のあるブランド个性を伝えています。

01

デザイン DNA

ナプキンの落書きのような、反抗的でスケッチ風のブランド。

02

カラー

最小限の機能的グリッドを備えた、対比の強い白黒。

03

タイポグラフィ

transitional-serif · sans-serif · monospaced

• display32px · 400
• body16px · 400

主要な見出しにはトランジショナルセリフ体を使用。 · 本文にはサンセリフ体を使用。 · ラベルやUI要素にはモノスペースフォントを使用。

04

余白

4pxを基本とし、適度な余白を確保した一貫したリズム。

05

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

1px solid black

2px 2px 0px 0px rgb(0, 0, 0)

06

レイアウト

中央揃えと散らばった要素を組み合わせた、グリッドベースのレイアウト。

07

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

0.3sのtranslateトランジションを用いたhover状態。

要素がhover時にわずかにシフトする。 · N/A

08

コンポーネント

• button シンプルでアウトライン付き、2pxの黒いドロップシャドウ。
• card 1pxの黒いボーダーと2pxの黒いドロップシャドウを持つ白い背景。
• chip N/A
• input N/A
• hero インタラクティブに見える要素を散りばめた、中央揃えのヘッドライン。

09

文体と禁止事項

• トーン 遊び心があり、直接的で、少し軽んじた態度。
• 見出し 会話的で、しばしばユーモアを含む。
• CTA シンプルで行動を促すもの。

• 複雑なカラーパレットを使わない — スクリーンショットは厳格な白黒スキームを示しています。
• 装飾的なセリフフォントを使わない — スクリーンショットはクリーンなサンセリフと1つのトランジショナルセリフの組み合わせを示しています。
• UI要素に角丸を使わない — スクリーンショットは鋭い四角いエッジを示しています。
• 微細なシャドウを使わない — スクリーンショットは大胆で硬いエッジの2px黒いドロップシャドウを示しています。
• 雑然とした背景を使わない — スクリーンショットは白/オフホワイトの背景にクリーンで最小限のグリッドを示しています。
• 複雑なアイコンを使わない — スクリーンショットはシンプルな、手描き風またはフラットSVGスタイルのアイコンを使用しています。
• 避ける: 企業スラング
• 避ける: 過度に-formalな言葉遣い
• 避ける: 雑然としたレイアウト

10

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

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

11

System Prompt

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