厳選・オープン・無料

Tofucollective

華語圏コンテンポラリーアートのための、抑制されたタイポグラフィ主導のエディトリアルプラットフォーム。

01

デザイン DNA

エディトリアルの抑制が効いたミニマルなギャラリーカタログ

02

カラー

厳格な2色パレットによるハイコントラストモノクローム。

03

タイポグラフィ

humanist-sans · system-ui-sans

• display90px · 400
• body16px · 400
• caption12px · 400

ディスプレイ見出しには tight leading を使用する · すべてのテキスト要素に高いコントラストを維持する · テキストは厳格な左揃えに合わせる

04

余白

厳格な8pxグリッドと寛大なホワイトスペース

05

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

ナビゲーション要素を区切る1pxの堅い黒い実線

06

レイアウト

非対称2カラムグリッド。左側に重厚なタイポグラフィカラム、右側にフルハイトの画像

07

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

UI要素のための滑らかな transform トランジション

インタラクティブ要素の微細な transform シフト · ポインターカーソルによる即時フィードバック

08

コンポーネント

• button 縦のボーダーで区切られた、テキストのみのナビゲーションリンク
• card ビジュアルカードは不要。コンテンツは生のタイポグラフィブロックと画像として提示する
• hero フルハイトの分割画面。左側に巨大なタイポグラフィタイトル、右側にフォトグラフィック画像

09

文体と禁止事項

• トーン 学術的、上品、やや詩的
• 見出し tight leading の、巨大な小文字または混合ケースのディスプレイタイポ
• CTA ビジュアルボタンのない、ミニマルなテキストベースのナビゲーション

• 角丸は使用しない — スクリーンショットではナビゲーションラインが完全に四角いエッジになっている
• ドロップシャドウは使用しない — スクリーンショットでは奥行きのないフラットな表面が示されている
• カラフルなアクセントボタンは使用しない — スクリーンショットではラインで区切られたテキストのみのナビゲーションが示されている
• 装飾的なセリフフォントは使用しない — スクリーンショットではクリーンなサンセリフタイポグラフィが示されている
• ヒーローテキストを中央揃えにしない — スクリーンショットでは厳格な左揃えが示されている
• 白以外の背景色は使用しない — スクリーンショットでは純白のキャンバスが示されている
• 避ける: 鮮やかな、またはネオンのカラーパレット
• 避ける: UI要素の角丸
• 避ける: 重いドロップシャドウや3Dエフェクト
• 避ける: プライマリナビゲーションのセリフフォント
• 避ける: 密集した、複数カラムのテキストレイアウト
• 避ける: アグレッシブまたは営業指向の言葉遣い

10

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

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

11

System Prompt

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