---
version: alpha
name: Dark Mofo
description: Ritual brutalism — blood-red on pure black, no rounded corners, no decoration. A winter-solstice arts festival that treats the screen like a poster wall; stark uppercase sans-serif, oversized editorial type, and a single sacrificial red as the only color that survives the dark.
colors:
  # Canvas + ink
  background: "#000000"
  surface: "#0a0a0a"
  surface-raised: "#141414"
  ink: "#ffffff"
  ink-secondary: "#b3b3b3"
  ink-muted: "#7a7a7a"

  # The one accent — Dark Mofo blood red
  primary: "#e30613"
  primary-deep: "#b3040f"
  on-primary: "#ffffff"

  # Borders / hairlines
  border: "#262626"
  border-strong: "#3d3d3d"

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

typography:
  display-hero:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -1px
  display:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -0.5px
  heading:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: 0.5px
  sub-heading:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1px
  eyebrow:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 2px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 2px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 1px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  2xl: 80px
  3xl: 120px

rounded:
  none: 0px
  hair: 1px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 16px 32px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.ink}"
  button-ghost-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 4px 10px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border}"

  card-event:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.heading}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border-strong}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 20px 32px
    borderColor: "{colors.border}"

  divider:
    backgroundColor: "{colors.primary}"
    height: 2px
    width: 100%
---

# Dark Mofo Design System

## Overview

Dark Mofo is the winter-solstice festival run by Hobart's Museum of Old and New Art (MONA), and its website is a screen translation of its poster identity: it treats the browser like a wheat-pasted wall in the dark. The canvas is pure black (`{colors.background}`), the only color that survives is a single sacrificial blood red (`{colors.primary}`), and everything else is white or grayscale type. There is no gradient, no soft shadow, no rounded corner — the system is deliberately brutal, ritualistic, and a little hostile, matching a festival built around fire, fog, and the longest night of the year.

The typographic move is the whole identity. Oversized condensed display type (Anton/Oswald-class) is set in tight, towering uppercase, leaning negative line-height so headlines stack like a stone slab. Display sizes run enormous (up to ~96px) with line-height below 1.0 so multi-line headlines lock together as a single mass. Supporting type widens its tracking — eyebrows and buttons use +2px letter-spacing uppercase to read as labels stamped onto the dark rather than sentences. Body copy drops to a neutral humanist sans (Inter-class) so the red and the display type stay the only things shouting.

Color is functional and scarce. Red is never decorative wallpaper; it marks the one thing that matters in a given view — a CTA, a date, a 2px divider slashing across the page, a badge. Because the canvas is black, contrast is managed carefully: white ink on black is the reading default, secondary grays (`{colors.ink-secondary}`, `{colors.ink-muted}`) carry metadata, and red is reserved for action and emphasis so it never loses its charge.

**Key Characteristics:**
- Pure black canvas (`{colors.background}`) — true `#000000`, not a soft charcoal
- A single accent: Dark Mofo blood red (`{colors.primary}`), used scarcely and functionally
- Zero rounded corners — every box, button, and badge is a hard rectangle (`{rounded.none}`)
- Towering condensed uppercase display type with sub-1.0 line-height
- Wide letter-spacing on labels/eyebrows/buttons (+2px), tight on display
- No shadows, no gradients — depth comes from hairline borders and black-on-black surface steps
- Red 2px dividers as a structural slash across sections

## Colors

### Canvas & Ink
- **Black** (`{colors.background}`): The page. True black, edge to edge.
- **Surface** (`{colors.surface}`): Near-black raised panels and cards.
- **Surface Raised** (`{colors.surface-raised}`): Slightly lifted event cards and modals.
- **White** (`{colors.ink}`): Primary reading text and headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Descriptions, secondary copy.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, dates, captions.

### Accent
- **Blood Red** (`{colors.primary}`): The single accent — CTAs, dividers, badges, emphasis.
- **Deep Red** (`{colors.primary-deep}`): Hover/pressed state for red surfaces.
- **On Primary** (`{colors.on-primary}`): White text on red fills.

### Borders
- **Border** (`{colors.border}`): Hairline dividers between sections and cards.
- **Border Strong** (`{colors.border-strong}`): Input outlines, prominent panel edges.

## Typography

### Font Family
- **Display**: `Anton` / `Oswald` (condensed grotesque), fallbacks `Arial Narrow, sans-serif`
- **Headings/Labels**: `Oswald`, fallbacks `Arial Narrow, sans-serif`
- **Body**: `Inter`, fallbacks `Helvetica Neue, Arial, sans-serif`
- **Casing**: Display, headings, eyebrows, and buttons are UPPERCASE. Body is sentence case.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 96px towering hero headline — poster impact |
| `display` | 64px section headlines |
| `heading` | 32px event/feature titles |
| `sub-heading` | 20px secondary titles, dates |
| `eyebrow` | 13px wide-tracked uppercase labels |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Dense lists, secondary copy |
| `button` | Uppercase wide-tracked button/nav text |
| `caption` | Metadata, fine print |

