厳選・オープン・無料

Promlyapp

若者のつながりと活動を促進する、大胆な写真駆動のサイト。

01

デザイン DNA

若者のための活性化されたデジタルコミュニティセンター。

02

カラー

感情的なエンゲージメントのための鮮やかな紫のアクセントを持つ高コントラストのダークモード。

03

タイポグラフィ

humanist-sans · monospace

• display60px · 300
• h228px · 300
• body18px · 300

プライマリ見出しにはPoppins、本文にはAvenirを使用する。 · 可読性のために十分なline-heightを維持する。 · letter-spacingは厳密に制限する。

04

余白

大きなセクションと一貫したpaddingによって確立された垂直リズム。

05

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

薄い1px solid rgba(255, 255, 255, 0.5)

rgba(150, 163, 181, 0.08) 0px 4px 24px 0px · rgba(102, 77, 255, 0.2) 0px 4px 100px 0px

06

レイアウト

ヒーローセクションはテキストと画像グリッドを分割し、サブセクションはフル幅またはカードグリッドを使用。

07

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

ボタンとリンクのhover時に滑らかな遷移。

微妙な色の変化と不透明度の変更。 · 視覚的フィードバックを伴う即座の応答。

08

コンポーネント

• button 白文字のソリッド紫の角丸長方形。
• card 大きなborder-radiusを持つフォトカード。
• chip 小さなborder-radiusを持つバッジとタグ。
• input 微妙なボーダーを持つ標準フォーム。
• hero 大きなタイポグラフィとフォトコラージュを持つ分割レイアウト。

09

文体と禁止事項

• トーン エンパワリング、包括的、そして緊急性がある。
• 見出し 直接的でインスピレーショナル。
• CTA 明確な行動喚起。

• 明るいまたはパステルの背景を使用しない — スクリーンショットでは深い黒（#000000）の背景が示されている。
• 細く、コンデンスされたフォントを使用しない — スクリーンショットでは幾何学的なヒューマニストサンセリフ（Poppins/Avenir）が示されている。
• 画像に角張った角を使用しない — スクリーンショットでは角丸（最大20px）が示されている。
• 幅広いアクセントカラーを使用しない — スクリーンショットでは単一の主要な紫のアクセントが示されている。
• 小さく密なテキストを使用しない — スクリーンショットでは十分なline-heightを持つ大きく可読性の高いタイポグラフィが示されている。
• グリッド重視の硬いレイアウトを使用しない — スクリーンショットでは流動的で写真駆動のコラージュが示されている。
• 避ける: シニシズム
• 避ける: 複雑な専門用語
• 避ける: 受動態

10

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

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

11

System Prompt

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