---
version: alpha
name: Developments
description: Editorial brutalism in pure black and white — Folio (Bitstream grotesque) typography with tight display tracking (-0.06em), bordered pill buttons that invert black/white on hover, hairline 1px outlines, dashed-border tags, and a gallery-grid index of numbered interviews on stark white.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f5f5f5"
  ink: "#000000"

  # Chrome / borders
  border: "#000000"
  hairline: "#ebebeb"          # rgba(0,0,0,.07) flattened over white
  divider: "#cccccc"           # rgba(0,0,0,.1) flattened over white

  # Interactive
  primary: "#000000"           # filled black button / inverted hover
  on-primary: "#ffffff"
  link: "#000000"
  focus-blue: "#1199ff"        # #19f Flickity focus ring

  # Selection / overlay
  selection: "#e6e6e6"         # rgba(0,0,0,.1) over white
  control-gray: "#333333"      # carousel arrow controls

  # On-color
  on-ink: "#ffffff"

typography:
  display-large:
    fontFamily: "FolioBT-Light, Folio, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1.00
    letterSpacing: -3.84px
  display-medium:
    fontFamily: "FolioBT-Book, Folio, Arial, sans-serif"
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -1.14px
  reading-text:
    fontFamily: "FolioBT-Book, Folio, Arial, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0.21px
  body:
    fontFamily: "FolioBT-Book, Folio, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  body-medium:
    fontFamily: "FolioMdBTWXX-Medium, Folio, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
  italic:
    fontFamily: "FolioLtBTWXX-LightItalic, Folio, Arial, sans-serif"
    fontSize: 21px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: 0px
  caption:
    fontFamily: "FolioBT-Book, Folio, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  navigation:
    fontFamily: "FolioBT-Book, Folio, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  button-ui:
    fontFamily: "FolioBT-Book, Folio, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px

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

rounded:
  none: 0px
  pill-sm: 20px
  pill: 9999px
  circle: 9999px

components:
  # Filled CTA — black on white
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 0.9em 1.2em
    borderColor: "{colors.ink}"
  button-primary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 0.9em 1.2em
    borderColor: "{colors.ink}"

  # Outline pill — white with 1px black border, inverts on hover
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 0.9em 1.2em
    borderColor: "{colors.ink}"
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 0.9em 1.2em
    borderColor: "{colors.ink}"

  # Topic tag — dashed hairline border
  tag:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 0.6em 0.9em
    borderColor: "{colors.ink}"

  # Interview card — hairline-bordered, image forward
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px
    borderColor: "{colors.hairline}"

  # Top navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.navigation}"
    padding: 8px 16px
    borderColor: "{colors.ink}"

  # Caption / metadata label
  caption-label:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"

  # Input field
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 12px
    borderColor: "{colors.ink}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"

  # Carousel control button (Flickity)
  carousel-control:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.control-gray}"
    rounded: "{rounded.circle}"
    width: 44px
    height: 44px
---

# Developments Design System

## Overview

Developments is an editorial interview platform whose design strips the page to its barest editorial bones: pure black ink on pure white paper, no color, no shadow, no decoration. The aesthetic is gallery-brutalist — the only chrome is a hairline 1px rule and a numbered grid of interview cards. It reads like a printed art journal that happens to live on the web, with the index itself (numbered 1–43) functioning as the primary visual rhythm. Credited to Bureau Antoine Roux (design) and Tristan Bagot (development), the system is intentional and curatorial rather than templated.

The typographic backbone is Folio — a Bitstream cut of the classic Swiss grotesque — loaded in five weights (Light, Book, Medium, Bold, Extra Bold) plus a Light Italic. Folio's neutral, geometric grotesque character carries the entire identity; there is no second typeface. Display headlines use the Light weight at large sizes with tight negative tracking (-0.06em) and a line-height of exactly 1.0, giving titles a compressed, monumental presence. Reading text drops to Book weight at relaxed 1.25 line-height. The italic is reserved for emphasis inside reading copy.

The signature interactive move is the inverting pill button. Buttons are uppercase 12px Folio in a fully-rounded pill (`{rounded.pill}` / 1.6em) with a 1px solid black border. The two states swap completely: the filled state is black-on-white, and on hover it flips to white-on-black (or vice versa for the outline variant), with the border always present. Topic tags echo the same pill shape but with a dashed hairline border. Everything sits on stark white with absolutely no fills, gradients, or drop shadows — separation comes from 1px rules and whitespace alone.