### Principles
- **Condensed and uppercase for impact**: All display and label type is condensed uppercase. The vertical compression is the brand.
- **Sub-1.0 line-height on display**: Headlines stack as a solid block — line-height 0.92–0.95.
- **Tracking inverts with size**: Tight (negative) at display, wide (+1px to +2px) on small labels.
- **Body steps out of the way**: Neutral humanist sans at normal tracking so red and display type carry all the voice.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous vertical rhythm — sections separated by `{spacing.2xl}`–`{spacing.3xl}` (80–120px) of black emptiness.

### Grid & Container
- Full-bleed black sections, content held to a ~1200px max width
- Event/program listings in hard-edged grid cards with hairline borders
- Red 2px dividers (`{components.divider}`) slash full-width between major sections
- Asymmetric, poster-like hero compositions — oversized type pinned to an edge

### Whitespace Philosophy
- **Darkness as space**: Black emptiness IS the layout. Elements float in void.
- **Hard edges, no softening**: Separation comes from hairline borders and the red slash, never shadow.
- **Type as image**: The headline often is the hero — no decorative imagery needed.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — buttons, cards, inputs, badges |
| `hair` | 1px | Hairline border weight |
| `pill` | 9999px | Reserved (rarely used; system favors hard rectangles) |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Blood red fill, white uppercase wide-tracked label, hard rectangle. Hover deepens to `{colors.primary-deep}`.
- **`button-ghost`** — Transparent on black with a white 1px outline; hover inverts to white fill / black text.

### Badges
- **`badge`** — Red rectangle, white eyebrow text, no radius. Marks featured/sold-out/date status.

### Cards
- **`card`** — Near-black surface with a hairline border, hard corners.
- **`card-event`** — Raised surface for program/event listings; condensed uppercase title.

### Inputs
- **`input`** — Near-black field, strong border, square corners. Focus turns the border red (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Black bar, uppercase wide-tracked links, hairline bottom border.

### Dividers
- **`divider`** — A 2px full-width red rule used as the signature structural slash.

## Do's and Don'ts

### Do
- Keep the canvas true black (`{colors.background}`) and use red scarcely and functionally
- Use condensed uppercase display type with sub-1.0 line-height
- Use hard rectangles everywhere — `{rounded.none}` is the rule
- Widen tracking on labels and buttons, tighten on display headlines
- Use the red 2px divider as a structural element
- Keep body copy neutral so red and display type carry the voice

### Don't
- Don't round corners — no `{rounded.pill}` on buttons or cards
- Don't use red as a background wash or decorative fill — it marks action/emphasis only
- Don't add gradients or soft drop shadows — depth is hairlines and surface steps
- Don't set display type at sentence case or positive line-height
- Don't introduce a second accent color — red is the only color that survives the dark
- Don't soften the black to charcoal in primary canvas areas

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero display scales down but stays towering |
| Tablet | 600–1024px | 2-column program grids |
| Desktop | 1024–1400px | Full poster layouts, max content width |
| Large | >1400px | Centered, generous black margins |

### Collapsing Strategy
- Hero display: 96px → ~48px on mobile, line-height stays below 1.0
- Navigation: uppercase links → hamburger
- Event grid: multi-column → single column hard-edged cards
- Red dividers persist at all sizes as full-width slashes

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Black `{colors.background}`
- Heading/body text: White `{colors.ink}`
- Accent / CTA / divider: Blood Red `{colors.primary}`
- Border: `{colors.border}`
- Focus: Red `{colors.primary}`

### Example Component Prompts
- "Create a hero on pure black. Headline in condensed uppercase (Anton/Oswald), 96px, line-height 0.92, letter-spacing -1px, white. Below it a blood-red rectangular CTA (`{colors.primary}`, white uppercase 14px +2px tracking, 16px 32px padding, zero radius)."
- "Design an event card: near-black surface (`{colors.surface-raised}`), 1px border (`{colors.border-strong}`), zero radius, condensed uppercase title 32px white, date in muted gray, a small red badge top-left."
- "Build a section divider: a 2px full-width blood-red rule (`{colors.primary}`) with 120px of black space above and below."

### Iteration Guide
1. Black canvas, white type, one red — never a second accent
2. Hard rectangles only; reject every rounded corner
3. Condensed uppercase display with line-height under 1.0
4. Tracking widens as size shrinks (labels +2px), tightens at display
5. Red marks action and structure (CTA, divider, badge), never decoration

---

## 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 Dark Mofo. Brand names and trademarks belong to their respective owners.