厳選・オープン・無料

Socio Type

高コントラストの写真ヒーローセクションと、たっぷりとした見本表示を通じてコンテンポラリーな書体ファミリーを紹介するミニマルなタイポグラフィ鋳造所。

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

オリジナル: https://socio-type.com

📦 パックの中身を見る →

01

デザイン DNA

書体鋳造所見本コンテンポラリーエディトリアルプレミアム

書体がコンクリートの壁に展示されるギャラリー

02

カラー

#000000Ink
#ffffffBG
#f7f7f6BG quiet
#818181Muted
rgba(0,0,0,0.16)Line

黒、白、ニュートラルな暖灰色を使用した厳格なモノクロ・パレット

03

タイポグラフィ

humanist-sans

すべてのテキストはウェイト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

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

Socio Typeは、ミニマルでエディトリアルな美学を特徴とするコンテンポラリーなタイポグラフィ鋳造所のウェブサイトです。デザインDNAは、純粋な黒（#000000）と白（#ffffff）をプライマリカラーとする厳格なモノクロ・パレットを基盤とし、ニュートラルな暖灰色（#818181、#f7f7f6）をサポートしています。タイポグラフィは、ウェイト400のヒューマニスト・サンセリフのみを使用し、たっぷりとした文字間隔を特徴とします。レイアウトでは、フルブリードの写真ヒーローに巨大な白色の書体見本テキストをオーバーレイし、その後にクリーンな書体グリッドが続きます。重要な制約：角丸は決して使用せず、すべてのドロップシャドウを避け、鮮やかなアクセントカラーを決して導入しないこと。デザインは、極端なタイポグラフィスケールとたっぷりとしたホワイトスペースを用いて、プレミアムなエディトリアル品質の感覚を生み出しています。

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

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

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

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