厳選・オープン・無料

Luma

ソーシャルイベントを作成、主催、発見するためのモダンプラットフォーム。

01

デザイン DNA

現代のソーシャルギャザリングための洗練されたデジタル招待状

02

カラー

遊び心のある3Dイメージとビビッドなピンクアクセントが際立つ、明るいニュートラルキャンバス。

03

タイポグラフィ

system-ui

• display64px · 600
• body-lg20px · 400
• body16px · 400
• caption14px · 400

ディスプレイサイズでは tighten negative letter spacing（ Tightな负の字間隔を適用） · 最適なパフォーマンスのためシステムフォントスタックを使用 · ディスプレイ見出しのフォントウェイトは600、本文は400

04

余白

一貫した4pxベースグリッドを採用し、余裕のあるスペースでオープンで軽やかなレイアウトを実現。

05

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

rgba(19, 21, 23, 0.1)を使用した繊細な1px solidボーダーライン

0 2px 8px rgba(0,0,0,0.04)

06

レイアウト

テキストを左、大きな3Dイラストを右に配置した2カラムヒーローレイアウト。

07

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

hover・focus状態への0.3秒のスムーズなトランジション · 順番に表示される要素のためのカスケードアニメーション

0.3秒のトランジションで背景色または不透明度を微妙に変化。 · 微小なスケールや不透明度の変化で即座にフィードバック。

08

コンポーネント

• button ハイコントラストなピル型CTA（ダークグレー背景、ホワイトテキスト）。繊細なhoverトランジション付き。
• card 柔らかな角丸のコンテナ。繊細なボーダーまたはシャドウ。
• chip セカンダリ情報用の小さなピル型バッジ。
• input クリーンで角丸の入力フィールド。繊細なボーダー。
• hero 太字のヘッドラインと大きな円形の3Dイラストを特徴とした分割レイアウト。

09

文体と禁止事項

• トーン 歓迎的で、励ますような、かつ手軽な印象。
• 見出し 中立的でビビッドな色を組み合わせた、短く印象的なフレーズ。
• CTA 「最初のイベントを作成」のように、直接的で行動を促す表現。

• ヒーローにダーク背景を使用しない — スクリーンショットでは明るく軽やかな背景が使われています。
• 見出しにセリフフォントを使用しない — スクリーンショットではクリーンで幾何学的なサンセリフスタックが使われています。
• すべての要素に鋭い90度の角を使用しない — スクリーンショットでは8px、15px、およびピル形状が混在しています。
• 無彩色またはモノクロームのカラーパレットを使用しない — スクリーンショットではビビッドなピンクアクセントと3Dカラーアイルストレーションが特徴です。
• ヒーロー画像に標準的な長方形レイアウトを使用しない — スクリーンショットでは大きな円形の3Dコンポジションが使われています。
• 複雑なナビゲーションバーを使用しない — スクリーンショットではミニマルでクリーンな右上ナビゲーションが使われています。
• 避ける: 過度にフォーマルな、または企業的な言葉遣い
• 避ける: 分量の多いテキストブロック
• 避ける: 複雑な専門用語

10

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

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

11

System Prompt

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