精選 · 開放 · 免費

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

display250px · 400
headline26px · 400
body14px · 400
caption12px · 400

所有文字使用 400 字重，並搭配寬鬆的字距 · 導覽標籤採用大寫形式 · 展示字型尺寸極大，經常超過 200px

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

文案語氣與禁用清單

語氣客觀、具描述性且具權威感
標題風格 粗體、大尺度的字型樣本展示，讓字型本身發聲
按鈕文案 低調簡約，使用「更多資訊」並搭配點狀下劃線

勿使用圓角 —— 螢幕截圖顯示嚴格的 0px 銳角
勿使用陰影效果 —— 螢幕截圖顯示完全平坦的表面
勿使用鮮豔的強調色 —— 螢幕截圖顯示嚴格的黑/白/灰色調
勿使用粗體或特粗字重 —— 螢幕截圖顯示全程使用 400 字重
勿使用置中對齊的文字 —— 螢幕截圖顯示主要採用左對齊排版
勿使用複雜的背景圖樣 —— 螢幕截圖顯示乾淨的平面色彩或全版出血攝影
避免: 行銷術語
避免: 過多色彩
避免: 裝飾性 UI 元素

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)。字型僅限 humanist-sans 字體，使用 400 字重，並搭配寬鬆字距。佈局採用全版出血的攝影主視覺，疊加大尺度的白色字型樣本文字，後接簡潔的樣本網格。關鍵限制：永不使用圓角、避免所有陰影效果、永不引入鮮豔的強調色。設計依賴極端的字型尺度與寬敞的留白，創造高端的編輯品質感。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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