Madihg Oulipo Oulipo Brand

Oulipo.xyz Brand Guidelines

Design system and brand guidelines for oulipo.xyz — a laboratory of experimental computational poetry by Halim Madi.

When to Apply

Reference these guidelines when:

• Building new pages for oulipo.xyz
• Modifying existing oulipo components
• Creating related projects that should match the oulipo aesthetic
• Reviewing design consistency across the site

Typography

Font Stack

Font Face Declarations

/* Standard - Body Font */
@font-face {
  font-display: block;
  font-family: "Standard";
  src: url("https://type.cargo.site/files/Standard-Book.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-display: block;
  font-family: "Standard";
  src: url("https://type.cargo.site/files/Standard-Bold.woff") format("woff");
  font-style: normal;
  font-weight: bold;
}

/* Terminal Grotesque - Display Font for h1 */
@font-face {
  font-display: block;
  font-family: "Terminal Grotesque";
  src: url("https://type.cargo.site/files/TerminalGrotesque.woff")
    format("woff");
  font-style: normal;
  font-weight: normal;
}

/* Diatype Variable - h2 Headings (proportional) */
@font-face {
  font-display: block;
  font-family: "Diatype Variable";
  src: url("https://type.cargo.site/files/Cargo-DiatypePlusVariable.woff2")
    format("woff2-variations");
  font-style: normal;
  font-weight: 200 1000;
}

/* Diatype Mono Variable - Captions, Work Titles, Metadata (monospace) */
@font-face {
  font-display: block;
  font-family: "Diatype Mono Variable";
  src: url("https://type.cargo.site/files/Cargo-DiatypePlusVariable.woff2")
    format("woff2-variations");
  font-style: normal;
  font-weight: 200 1000;
}

Font Variation Settings

The Diatype Plus Variable font supports axis switching between proportional and monospace:

/* Proportional (Diatype Variable) */
font-variation-settings:
  "slnt" 0,
  "MONO" 0;

/* Monospace (Diatype Mono Variable) - USE THIS FOR CAPTIONS */
font-variation-settings:
  "slnt" 0,
  "MONO" 1;

Typography Specifications

Colors

Core Palette

CSS Variables (Optional)

:root {
  --oulipo-bg: #ffffff;
  --oulipo-text: rgba(0, 0, 0, 0.85);
  --oulipo-text-black: #000000;
  --oulipo-text-muted: rgba(0, 0, 0, 0.7);
  --oulipo-text-subtle: rgba(0, 0, 0, 0.5);
  --oulipo-border: rgba(0, 0, 0, 0.75);
  --oulipo-overlay: rgba(0, 0, 0, 0.25);
}

Layout

Spacing

Grid System

/* 3-column grid on desktop */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* 2-column on tablet (≤900px) */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1-column on mobile (≤600px) */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Featured Work Layout

/* Image 2/3, Description 1/3 */
.work-featured-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

@media (max-width: 900px) {
  .work-featured-body {
    grid-template-columns: 1fr;
  }
}

Components

Links

a {
  color: rgba(0, 0, 0, 0.85);
  text-decoration: underline;
}

a:hover {
  opacity: 0.7;
}

Horizontal Rule

hr {
  background: rgba(0, 0, 0, 0.75);
  border: 0;
  height: 1px;
  margin: 2rem 0;
}

Side Menu

• Width: 420px (desktop), 100% (mobile)
• Background: white
• Slide in from right
• Line height for links: 1.15

Site Structure

Current Sections

1. Featured Works (max 3 items) — Highlighted projects with image + description
2. Selected Works — Additional notable works
3. Non Human Poets — AI/machine poetry experiments
4. Border/line — Immigration-themed interactive series
5. Somatic Poetry Sandbox — Experimental interactive pieces

Navigation

• Top-left: "Halim Madi" link (hides on scroll)
• Top-right: Hamburger menu (hides on scroll)
• Side drawer with links to halimmadi.com sections

File Organization

oulipo/
├── index.html              # Main landing page
├── Assets/
│   ├── screenshots/        # Work screenshots
│   └── curl-screenshot.png
├── borderline/             # Border/line series
├── somatic-poetry-sandbox/ # Interactive experiments
├── curl/                   # Curl project
├── becoming-borders/       # Becoming Borders project
├── case-against-the-son/   # Case Against the Son
└── unlisted/               # Unlisted/archived works

Quick Copy-Paste

Minimal HTML Head

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Page Title — oulipo.xyz</title>
  <style>
    @font-face {
      font-family: "Standard";
      src: url("https://type.cargo.site/files/Standard-Book.woff")
        format("woff");
    }
    @font-face {
      font-family: "Terminal Grotesque";
      src: url("https://type.cargo.site/files/TerminalGrotesque.woff")
        format("woff");
    }
    @font-face {
      font-family: "Diatype Variable";
      src: url("https://type.cargo.site/files/Cargo-DiatypePlusVariable.woff2")
        format("woff2-variations");
      font-weight: 200 1000;
    }
    body {
      margin: 0;
      padding: 4rem;
      background: #ffffff;
      color: rgba(0, 0, 0, 0.85);
      font-family: Standard, sans-serif;
      font-size: 1.3rem;
      line-height: 1.2;
    }
    h1 {
      font-family: "Terminal Grotesque", sans-serif;
      font-size: 7rem;
      line-height: 0.9;
    }
    h2 {
      font-family: "Diatype Variable", sans-serif;
      font-size: 2rem;
      font-weight: 700;
    }
  </style>
</head>

Screenshots

IMPORTANT: Screenshot Border Requirements

All screenshots on oulipo.xyz MUST have a thin 1px black border.

When adding or updating screenshots:

1. Take the screenshot of the work/page
2. Add a 1px black border around the entire image
3. Save to Assets/screenshots/ with a descriptive name (e.g., project-name.png)

Adding Borders with Python (Pillow)

from PIL import Image

def add_border(image_path, output_path=None, border_width=1, border_color=(0, 0, 0)):
    """Add a thin black border to a screenshot"""
    if output_path is None:
        output_path = image_path

    img = Image.open(image_path)
    new_width = img.width + 2 * border_width
    new_height = img.height + 2 * border_width

    bordered_img = Image.new('RGB', (new_width, new_height), border_color)
    bordered_img.paste(img, (border_width, border_width))
    bordered_img.save(output_path, quality=95)

# Usage
add_border("Assets/screenshots/my-project.png")

Screenshot Naming Convention

• Use lowercase with hyphens: project-name.png
• Match the work title where possible
• Store in Assets/screenshots/

Brand Voice

Oulipo.xyz is described as:

"A kitchen laboratory of experimental computational poetry. Non-human poets, anti-gravitational word interfaces, somatic semantics. This is where I break and mend things."

Key themes:

• Experimental and playful
• Code meets poetry
• Human-machine interaction
• Border/migration/identity exploration
• Somatic (body-based) interactions

Converted and distributed by TomeVault — claim your Tome and manage your conversions.