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

css
1/* Standard - Body Font */
2@font-face {
3  font-display: block;
4  font-family: "Standard";
5  src: url("https://type.cargo.site/files/Standard-Book.woff") format("woff");
6  font-style: normal;
7  font-weight: normal;
8}
9@font-face {
10  font-display: block;
11  font-family: "Standard";
12  src: url("https://type.cargo.site/files/Standard-Bold.woff") format("woff");
13  font-style: normal;
14  font-weight: bold;
15}
16
17/* Terminal Grotesque - Display Font for h1 */
18@font-face {
19  font-display: block;
20  font-family: "Terminal Grotesque";
21  src: url("https://type.cargo.site/files/TerminalGrotesque.woff")
22    format("woff");
23  font-style: normal;
24  font-weight: normal;
25}
26
27/* Diatype Variable - h2 Headings (proportional) */
28@font-face {
29  font-display: block;
30  font-family: "Diatype Variable";
31  src: url("https://type.cargo.site/files/Cargo-DiatypePlusVariable.woff2")
32    format("woff2-variations");
33  font-style: normal;
34  font-weight: 200 1000;
35}
36
37/* Diatype Mono Variable - Captions, Work Titles, Metadata (monospace) */
38@font-face {
39  font-display: block;
40  font-family: "Diatype Mono Variable";
41  src: url("https://type.cargo.site/files/Cargo-DiatypePlusVariable.woff2")
42    format("woff2-variations");
43  font-style: normal;
44  font-weight: 200 1000;
45}

Font Variation Settings

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

css
1/* Proportional (Diatype Variable) */
2font-variation-settings:
3  "slnt" 0,
4  "MONO" 0;
5
6/* Monospace (Diatype Mono Variable) - USE THIS FOR CAPTIONS */
7font-variation-settings:
8  "slnt" 0,
9  "MONO" 1;

Typography Specifications

Colors

Core Palette

CSS Variables (Optional)

css
1:root {
2  --oulipo-bg: #ffffff;
3  --oulipo-text: rgba(0, 0, 0, 0.85);
4  --oulipo-text-black: #000000;
5  --oulipo-text-muted: rgba(0, 0, 0, 0.7);
6  --oulipo-text-subtle: rgba(0, 0, 0, 0.5);
7  --oulipo-border: rgba(0, 0, 0, 0.75);
8  --oulipo-overlay: rgba(0, 0, 0, 0.25);
9}

Layout

Spacing

Grid System

css
1/* 3-column grid on desktop */
2.grid {
3  display: grid;
4  grid-template-columns: repeat(3, 1fr);
5  gap: 2rem;
6}
7
8/* 2-column on tablet (≤900px) */
9@media (max-width: 900px) {
10  .grid {
11    grid-template-columns: repeat(2, 1fr);
12  }
13}
14
15/* 1-column on mobile (≤600px) */
16@media (max-width: 600px) {
17  .grid {
18    grid-template-columns: 1fr;
19  }
20}

Featured Work Layout

css
1/* Image 2/3, Description 1/3 */
2.work-featured-body {
3  display: grid;
4  grid-template-columns: 2fr 1fr;
5  gap: 2rem;
6}
7
8@media (max-width: 900px) {
9  .work-featured-body {
10    grid-template-columns: 1fr;
11  }
12}

Components

Links

css
1a {
2  color: rgba(0, 0, 0, 0.85);
3  text-decoration: underline;
4}
5
6a:hover {
7  opacity: 0.7;
8}

Horizontal Rule

css
1hr {
2  background: rgba(0, 0, 0, 0.75);
3  border: 0;
4  height: 1px;
5  margin: 2rem 0;
6}

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

html
1<head>
2  <meta charset="UTF-8" />
3  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
4  <title>Page Title — oulipo.xyz</title>
5  <style>
6    @font-face {
7      font-family: "Standard";
8      src: url("https://type.cargo.site/files/Standard-Book.woff")
9        format("woff");
10    }
11    @font-face {
12      font-family: "Terminal Grotesque";
13      src: url("https://type.cargo.site/files/TerminalGrotesque.woff")
14        format("woff");
15    }
16    @font-face {
17      font-family: "Diatype Variable";
18      src: url("https://type.cargo.site/files/Cargo-DiatypePlusVariable.woff2")
19        format("woff2-variations");
20      font-weight: 200 1000;
21    }
22    body {
23      margin: 0;
24      padding: 4rem;
25      background: #ffffff;
26      color: rgba(0, 0, 0, 0.85);
27      font-family: Standard, sans-serif;
28      font-size: 1.3rem;
29      line-height: 1.2;
30    }
31    h1 {
32      font-family: "Terminal Grotesque", sans-serif;
33      font-size: 7rem;
34      line-height: 0.9;
35    }
36    h2 {
37      font-family: "Diatype Variable", sans-serif;
38      font-size: 2rem;
39      font-weight: 700;
40    }
41  </style>
42</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)

python
1from PIL import Image
2
3def add_border(image_path, output_path=None, border_width=1, border_color=(0, 0, 0)):
4    """Add a thin black border to a screenshot"""
5    if output_path is None:
6        output_path = image_path
7
8    img = Image.open(image_path)
9    new_width = img.width + 2 * border_width
10    new_height = img.height + 2 * border_width
11
12    bordered_img = Image.new('RGB', (new_width, new_height), border_color)
13    bordered_img.paste(img, (border_width, border_width))
14    bordered_img.save(output_path, quality=95)
15
16# Usage
17add_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