---
name: Type Network
description: "This site is worth including as a masterclass in editorial web design, demonstrating how high-contrast typography and extreme restraint can create a deeply premium and authoritative user experience."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#111111"
  tertiary: "#F56900"
  neutral: "#777777"
  line: "rgba(218, 218, 218, 1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 96px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  h1:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.44
    fontWeight: 400
    letterSpacing: "normal"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

A refined editorial platform for premium typography licensing and foundry partnerships.

*A curated gallery and marketplace for high-end typography, combining the prestige of a museum with the utility of a licensing platform.*

## Colors

Stark, high-contrast black and white foundation with a single vibrant orange accent to highlight the core message.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#111111`)** — uses `ink-soft` token
- **Accent (`#F56900`)** — uses `accent` token
- **Muted (`#777777`)** — uses `muted` token
- **Borders (`rgba(218, 218, 218, 1)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** humanist-sans

- Use Didone serif for large expressive display type to evoke classic editorial elegance.
- Use Humanist sans-serif for all body copy, navigation, and UI elements for clean readability.
- Maintain high contrast between display serif and sans-serif body text.

## Layout

A wide single-column container with a max-width, featuring distinct horizontal sections separated by thin hairline borders.

*Rhythm:* A strict 4px baseline grid with generous vertical padding to maintain an airy, editorial feel.

## Elevation & Depth

- Borders: Thin 1px solid borders in #DADADA or #CCCCCC, used strictly for subtle horizontal separation and card containment.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Minimal ghost or outline buttons with 1px solid borders, small text, and an arrow icon.
- **card:** Clean white cards with thin 1px borders, containing an icon, bold title, body text, and a ghost button.
- **chip:** Minimal tags or labels with subtle borders.
- **input:** Simple text inputs with standard browser styling or subtle borders.
- **hero:** A massive, expressive serif headline in bright orange followed by a large sans-serif paragraph.

## Do's and Don'ts

**Don't:**
- Don't use drop shadows — the screenshot shows flat surfaces separated only by thin 1px borders.
- Don't use rounded pill buttons for primary actions — the screenshot shows rectangular buttons with 4px radius.
- Don't use sans-serif for the main hero headline — the screenshot shows a large Didone serif font.
- Don't use a complex multi-color background — the screenshot shows a strictly white background.
- Don't use heavy, bold weights for body text — the screenshot shows weight 400 for all standard text.
- Don't use thick borders — the screenshot shows thin, subtle 1px borders in light gray.

---

## System Prompt (paste into AI agent)

```
Type Network is a premium, curated marketplace for typography, acting as a liaison between world-class foundries and global enterprises. The visual system is defined by a high-contrast black and white base with a single vibrant orange (#F56900) accent. It combines a refined Didone-serif for expressive display headings with a clean humanist-sans for body copy. Key critical donts include: do not use drop shadows or complex gradients; do not use thick borders or heavy drop caps; do not use sans-serif for large display headlines. The layout relies on clean horizontal separation and generous whitespace to maintain an authoritative, editorial feel.
```