厳選・オープン・無料

Joinlava

鮮やかなグラデーションと大胆なタイポグラフィを使用し、エネルギッシュで表現力豊かなアイデンティティを構築するソーシャルオーディオプラットフォームです。

01

デザイン DNA

真夜空に浮かぶ鮮やかなネオンライトショー。多様な声のエネルギーを表しています。

02

カラー

エネルギーとクリエイティビティを示すための、鮮やかなマルチカラーグラデーションを使用したダークモード基盤です。

03

タイポグラフィ

grotesque-sans · humanist-sans

• display53px · 900
• subtitle18px · 400
• body14px · 400
• label11px · 700

見出しには、太字ウェイト（900）とネガティブトラッキングを採用した、タイトなグロテスク・サンセリフを使用します。 · 本文には、14pxの高可読性を備えたヒューマニスト・サンセリフを使用します。 · アクセントラベルには、レインボーグラデーションで塗りつぶされた、幅広のトラッキングを持つ大文字スタイルを使用します。

04

余白

一貫した4pxグリッドと、ダークな背景上で要素に十分な息継ぎの場所を与える豊かな垂直パディング（例：約37px）です。

05

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

プライマリーボーダーは、淡い白やダークグレーの1pxソリッドで、グリッドエリアを分離するために使用されることが多いです。

None: None

06

レイアウト

ヒーロー向けの中央揃え単カラムレイアウトから、二カラムのフィーチャーレイアウトへと変化します。

07

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

インタラクティブ要素への微細なホバートランジション。 · トップボーダーなどの主要なアクセントエリアにおける、グラデーションアニメーションやグロー。

ボタンとインタラクティブ要素には、微細なカラーシフトやボーダーグローが設定される可能性があります。 · すべてのプライマリインタラクティブ要素には、標準のポインターカーソルを使用します。

08

コンポーネント

• button 黒背景に白文字、1pxのマルチカラーグラデーションボーダーを持つピル型ボタンです。
• card 15-20pxの角丸を持つカードで、画像やUIモックアップを含むことが多く、深いドロップシャドウが適用されることがあります。
• chip ダーク背景に明るい文字色の、小さく角丸のタグやラベルです。
• input ダーク背景と微細なボーダーを持つミニマリストな入力フィールドです。
• hero ダーク背景に大胆でオーバーサイズの白文字を配し、カラフルな浮遊要素でアクセントを加えた、大きな中央揃えセクションです。

09

文体と禁止事項

• トーン エネルギッシュで自信があり、コミュニティに焦点を当てています。
• 見出し 大胆で表現力豊か、かつ直接的です。しばしば大きく太字のタイポグラフィを使用します。
• CTA シンプルで行動を促すスタイルです（例：'Get The App'）。

• ホワイトバックグラウンドを使用しない — スクリーンショットでは深い黒（#010101）の背景が示されています。
• 見出しにセリフフォントを使用しない — スクリーンショットでは太字でタイトなグロテスク・サンセリフが示されています。
• ソリッドで単色のアクセントボタンを使用しない — スクリーンショットではマルチカラーグラデーションボーダーのボタンが示されています。
• 見出しに幅広でエアリーなトラッキングを使用しない — スクリーンショットではタイトでネガティブな文字間隔（-1px）が示されています。
• 本文テキストに繊細で細いウェイトを使用しない — スクリーンショットでは明瞭で読みやすいミディアムウェイトが示されています。
• ブランディングに単一の静的なカラーを使用しない — スクリーンショットでは主要な識別子として目立つマルチカラーグラデーションが示されています。
• 避ける: フォーマルまたは過度に企業的な言葉遣い。
• 避ける: 鮮やかさに欠ける、控えめまたはモノクロのカラーパレット。
• 避ける: 弱々しく感じる、細く壊れそうなタイポグラフィ。

10

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

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

11

System Prompt

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