厳選・オープン・無料

Cydstumpel Nl

クリエイティブデベロッパーおよびスピーカーのための、大胆で表現力豊かなポートフォリオサイト。

01

デザイン DNA

クリエイティブデベロッパーのポートフォリオを、遊び心と大胆さで見せるショーケース。

02

カラー

暖かみのあるオフホワイトの背景に、大胆なブラックと高彩度のアクセントレッドを用い、コンテンツカードにはセカンダリパレットを配置。

03

タイポグラフィ

grotesque-sans · transitional-serif

• display80px · 400
• heading40px · 700
• body16px · 400

04

余白

4pxをベースとした一定のリズム、カードレイアウトには十分な余白を確保。

05

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

カードにはアクセントカラーのレッド、ブルー、ブラックを用いた、太く目立つ2pxの実線ボーダーを採用。

None: None · None: None

06

レイアウト

非対称なエディトリアルスタイルのレイアウトで、大きく重なり合うマーウィーと3列のカードグリッドを構成。

07

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

hoverおよびfocus状態での滑らかな遷移 · インタラクティブ要素のborder-radiusのモーフィング · 繊細なopacityのフェード

色やボーダーの遷移を伴う、繊細な状態変化。 · ボタンやリンクのアクティブ状態。

08

コンポーネント

• button 太字の大文字テキストボタン。特徴的なborder-radiusとhoverエフェクトを伴うことが多い。
• card 太くカラフルなボーダー、折り返しコーナーのディテール、ピル型タグを備えたカード。
• chip CSS、JS、ANIMATIONなどのタグに使用する、小さな丸みを帯びたピル。
• input 提供されたスクリーンショットでは明確に確認できない。
• hero テキストが重なり合う中央のイラストを伴う、巨大な水平スクロールマーウィー。

09

文体と禁止事項

• トーン 自信に満ち、遊び心があり、プロフェッショナル。
• 見出し 大胆で大文字、非常に表現力豊か。コンデンスサンセリフとイタリックセリフを併用。
• CTA 直接的、大文字、行動を促すスタイル。ボーダー付きコンテナ内に配置されることが多い。

• フラットで企業風のレイアウトは使用しない — スクリーンショットでは、巨大なマーウィーを伴う表現力豊かで重なり合うエディトリアルスタイルが示されている。
• 冷たく暗いカラーパレットは使用しない — スクリーンショットでは、大胆なレッドアクセントを伴う暖かみのあるオフホワイト背景が示されている。
• 標準的なシステムフォントは使用しない — スクリーンショットでは、大胆なコンデンスグロテスクとエレガントなトランジショナルセリフの組み合わせが示されている。
• 細く1pxのボーダーは使用しない — スクリーンショットでは、カードやコンテナに太く目立つ2pxの実線ボーダーが示されている。
• すべてに繊細で控えめな色を使用しない — スクリーンショットでは、高彩度のレッドが主要なアクセントカラーとして使用されている。
• 純粋なグリッドベースの対称的なレイアウトは使用しない — スクリーンショットでは、要素の重なり合う非対称な配置が示されている。
• 避ける: 受動的な言葉遣い
• 避ける: 一般的な企業用語
• 避ける: 過度にフォーマルなトーン

10

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

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

11

System Prompt

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