厳選・オープン・無料

Typewolf

モダンなタイポグラフィを発見しキュレーションするための、洗練されたエディトリアルプラットフォーム。

editorialtype
Typewolf のスクリーンショット
↓ デザインシステムをダウンロード (22 MB)OpenDesign で開く

オリジナル: https://www.typewolf.com

📦 パックの中身を見る →

01

デザイン DNA

タイポグラフィキュレーションリファレンスエディトリアルタイポグラフィ

タイポグラフィ愛好家のための、洗練されたキュレーション済みのライブラリ。

02

カラー

#2e2c2cInk
#443235Ink soft
#e6dddeBG
#f8f5f5BG soft
#654a4eMuted
rgba(101, 74, 78, 0.3)Line

深いブラウン系インクを基調とした、温かみのあるマットなアースカラーパレット。白いカードと繊細なシャドウを用いて、レイヤードな奥行きを演出します。

03

タイポグラフィ

transitional-serif · humanist-sans

洗練されたエディトリアルの美学を維持するため、すべての主要な表示および見出しテキストにトランジショナル・セリフを使用します。 · ナビゲーションラベル、小さなメタテキスト、および大文字のUI要素にはヒューマニスト・サンスを使用します。 · 大きな表示テキストとナビゲーションラベルには、タイトな文字間隔（ネガティブレタースペーシング）を維持します。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

4pxグリッドに基づく一貫したスペーシング。セクション間およびコンポーネント内に十分な余白を確保します。

05

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

sm · 4px
md · 0px
lg · 0px
pill · 999px

rgba(145, 106, 112, 0.15) 0px 6px 24px 0px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

目立つヘッダーを持つ中央揃えの単一カラムレイアウト。その後に、レスポンシブな2カラムグリッドのコンテンツカードが続きます。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

hover状態でのスムーズな背景とカラーのトランジション。 · box-shadowトランジションによる繊細な高さの変化。

インタラクティブ性を示すために、背景色や文字色に繊細な変化を与えます。 · スムーズなトランジションによる即時的な視覚フィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

Typewolf — 桌面首屏（hero）
桌面首屏（hero）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 移动首屏
移动首屏

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

11

System Prompt

これは、タイポグラフィキュレーションと発見に焦点を当てた洗練されたエディトリアルプラットフォームです。デザインのDNAは、温かみのあるマットでデサチュレーションされたアースカラーパレットを基調とし、ソフトなグレーがかったピンクの背景と深いブラウン系インクのテキストを使用します。主要なタイポグラフィは、エレガントな表示見出しにトランジショナル・セリフを大きく依存し、太字のヒューマニスト・サンスによる大文字のナビゲーションおよびメタデータと対比させます。白いカードコンポーネントと繊細なウォームシャドウが、鋭い境界線なしにレイヤードな奥気を生み出します。重要な禁止事項: 鮮やかなネオンカラーを使用しない、主要な表示テキストにジオメトリック・サンスを使用しない、重い3D効果を使用しない、本文テキストに大文字を使用しない、過度に密集したレイアウトを作成しない。全体的な美学は洗練され、静寂であり、可読性とタイポグラフィの卓越性に非常に焦点を当てています。

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

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

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

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