厳選・オープン・無料
Socio Type
高コントラストの写真ヒーローセクションと、たっぷりとした見本表示を通じてコンテンポラリーな書体ファミリーを紹介するミニマルなタイポグラフィ鋳造所。
TypographyPortfolioPhotographicCleanEditorial
01
デザイン DNA
書体鋳造所見本コンテンポラリーエディトリアルプレミアム
書体がコンクリートの壁に展示されるギャラリー
02
カラー
#000000Ink
#ffffffBG
#f7f7f6BG quiet
#818181Muted
rgba(0,0,0,0.16)Line
黒、白、ニュートラルな暖灰色を使用した厳格なモノクロ・パレット
03
タイポグラフィ
humanist-sans
- display
250px · 400 - headline
26px · 400 - body
14px · 400 - caption
12px · 400
すべてのテキストはウェイト400で、たっぷりとした文字間隔を設定 · ナビゲーションラベルには大文字を使用 · 表示用サイズは極端に大きく、200pxを超えることが often ある
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
120px
4pxグリッドをベースに、大きく、たっぷりとしたブロックを配置
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
区切り線には点線1pxを使用。角丸なし
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
フルブリードの写真ヒーローに続き、非対称マルチカラムの書体見本グリッド
07
モーションとインタラクション
220msmicro
500mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
すべてのトランジションはtransformおよびopacityに適用 · カラーステート用のカスタムプロパティトランジション
テキスト要素に対するカラーのトランジション · インタラクティブ要素には標準のポインタカーソル
08
コンポーネント
- button 最小限のテキストベースのボタンで、点線の下線付き
- card カードコンポーネントなし。コンテンツはオープンなグリッドレイアウトとして提示
- chip チップは使用しない
- input 入力コンポーネントは表示されない
- hero フルブリードの写真背景に、巨大な白色のタイポグラフィをオーバーレイ
09
文体と禁止事項
- トーン 客観的で、記述的、かつ権威のあるトーン
- 見出し 書体自体が語るような、太字で大規模な見本表示
- CTA 控えめに、点線の下線付きの「詳細情報」を使用
- 角丸を使用しない — スクリーンショットでは、厳格に0pxのシャープな角が示されている
- ドロップシャドウを使用しない — スクリーンショットでは、完全にフラットな表面が示されている
- 鮮やかなアクセントカラーを使用しない — スクリーンショットでは、厳格な黒/白/グレーのパレットが示されている
- 太字またはヘビーウェイトのフォントを使用しない — スクリーンショットでは、全体を通してウェイト400が示されている
- センタリングされたテキストを使用しない — スクリーンショットでは、主に左揃えのタイポグラフィが示されている
- 複雑な背景パターンを使用しない — スクリーンショットでは、クリーンなフラットカラーまたはフルブリード写真が示されている
- 避ける: マーケティング・ジャーゴン
- 避ける: 過度なカラー使用
- 避ける: 装飾的なUI要素
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Socio Typeは、ミニマルでエディトリアルな美学を特徴とするコンテンポラリーなタイポグラフィ鋳造所のウェブサイトです。デザインDNAは、純粋な黒(#000000)と白(#ffffff)をプライマリカラーとする厳格なモノクロ・パレットを基盤とし、ニュートラルな暖灰色(#818181、#f7f7f6)をサポートしています。タイポグラフィは、ウェイト400のヒューマニスト・サンセリフのみを使用し、たっぷりとした文字間隔を特徴とします。レイアウトでは、フルブリードの写真ヒーローに巨大な白色の書体見本テキストをオーバーレイし、その後にクリーンな書体グリッドが続きます。重要な制約:角丸は決して使用せず、すべてのドロップシャドウを避け、鮮やかなアクセントカラーを決して導入しないこと。デザインは、極端なタイポグラフィスケールとたっぷりとしたホワイトスペースを用いて、プレミアムなエディトリアル品質の感覚を生み出しています。
en · zh-CN · zh-TW · ja · ko