---
name: Config Figma
description: "Worth including for its strong, confident use of experimental graphic design paired with a highly functional, accessible dark mode UI."
version: alpha

colors:
  background: "#000000"
  primary: "#E2E2E2"
  neutral: "#E2E2E2"
  line: "rgba(255, 255, 255, 0.24)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 80px
    lineHeight: 0.95
    fontWeight: 400
    letterSpacing: "-2.4px"
  h1:
    fontFamily: grotesque-sans
    fontSize: 32px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.96px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

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

---

## Overview

A bold, experimental conference event site featuring playful abstract art and high-contrast dark mode.

*A playful, experimental design conference site using bold typography and high-contrast abstract art.*

## Colors

High-contrast dark mode foundation with vibrant, saturated graphic accents.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#E2E2E2`)** — uses `ink` token
- **Muted (`#E2E2E2`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.24)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

- Text is generally uppercase in navigation and UI elements.
- Heavy negative letter-spacing is applied to larger text sizes.

## Layout

Left-aligned textual content paired with right-aligned abstract graphic compositions.

*Rhythm:* Consistent use of a 4px base unit for padding and gaps.

## Elevation & Depth

- Borders: 1px solid rgba(255, 255, 255, 0.24) for interactive borders.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Uppercase text links with 1px borders, or solid inverted buttons.
- **card:** Overlapping abstract graphic blocks used as decorative elements.
- **chip:** Text-based navigation links with uppercase styling.
- **input:** Minimal, flat text inputs (not heavily featured).
- **hero:** Split layout with large typographic error message on the left and stacked abstract art on the right.

## Do's and Don'ts

**Don't:**
- Don't use soft, muted palettes — screenshot shows a high-contrast black background with vibrant cyan, green, orange, and yellow graphics.
- Don't use serif or decorative fonts — screenshot shows a clean, geometric grotesque-sans typography.
- Don't use soft drop shadows — screenshot shows flat, overlapping graphic elements without depth effects.
- Don't use lowercase for navigation — screenshot shows all uppercase text for menu items like AGENDA and SPEAKERS.
- Don't center all content — screenshot shows a left-aligned text layout paired with right-aligned graphics.
- Don't use complex, multi-step forms — screenshot shows minimal, direct text links and buttons.

---

## System Prompt (paste into AI agent)

```
This is a bold, experimental event website for Figma's Config conference. It features a stark black background (#000000) with clean white or light gray text (#E2E2E2). The typography is a geometric grotesque-sans, used at very large scales with tight tracking and often uppercase. The design language is defined by high-contrast, flat, abstract graphic compositions in vibrant cyan, green, orange, and yellow. Critical constraints: avoid serif fonts, avoid soft muted palettes, and avoid complex drop shadows. Keep interactions smooth with 150ms transitions.
```