厳選・オープン・無料
Promlyapp
若者のつながりと活動を促進する、大胆な写真駆動のサイト。
Non-profitYouthEmpowermentCleanPhotographic
01
デザイン DNA
エンパワーメント若者つながり安全チェンジメーカー
若者のための活性化されたデジタルコミュニティセンター。
02
カラー
#A957FEAccent
#FFFFFFInk
#FFFFFF99Ink soft
#000000BG
#040723BG soft
#333333Muted
rgba(255, 255, 255, 0.2)Line
感情的なエンゲージメントのための鮮やかな紫のアクセントを持つ高コントラストのダークモード。
03
タイポグラフィ
humanist-sans · monospace
- display
60px · 300 - h2
28px · 300 - body
18px · 300
プライマリ見出しにはPoppins、本文にはAvenirを使用する。 · 可読性のために十分なline-heightを維持する。 · letter-spacingは厳密に制限する。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
大きなセクションと一貫したpaddingによって確立された垂直リズム。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 20px
pill · 999px
薄い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
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
ヒーローセクションはテキストと画像グリッドを分割し、サブセクションはフル幅またはカードグリッドを使用。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
ボタンとリンクのhover時に滑らかな遷移。
微妙な色の変化と不透明度の変更。 · 視覚的フィードバックを伴う即座の応答。
08
コンポーネント
- button 白文字のソリッド紫の角丸長方形。
- card 大きなborder-radiusを持つフォトカード。
- chip 小さなborder-radiusを持つバッジとタグ。
- input 微妙なボーダーを持つ標準フォーム。
- hero 大きなタイポグラフィとフォトコラージュを持つ分割レイアウト。
09
文体と禁止事項
- トーン エンパワリング、包括的、そして緊急性がある。
- 見出し 直接的でインスピレーショナル。
- CTA 明確な行動喚起。
- 明るいまたはパステルの背景を使用しない — スクリーンショットでは深い黒(#000000)の背景が示されている。
- 細く、コンデンスされたフォントを使用しない — スクリーンショットでは幾何学的なヒューマニストサンセリフ(Poppins/Avenir)が示されている。
- 画像に角張った角を使用しない — スクリーンショットでは角丸(最大20px)が示されている。
- 幅広いアクセントカラーを使用しない — スクリーンショットでは単一の主要な紫のアクセントが示されている。
- 小さく密なテキストを使用しない — スクリーンショットでは十分なline-heightを持つ大きく可読性の高いタイポグラフィが示されている。
- グリッド重視の硬いレイアウトを使用しない — スクリーンショットでは流動的で写真駆動のコラージュが示されている。
- 避ける: シニシズム
- 避ける: 複雑な専門用語
- 避ける: 受動態
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Promlyは、若者のためのつながりを改革することに専念する非営利団体であり、大胆で高コントラストのダークモード美学を使用しています。パレットは、深い黒(#000000)と鮮やかな紫(#A957FE)のアクセントが主で、緊急性とエンパワーメントの感覚を生み出しています。タイポグラフィは、ヒューマニストサンセリフ(PoppinsとAvenir)を使用し、親しみやすさとプロフェッショナリズムのバランスを取っています。重要な制約:明るい背景や細くコンデンスされたフォントは決して使用しない。常に十分なspacingと画像の角丸(20px)を維持する。高品質な写真と直接的でインスピレーショナルなコピーに焦点を当てる。デザインが安全で歓迎的のように感じられるようにし、組織の使命を反映させる。
en · zh-CN · zh-TW · ja · ko