Flutterwave · デザイン DNA

Flutterwaveデザインチームのストーリー、雰囲気、ポートフォリオ作品を紹介する、温かみのあるエディトリアルショーケース。

デザイン DNA

企業のデザインチームのクリエイティブ成果を紹介する、洗練されたデジタルマガジン。

カラー

#171717Ink

#FFFFFFBG

#FCD2BABG quiet

rgba(23,23,23,0.2)Line

暖色系の中立的なベースに、鮮やかなダークテキストを組み合わせ、視覚的な興味をUIアクセントではなく、色鮮やかなイメージに依存します。

タイポグラフィ

表示テキストには、強い視覚的インパクトを出すため、ハイコントラストのトランジショナルセリフ（Millik）を使用します。 · 本文とUIテキストには、優れた可読性を実現する、クリーンなジオメトリックサンセリフ（Moderat）を使用します。 · 大きな表示テキストには、密なエディトリアル感を出すため、 tightなトラッキングの負の値（-0.8pxから-1px）を設定します。

余白

4px

8px

16px

24px

32px

48px

64px

96px

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

レイアウト

テキスト用の中央カラム、ビジュアルコンテンツ用の水平スクロールカルーセル

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

インタラクティブ要素上のポインターカーソル · ドラッグ可能なカルーセル用のgrabカーソル

コンポーネント

文体と禁止事項

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

Flutterwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

System Prompt

クリエイティブスタジオやデザインチーム向けの、フレンドリーなエディトリアルスタイルのウェブサイトをデザインしてください。レイアウトは厳選されたデジタルマガジンのように感じられ、鮮やかな白の背景と、セクションの区切りに二次的な暖かみのあるピーチ色（#FCD2BA）を使用します。表示ヘッドラインには太字のトランジショナルセリフ（Millikなど）を、本文テキストにはクリーンなジオメトリックサンセリフ（Moderatなど）を使用し、大きな文字には tightなネガティブ文字間隔を設定します。コアのインタラクションモデルは、ビジュアル作品を紹介する水平スクロールカルーセルを特徴とし、「grab」カーソルを使用します。厳密に避けるべきもの：重いシャドウ、密集した/息苦しいレイアウト、無機質な企業カラーパレット、UIを駆動するために単一のアクセントカラーのみを使用すること — 視覚的な興味はポートフォリオ作品の豊かで色鮮やかなイメージから生まれるべきです。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