厳選・オープン・無料

Co Projects

巨大な幾何学形状が支配する、ミニマリストでハイコントラストなポートフォリオサイト。

01

デザイン DNA

引き算された建築モデル、あるいは大胆なグラフィックプリント。

02

カラー

厳格な2色パレット：純黒(#000000)を純白(#FFFFFF)の上に配置。

03

タイポグラフィ

geometric-sans · monospace

• display60px · 400
• body16px · 400

プライマリ表示および本文には「Alpha」フォントファミリーを使用 · モノスペース要素には「Takt」フォントファミリーを使用 · すべてのテキスト要素で一貫したfont-weight 400を維持

04

余白

主要要素間の大きな垂直方向のギャップを含む、豊かな余白

05

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

細い1pxの境界線（rgb(229, 231, 235)）による微妙な区切り

06

レイアウト

左右に巨大な幾何学形状を配置した非対称な分割レイアウト。トップには最小限のナビゲーション

07

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

すべてのプロパティにトランジションを適用（transition: all） · 要素の可視性と位置の変化に焦点を当てた簡素化されたモーション

インタラクティブ要素でカーソルがpointerに変化 · 標準的なクリック動作。トランジションアニメーション付き

08

コンポーネント

• button テキストのみのナビゲーションリンク。カーソルはpointer
• card 従来のカードなし。コンテンツは大きな幾何学的な構図として提示
• chip 可见设计中には存在しません
• input 可见设计中には存在しません
• hero 最小限のテキストを伴う、支配的な幾何学円／半円の構図

09

文体と禁止事項

• トーン ミニマリストで、直接的、建築的
• 見出し 大きな幾何学形状がビジュアル見出しとして機能
• CTA 目立つボタンではなく、控えめなテキストリンク

• 角丸を追加しない — スクリーンショットではすべての形状が鋭い幾何学的エッジであることを示している
• 色の変化を導入しない — スクリーンショットでは厳密に黒(#000000)と白(#FFFFFF)のみを使用
• 複数のfont-weightを使用しない — スクリーンショットでは一貫してweight 400を使用
• ドロップシャドウを追加しない — スクリーンショットでは深度効果のないフラットな2D構図を使用
• 複雑なナビゲーションメニューを作成しない — スクリーンショットではトップに最小限のテキストリンクのみ
• 装飾的なイラストを追加しない — スクリーンショットでは抽象的な幾何学フォームのみを使用
• グラデーション背景を使用しない — スクリーンショットでは実色の白(#FFFFFF)背景を使用
• 避ける: 装飾的な要素やイラスト
• 避ける: グラデーションや色の変化
• 避ける: 複雑なナビゲーションパターン
• 避ける: テキストが多すぎる導入部
• 避ける: 角丸や柔らかいエッジ

10

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

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

11

System Prompt

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