# Socio Type · Design system migration spec

> Source: https://socio-type.com  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in minimalist typography presentation, using extreme scale and restraint to let the typefaces be the hero.

## 1. Identity DNA

Socio Type operates as a gallery where typefaces are displayed on concrete walls—a minimalist foundry where the specimen is the architecture. Every design decision serves the type, creating a space of high-contrast, editorial clarity that frames contemporary families with the reverence of a museum exhibition.

**One-liner:** A minimalist typography foundry showcasing contemporary type families through high-contrast photographic hero sections and generous specimen displays.
**Keywords:** foundry · specimen · contemporary · editorial · premium
**Analogy:** A gallery where typefaces are displayed on concrete walls

## 2. Color

A strict monochromatic palette of black, white, and neutral warm gray provides the stark, gallery-like backdrop. This is a system of pure contrast, where the absence of color forces the eye to focus entirely on the form of the letter.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-quiet` | `#f7f7f6` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#818181` | placeholder |
| `--muted-soft` | `#9d9d9d` | weak hint |
| `--line` | `rgba(0,0,0,0.16)` | divider |

**Color principle:** Strict monochromatic palette with black, white, and a neutral warm gray

The principle is unwavering: the palette exists only to frame the specimen, never to compete with it.

## 3. Typography

The typographic voice is singular and deliberate, using a humanist-sans at a constant 400 weight. Scale does the work—from massive specimen displays that can exceed 200px down to meticulously spaced metadata, the system relies on size and proportion rather than stylistic variation.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 250px | 1.0 | 400 | -1px | massive specimen display |
| headline | 26px | 1.2 | 400 | 0.96px | section headings |
| body | 14px | 1.5 | 400 | 0.65px | descriptive text |
| caption | 12px | 1.33 | 400 | 0.96px | navigation and metadata |

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

## 4. Spacing

Rhythm is established by a strict 4px grid, but the application is one of generous, open space rather than tight repetition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 120 px
- **Rhythm:** Based on a 4px grid with large, spacious blocks

## 5. Surfaces

Surfaces are defined by absence—there are no drop shadows, no rounded corners, only flat planes. Dividers are rendered as precise, dotted 1px lines, maintaining a sharp, technical clarity.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Dotted 1px lines for dividers, no rounded corners

## 6. Layout

The skeletal framework opens with a full-bleed photographic hero, a dramatic field for massive white specimen text. This transitions into asymmetric, multi-column grids that present type specimens with the spaciousness of an editorial layout.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is a quiet utility, confined to smooth transitions on transform and opacity. All interactive state changes unfold over 0.5 seconds, creating a subtle, continuous flow that never interrupts the reading of the specimen.

- **Durations:** micro 220ms · small 500ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - All transitions applied to transform and opacity
  - Custom property transitions for color states

- **Hover:** Color transitions on text elements
- **Click:** Standard pointer cursor on interactive elements
- **Transition:** Smooth opacity and color shifts over 0.5s
- **Keyboard:** Standard focus states implied by pointer interactions

## 8. Voice & Don'ts

The editorial voice is objective, descriptive, and authoritative, letting the typeface speak for itself. Headlines are bold specimen displays; calls to action are understated, like a 'More Info' link with a dotted underline.

- **Tone:** Objective, descriptive, and authoritative
- **Headline style:** Bold, large-scale specimen displays that speak for the typeface itself
- **CTA style:** Understated, using 'More Info' with a dotted underline
- **Avoid:** Marketing jargon / Excessive color / Decorative UI elements

### Don'ts
- ❌ Don't use rounded corners — screenshot shows strictly sharp 0px corners
- ❌ Don't use drop shadows — screenshot shows completely flat surfaces
- ❌ Don't use vibrant accent colors — screenshot shows a strict black/white/gray palette
- ❌ Don't use bold or heavy font weights — screenshot shows 400 weight throughout
- ❌ Don't use center-aligned text — screenshot shows predominantly left-aligned typography
- ❌ Don't use busy background patterns — screenshot shows clean, flat color or full-bleed photography

This system deliberately rejects vibrant accents, decorative UI, and marketing jargon to maintain its focus on pure typographic presentation.

## System Prompt (paste into AI tool)

```
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.
```