---
name: Socio Type
description: "This site is a masterclass in minimalist typography presentation, using extreme scale and restraint to let the typefaces be the hero."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  neutral: "#818181"
  bg-quiet: "#f7f7f6"
  muted-soft: "#9d9d9d"
  line: "rgba(0,0,0,0.16)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 250px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  headline:
    fontFamily: humanist-sans
    fontSize: 26px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.96px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.65px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "0.96px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

*A gallery where typefaces are displayed on concrete walls*

## Colors

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

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#818181`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.16)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Based on a 4px grid with large, spacious blocks

## Elevation & Depth

- Borders: Dotted 1px lines for dividers, no rounded corners

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Minimal text-based buttons with dotted underlines
- **card:** No card components; content is presented as open grid layouts
- **chip:** No chips used
- **input:** No input components visible
- **hero:** Full-bleed photographic background with massive white typography overlaid

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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