# Transformfestival · Design system migration spec

> Source: https://transformfestival.org  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of using bold typography and high-quality photography to create a powerful, immersive brand identity for an arts organization.

## 1. Identity DNA

The identity of Transformfestival is constructed at the intersection of two powerful formats: the immediate impact of a bold theatrical poster and the considered structure of a clean editorial magazine. This system prioritizes high-contrast visuals and typographic weight to create a distinct, authoritative presence for an international arts organization.

**One-liner:** An international performance arts festival with bold editorial typography and cinematic photography.
**Keywords:** Performance · Festival · Art · International · Community
**Analogy:** A bold theatrical poster meets a clean editorial magazine.

## 2. Color

The color system is built on a principle of high contrast, using a deep black ink set against a warm, slightly off-white canvas. A single electric pink accent punctuates the palette for primary actions and calls to attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F4EDE9` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#767676` | placeholder |
| `--accent` | `#FB00C2` | single accent |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High contrast: deep black ink on a warm, slightly off-white canvas, punctuated by a single electric pink accent.

The palette's restraint ensures that the vibrant accent color and powerful imagery remain the focal points without competition.

## 3. Typography

Typography serves as the primary structural voice, utilizing a clean, geometric sans-serif category for its clarity and modern presence. The system employs heavy weights for display headlines and maintains high weight contrast against body text to establish clear hierarchy.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 900 | -1.12px | Hero headlines |
| heading | 56px | 1.1 | 800 | -1px | Section headings and large statements |
| subhead | 24px | 1.2 | 800 | -0.36px | Card titles and labels |
| body | 18px | 1.45 | 400 | -0.36px | Paragraph text |

**Type rules:**
- Use uppercase for strong emphasis and navigation links.
- Tight tracking for large display text to maintain impact.
- Maintain high weight contrast between display and body text.

## 4. Spacing

A consistent vertical rhythm is established through the systematic application of padding and gap multiples, creating a clear, navigable flow down the page.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 px
- **Rhythm:** A clear vertical rhythm established through consistent padding and gap multiples.

## 5. Surfaces

Surface treatment is defined by minimal borders and restrained shadow application, allowing strong typography and photographic contrast to delineate content areas. Depth is communicated through a single, soft shadow value rather than complex layering.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - 0 4px 24px rgba(0, 0, 0, 0.1)
- **Borders:** Minimal use of borders, relying primarily on strong typography and image contrast for separation.

## 6. Layout

The layout skeleton begins with a full-bleed hero section designed for cinematic photography. This flows into a multi-column card grid for content, which then transitions into bold, full-width typographic sections.

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

**Skeleton:** A full-width hero followed by a multi-column card grid, leading into bold typographic sections.

## 7. Motion & Interaction

Motion philosophy is one of understatement, using smooth color transitions and subtle transforms to provide feedback without distracting from the core content. All interactive animations are consistently timed to create a seamless, functional experience.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color transitions on interactive elements.
  - Subtle transforms on hover for buttons and cards.

- **Hover:** Immediate color inversion or background shift on buttons and links.
- **Click:** A slight transform or scale effect provides tactile feedback.
- **Transition:** Consistent 0.3s transitions for background and text color changes.
- **Keyboard:** Focus states are likely high-contrast outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, impactful, and direct, mirroring the system's visual boldness. Headlines are short, powerful statements, and calls to action are clear, uppercase commands.

- **Tone:** Confident, impactful, and direct.
- **Headline style:** Short, powerful statements set in massive, heavy typography.
- **CTA style:** Clear, uppercase commands that stand out against the background.
- **Avoid:** Vague language / Subtle or decorative elements / Low-contrast color combinations

### Don'ts
- ❌ Don't use rounded corners on primary UI elements — the screenshot shows sharp, rectangular shapes.
- ❌ Don't use multiple competing accent colors — the screenshot shows a clear hierarchy dominated by pink and purple.
- ❌ Don't use light, thin font weights for headlines — the screenshot shows exclusively heavy, bold weights.
- ❌ Don't use sans-serif fonts with wide or irregular proportions — the screenshot shows a very geometric, tight typeface.
- ❌ Don't use complex, multi-layered shadows — the screenshot relies on flat color and sharp edges for definition.
- ❌ Don't use gray as a primary background — the screenshot shows a warm, off-white (#F4EDE9) instead.

The system deliberately excludes rounded corners, multiple competing accent colors, and light or decorative font weights.

## System Prompt (paste into AI tool)

```
This is a bold editorial and event website for an international performance arts festival. The design is dominated by massive, heavy-weight typography in black (#000000) set against a warm off-white background (#F4EDE9). A vibrant electric pink (#FB00C2) serves as the primary accent for calls to action, while a deep purple (#340068) is used for large background blocks and secondary buttons. The typography is a clean, geometric sans-serif used in both uppercase and sentence case. Layouts are generous, utilizing full-bleed cinematic photography and a clean 4-column grid for content. Critical constraints: avoid rounded corners on buttons, avoid using multiple competing bright accent colors, and avoid using light or decorative font weights.
```