厳選・オープン・無料

Typelist Upstatement

クリエイティブなタイポグラフィのための、クリーンで表現力豊かなエディトリアルショーケース。

01

デザイン DNA

表現力豊かなディスプレイ書体のキュレーションされたライブラリ。

02

カラー

鮮やかでフラットな幾何学的アクセントのみで区切られた、鋭いコントラストのモノクロームベース。

03

タイポグラフィ

humanist-sans

• display22px · 500
• body16px · 400
• caption12px · 400

ラベルとナビゲーションには大文字変換を一貫して使用 · 字母間隔を寛裕に設定し、エディトリアル的な開放感を演出 · 特定のスタイリッシュな強調にはセリフフォントを慎重に使用

04

余白

開放的で空気感のあるリズム。大胆なビジュアル要素をフレーミングするために、意図的な大きな余白に大きく依存します。

05

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

06

レイアウト

密な情報グリッドよりもビジュアルインパクトを優先する、非常に非対称でギャラリーのようなレイアウト。

07

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

インタラクティブ要素の滑らかで意図的なトランジション · 急激な動きを避ける上品なeasingカーブ

色彩やわずかな空間的な変化を伴う、繊細なビジュアル状態の変化。 · アグレッシブなビジュアルフィードバックなしの、直接的なナビゲーションまたは状態変更。

08

コンポーネント

• button 明確なボーダーや背景形状を持たない、ミニマルで純粋にタイポグラフィックなリンク。
• card 主要なインタラクティブユニットとして機能する、大胆でフラットな幾何学形状（大きな円など）。
• hero 広大な余白とアグレッシブなフラットな幾何学カラーバンドを組み合わせた、目を引くミニマルな構図。

09

文体と禁止事項

• トーン ビジュアルインパクトに焦点を当てた、自信に満ちキュレーションされた専門的なトーン。
• 見出し 大文字、きついトラッキング、そしてデザインに幾何学的に統合されることが多い。
• CTA 控えめで純粋にタイポグラフィック。全体的なビジュアルリズムに依存。

• 一般的なUIコンポーネント（標準的なボタンやカードなど）を使用しない — スクリーンショットにはフラットなカスタム幾何学形状とシンプルなタイポグラフィリンクが示されています。
• 複雑なシャドウやグラデーションを適用しない — スクリーンショットにはフラットな単色フィールドと鋭い余白が示されています。
• 密で雑然としたレイアウトを使用しない — スクリーンショットには、ミニマルなコンテンツをフレーミングする意図的な広大な余白が示されています。
• インフォーマルまたは遊び心過多なタイポグラフィを使用しない — スクリーンショットには、非常に構造化された大文字トラッキングと幾何学的配置が示されています。
• ダークモードやクオリティの低いローコントラストのカラーパレットを使用しない — スクリーンショットには、鮮やかなカラーと高コントラストの黒文字を持つ鋭い白背景が示されています。
• 分離に伝統的なUIボーダーに依存しない — スクリーンショットには、主要なビジュアル区切りとして空間的コントラストとフラットなカラーブロックが示されています。
• 避ける: 一般的または装飾過多なUIパターンを避ける
• 避ける: 雑然とした情報階層を避ける
• 避ける: グラデーションや複雑なシャドウを使用しない
• 避ける: インフォーマルまたは遊び心過多なタイポグラフィック処理を避ける
• 避ける: ダークモードインターフェースを避ける
• 避ける: 密な伝統的なグリッドレイアウトを避ける

10

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

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

11

System Prompt

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