**Key Characteristics:**
- Pure black ink (`{colors.ink}`) on pure white (`{colors.background}`) — no grays in chrome except hairline rules
- Folio (Bitstream grotesque) as the sole typeface, five weights + Light Italic, loaded via MyFonts
- Display headlines in Folio Light at tight -0.06em tracking, line-height 1.0 — compressed and monumental
- Inverting pill buttons: black/white states swap on hover, 1px border always present
- Dashed-border pill tags for topic taxonomy
- Hairline 1px rules and generous whitespace as the only separation device
- Numbered editorial index (1–43) as the dominant visual grid
- rem-based fluid type scale (`.33rem`, `.6rem`, `4rem`) tied to viewport

## Colors

### Primary
- **Black** (`{colors.ink}`): All text, borders, filled buttons. Pure `#000000` — no softening.
- **White** (`{colors.background}`): Page, card surfaces, inverted text on black.

### Chrome & Borders
- **Border** (`{colors.border}`): 1px solid black outlines on buttons, tags, nav.
- **Hairline** (`{colors.hairline}`): Faint card/image outline (`rgba(0,0,0,.07)` flattened).
- **Divider** (`{colors.divider}`): Subtle rules between sections (`rgba(0,0,0,.1)` flattened).
- **Surface Soft** (`{colors.surface-soft}`): `#f5f5f5` — carousel control background.

### Interactive
- **Primary** (`{colors.primary}`): Black filled CTA / inverted hover fill.
- **On Primary** (`{colors.on-primary}`): White text on black.
- **Link** (`{colors.link}`): Black text links, no underline by default.
- **Focus Blue** (`{colors.focus-blue}`): `#19f` Flickity carousel focus ring — the only chromatic accent in the system, and only on keyboard focus.

### Selection & Control
- **Selection** (`{colors.selection}`): Text-selection highlight (`rgba(0,0,0,.1)` over white).
- **Control Gray** (`{colors.control-gray}`): `#333` carousel arrow icon color.

## Typography

### Font Family
- **Primary**: `Folio` (Bitstream), with fallbacks `Arial, sans-serif`
- **Faces loaded**: FolioBT-Light, FolioBT-Book, FolioMdBTWXX-Medium, FolioBkBTWXX-Bold, FolioXBdBTWXX-ExtraBold, FolioLtBTWXX-LightItalic
- **No monospace** — the system is single-typeface

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-large}`, `{typography.reading-text}`, etc.).

| Token | Use |
|---|---|
| `display-large` | Hero / feature titles — Folio Light, -0.06em tracking, LH 1.0 |
| `display-medium` | Section and listing headings — -0.03em tracking |
| `reading-text` | Long-form interview body copy |
| `body` | Standard UI text |
| `body-medium` | Emphasized labels (Folio Medium) |
| `italic` | In-copy emphasis (Folio Light Italic) |
| `caption` | Metadata, tags, image captions |
| `navigation` | Top-bar nav links — 12px |
| `button-ui` | Uppercase button labels — 12px |

### Principles
- **One typeface, full range**: Folio carries everything from 64px display to 12px caption. Weight and size do all the differentiation.
- **Compressed display tracking**: Large titles use -0.06em (-0.03em at medium) with line-height 1.0 — tight, monumental, editorial.
- **Relaxed reading**: Body copy opens to 1.25 line-height with a slight +0.01em tracking for legibility.
- **Uppercase for UI**: Buttons and tags are uppercase 12px; navigation is small and quiet.
- **Italic is structural, not decorative**: The Light Italic face marks emphasis within reading copy.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. The live system is rem/em and viewport-driven: `--padding-container: 5rem`, `--padding-blocks: 9rem`, `--grid-gutter: 0.5rem`, `--grid-padding: 6rem`, collapsing sharply on mobile (`--padding-container: 0.5rem`). A fixed left menu rail is `--menu-width: 6rem`.

### Grid & Container
- Numbered interview index in a responsive image-forward grid
- Fixed/side menu rail (~6rem) on desktop; collapses on mobile
- Generous block padding (~9rem desktop) between editorial sections
- Image containers carry intrinsic aspect ratios (SVG-sized placeholders)

### Whitespace Philosophy
- **Paper, not screen**: Massive vertical block spacing treats the page like a printed spread.
- **Rules over fills**: Sections separate by 1px hairline and whitespace, never by background color.
- **Index as rhythm**: The numbered 1–N sequence is the dominant structural device.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Everything — the system is shadowless |
| Hairline (Level 1) | `1px solid {colors.hairline}` | Cards, image outlines |
| Border (Level 1b) | `1px solid {colors.ink}` | Buttons, tags, nav, inputs |
| Focus | `0 0 0 5px {colors.focus-blue}` | Carousel control keyboard focus only |

**Depth Philosophy**: Developments has effectively no elevation system. There are no drop shadows anywhere in the chrome. The only "depth" is the figure-ground contrast of black on white and the 1px rule. Carousel controls are the lone exception — semi-transparent white circles with a blue focus ring — borrowed from the Flickity library defaults.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Cards, images, inputs — hard rectangular edges |
| `pill-sm` | 20px | Small/mobile button fallback radius |
| `pill` | 9999px (1.6em) | Buttons and topic tags |
| `circle` | 9999px | Carousel control buttons, dots |

Two shape languages coexist: hard 0px rectangles for content (cards, images, the index grid) and fully-rounded pills for interactive controls (buttons, tags). There is no in-between radius.

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Black fill, white uppercase label, full pill, 1px black border. Hover inverts to white-on-black.
- **`button-outline`** — White fill, black uppercase label, 1px black border. Hover inverts to black-on-white. The dominant button in the index/tag UI.

### Tags
- **`tag`** — Topic taxonomy chip. White pill with a **dashed** 1px black border, uppercase 12px Folio.

### Cards
- **`card`** — Interview entry: image-forward, hairline outline, no shadow, no radius. Numbered.

### Navigation
- **`nav-bar`** — Quiet 12px Folio links, black text, 1px rule. Fixed side menu rail on desktop.

### Inputs
- **`input`** — White field, 1px black border, no radius, Folio body text.

### Carousel
- **`carousel-control`** — 44px circular Flickity button, `#f5f5f5` background, `#333` arrow, blue focus ring.

