# Config Figma · Design system migration spec

> Source: https://config.figma.com/events/figma-config-2022  ·  Curated by OpenDesign  ·  en

> Worth including for its strong, confident use of experimental graphic design paired with a highly functional, accessible dark mode UI.

## 1. Identity DNA

The Config 2022 site operates like a well-lit workshop: the black background is the workbench, the vibrant graphics are the active experiments, and the bold type is the clear instruction. Every element is positioned with purpose, creating a space that feels both experimental and immediately usable.

**One-liner:** A bold, experimental conference event site featuring playful abstract art and high-contrast dark mode.
**Keywords:** Config · Figma · Event · 404 · Experimental · Playful · Bold
**Analogy:** A playful, experimental design conference site using bold typography and high-contrast abstract art.

## 2. Color

The palette is a study in controlled contrast, built on a foundation of pure black and light gray. Against this neutral field, saturated bursts of cyan, green, orange, and yellow act as graphic signals, not just decoration.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#E2E2E2` | body text |
| `--muted` | `#E2E2E2` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.24)` | divider |

**Color principle:** High-contrast dark mode foundation with vibrant, saturated graphic accents.

The core principle is high-contrast legibility: color serves as a functional highlight within a stark, accessible dark mode.

## 3. Typography

Typography is the primary structural element, employing a geometric grotesque-sans at massive scales. The rules are deliberate: uppercase for interface clarity, and tight, negative letter-spacing on large text to create dense, impactful blocks of information.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 0.95 | 400 | -2.4px | Large hero statements |
| h1 | 32px | 1.0 | 400 | -0.96px | Section headers |

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

## 4. Spacing

All spacing adheres to a strict 4px grid, creating a consistent, mechanical rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent use of a 4px base unit for padding and gaps.

## 5. Surfaces

Depth is communicated through flat, overlapping graphic planes rather than shadows or gradients. The sole border treatment is a subtle 1px line, defining interactive areas without adding visual weight.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid rgba(255, 255, 255, 0.24) for interactive borders.

## 6. Layout

The layout follows a clear split-composition: a strong left-aligned textual column is balanced by abstract, right-aligned graphic assemblies. This creates a dynamic tension between information and visual exploration.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is precise and purposeful, never performative. Standard interface elements use fast, 150ms transitions, while more complex transforms are given a longer 500ms duration to feel substantial but not sluggish.

- **Durations:** micro 150ms · small 500ms · medium 800ms
- **Easing:** `cubic-bezier(0.6, 0, 0.4, 1)`
- **Patterns:**
  - Smooth 150ms transitions for standard color and background changes.
  - Longer 500ms transform transitions for complex elements.

- **Hover:** Color changes via standard CSS transitions.
- **Click:** Standard pointer interaction.
- **Transition:** 150ms cubic-bezier(0.6, 0, 0.4, 1) applied to color, background, and border properties.
- **Keyboard:** Standard focus rings, likely matching the border color.

## 8. Voice & Don'ts

The editorial voice is direct and unpretentious, matching the UI's functional clarity. Headlines are large, uppercase statements, and calls to action are clean text links, often framed with a border.

- **Tone:** Direct, clear, and unpretentious.
- **Headline style:** Large, uppercase, or heavily weighted sans-serif statements.
- **CTA style:** Uppercase text links, often bordered.
- **Avoid:** Fluffy marketing copy / Overly complex sentence structures / Serif typography

### Don'ts
- ❌ 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.

The system deliberately excludes serif typography, soft muted palettes, and drop shadows, committing fully to its high-contrast, flat graphic language.

## System Prompt (paste into AI tool)

```
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.
```