厳選・オープン・無料

Antoniouve

鮮やかなイエローの色調、大胆な黒いタイポグラフィ、そして散りばめられた魅力的な図形要素で定義された、遊び心あるイラスト＆アニメーションポートフォリオ。

01

デザイン DNA

ページから飛び出して踊りだしたスケッチブック。

02

カラー

最大のインパクトと遊び心あるエネルギーのために、高彩度の温かいイエロー背景と鋭い黒のタイポグラフィを使用。

03

タイポグラフィ

geometric-sans

• display123px · 500
• h134px · 400
• body26px · 400
• small9px · 400

すべてのテキストに幾何学サンセリフを使用 · ディスプレイテキストは tight な行間を維持

04

余白

主要なインタラクティブ要素に幅広いpaddingを持つ、柔軟なスペーシング。

05

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

1px solid black

06

レイアウト

散りばめられた absolute-positioned の図形要素を持つ、フルワイドのヒーローキャンバス。

07

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

浮遊要素のための滑らかな弾力のあるトランジション · transform と opacity のフェード

インタラクティブ要素の滑らかな transform とトランジション。 · 標準的なインタラクションフィードバック。

08

コンポーネント

• button 黒い境界線と24pxのpaddingを持つ、角丸のピル型ボタン。
• card 角丸のコンテナですが、主な視覚要素は散りばめられた浮遊要素です。
• hero 無地のイエロー背景に、抽象的なアニメーション Shapes と重なる、巨大な123pxのタイトル。

09

文体と禁止事項

• トーン 遊び心があり、カジュアルで、自信に満ちている。
• 見出し 大胆で、小文字または混合ケース、表現力豊か。
• CTA シンプルで、親しみやすく、角丸。

• ホワイト背景を使用しない — スクリーンショットでは、支配的なイエローが使われている
• セリフフォントを使用しない — スクリーンショットでは、幾何学サンセリフのテキストが使われている
• ミニマルにしない — スクリーンショットでは、散りばめられた多色の形状で埋められたキャンバスが示されている
• くすんだパステル色を使用しない — スクリーンショットでは、鮮やかなイエロー、オレンジ、ピンクのアクセントが使われている
• 鋭い角を使用しない — スクリーンショットでは、角丸やピル型の要素が示されている
• 厳格な配置を使用しない — スクリーンショットでは、散りばめられ、重なり合う図形要素が示されている
• 避ける: 企業的な言葉遣い
• 避ける: 厳格なグリッド
• 避ける: 地味な色

10

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

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

11

System Prompt

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