CURATED · OPEN · FREE

Socio Type

A minimalist typography foundry showcasing contemporary type families through high-contrast photographic hero sections and generous specimen displays.

TypographyPortfolioPhotographicCleanEditorial
Socio Type screenshot
↓ Download design system (47 MB)Open in OpenDesign

Visit: https://socio-type.com

📦 Browse pack contents →

01

Identity DNA

foundryspecimencontemporaryeditorialpremium

A gallery where typefaces are displayed on concrete walls

02

Color

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

Strict monochromatic palette with black, white, and a neutral warm gray

03

Typography

humanist-sans

All text is 400 weight with generous letter-spacing · Uppercase used for navigation labels · Display sizes are extreme, often exceeding 200px

04

Spacing

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

Based on a 4px grid with large, spacious blocks

05

Surfaces

sm · 0px
md · 0px
lg · 0px
pill · 0px

Dotted 1px lines for dividers, no rounded corners

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Full-bleed photographic heroes followed by asymmetric multi-column specimen grids

07

Motion & Interaction

220msmicro
500mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

All transitions applied to transform and opacity · Custom property transitions for color states

Color transitions on text elements · Standard pointer cursor on interactive elements

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

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 — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

Socio Type is a contemporary typography foundry website featuring a minimalist, editorial aesthetic. The design DNA is built on a strict monochromatic palette with pure black (#000000) and white (#ffffff) as the primary colors, supported by neutral warm grays (#818181, #f7f7f6). The typography is exclusively humanist-sans with a 400 font weight, featuring generous letter-spacing. The layout uses full-bleed photographic heroes overlaid with massive white specimen text, followed by clean specimen grids. Critical constraints: never use rounded corners, avoid all drop shadows, and never introduce vibrant accent colors. The design relies on extreme typographic scale and generous whitespace to create a sense of premium editorial quality.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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