## Do's and Don'ts

### Do
- Keep the palette strictly black and white — `{colors.ink}` on `{colors.background}`
- Use Folio for everything; differentiate by weight and size only
- Apply tight -0.06em tracking and line-height 1.0 to display headlines
- Use inverting pill buttons (states swap fully on hover, border always visible)
- Use dashed borders for topic tags, solid borders for buttons
- Separate sections with 1px rules and whitespace, never background fills
- Set button and tag labels in uppercase 12px Folio

### Don't
- Don't introduce color into chrome — blue exists only as a focus ring
- Don't add drop shadows or elevation — the system is flat
- Don't round content cards/images — pills are for controls only
- Don't use positive tracking on display headlines
- Don't add a second typeface — Folio is the whole identity
- Don't fill section backgrounds with gray — use hairline rules
- Don't lowercase button or tag labels

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <768px | reading-text drops to 16px, container padding collapses to 0.5rem |
| Tablet | 768–1023px | Side rail collapses, grid-padding → 2rem, fs-medium → 0.9rem |
| Desktop | 1024–1900px | Full 6rem menu rail, 9rem block padding, rem-scaled type |
| Large Desktop | >1900px | Captions shift to rem units (.15rem), maximum spacing |

### Touch Targets
- Buttons: `0.9em 1.2em` padding, `max-height: 3em`
- Carousel controls: 44px circular
- Tags: comfortable pill padding for tap

### Collapsing Strategy
- Side menu rail (6rem) → collapses / drawer on mobile
- Interview index grid: multi-column → single column
- Display type: rem-fluid, scales with viewport; tracking held proportional
- Block padding: ~9rem desktop → 0.5rem mobile

### Image Behavior
- Image containers use intrinsic aspect-ratio placeholders
- Hairline outlines maintained at all sizes
- Carousels (Flickity) for multi-image sets, draggable on touch

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White `{colors.background}`
- Text / heading: Black `{colors.ink}`
- Border: Black `{colors.border}` (solid for buttons, dashed for tags)
- Primary CTA: Black fill `{colors.primary}`, white text, inverts on hover
- Focus ring: `{colors.focus-blue}` (carousel only)

### Example Component Prompts
- "Create a hero on white. Headline in Folio Light 64px, line-height 1.0, letter-spacing -3.84px, black. Subtitle in Folio Book 21px, line-height 1.25, black."
- "Design an outline pill button: white background, black uppercase 12px Folio label, 1px solid black border, fully rounded (1.6em), padding 0.9em 1.2em. On hover, invert to black background with white text."
- "Build a topic tag: white pill, 1px DASHED black border, uppercase 12px Folio."
- "Lay out a numbered interview index: image-forward cards with a 1px hairline outline, no shadow, no radius, each prefixed with its number, in a responsive multi-column grid."
- "Create navigation: quiet 12px Folio black links on white, fixed left menu rail (~6rem) on desktop, 1px rule separation."

### Iteration Guide
1. Stay black-and-white — color is forbidden in chrome; blue is a focus ring only
2. Folio only; differentiate by weight (Light/Book/Medium/Bold) and size
3. Display headlines: tight -0.06em tracking, line-height 1.0
4. Buttons and tags are pills; content and images are hard rectangles (0px)
5. Buttons invert fully on hover; the 1px border is always present
6. No shadows — separation is 1px rules and whitespace

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Developments. Brand names and trademarks belong to their respective owners.