---
title: "Transform design system"
variant: extended
source: https://transformfestival.org/
captured_at: 2026-10-12
theme: light
industry: entertainment
generator: Design DNA (https://four.wiralomi.com/style/transformfestival-org)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Transform · Design System

> Bold performance culture, staged in vivid contrast

**Theme:** light · **Industry:** entertainment · **Source:** https://transformfestival.org/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Transform’s homepage pairs theatrical performance imagery with oversized, heavy typography and saturated purple sections. A warm pale canvas and sharp pink and red accents carry the identity from the hero through news, contact, and mailing-list content.

## North star

Pair oversized, confident typography and theatrical photography with disciplined blocks of warm canvas, deep purple, and vivid accent colour.

## Overview

The page opens with full-bleed performance photography: the dim, warm-toned image sets a theatrical mood, while a very large white headline sits directly over it for immediate contrast. The Walsheim sans-serif family is used throughout, with display and heading styles set especially heavy and compact; the navigation and body copy remain much quieter. Pale warm canvas sections break up deep purple bands, while bright pink marks the donation and signup actions and red appears in testimonial emphasis and news-card headlines. News is arranged as a centered four-column card row, then the contact and mailing-list content returns to a full-width purple field. Spacing is comfortable rather than dense, with clear section breaks and generous breathing room around headings. The visual language stays flat and graphic: square-edged cards and buttons, minimal borders, no measured shadows, and imagery doing most of the atmospheric work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#f4ede9` | `--color-warm-canvas` | surface | Primary light section background, including the news area and final footer; also used for light navigation text. |
| Electric Pink | `#fb00c2` | `--color-electric-pink` | accent | Donation and signup buttons, carousel emphasis, and selected text accents. |
| Stage Black | `#000000` | `--color-stage-black` | neutral | Main text and navigation contrast; also appears in the dark hero photograph and bottom donation strip. |
| Festival Violet | `#340068` | `--color-festival-violet` | brand | Quote band, contact area, and newsletter background; also used for the report CTA. |
| Signal Red | `#ff1e00` | `--color-signal-red` | accent | Emphasizes testimonial attribution and selected news-card headlines. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Headline and button text on dark backgrounds, and the news-card surfaces. |
| Control Gray | `#767676` | `--color-control-gray` | semantic | Measured input-field border; not a prominent decorative colour elsewhere. |
| Media Gray | `#d9d9d9` | `--color-media-gray` | semantic | Appears in media surfaces; secondary to the page’s photographic imagery and core brand palette. |

### Semantic aliases

`--color-canvas` → `#f4ede9` (Warm Canvas) · `--color-surface` → `#000000` (Stage Black) · `--color-surface-2` → `#d9d9d9` (Media Gray) · `--color-surface-3` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Stage Black) · `--color-text-muted` → `#f4ede9` (Warm Canvas) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#767676` (Control Gray) · `--color-accent` → `#fb00c2` (Electric Pink) · `--color-accent-2` → `#ff1e00` (Signal Red) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f4ede9` | 18.14:1 | AAA |
| `#000000` | `#d9d9d9` | 14.88:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#f4ede9` | `#000000` | 18.14:1 | AAA |
| `#f4ede9` | `#d9d9d9` | 1.22:1 | fail |
| `#f4ede9` | `#ffffff` | 1.16:1 | fail |
| `#ffffff` | `#f4ede9` | 1.16:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#d9d9d9` | 1.41:1 | fail |
| `#fb00c2` | `#f4ede9` | 3.08:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Walsheim | `--font-body` | webfont | 400, 800, 900, 700 | Site-wide typeface for hero and section headings, body copy, navigation, buttons, and form text. | DM Sans |

- **Walsheim:** Use heavy weights for display and headings; headings often have tight negative tracking, while selected labels are uppercase.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 800 | 1 | 0 | — | Walsheim | Oversized hero or brand display lettering. |
| h1 | 56px | 800 | 1.1 | -0.02em | — | Walsheim | Primary hero headline and major page titles. |
| h2 | 40px | 800 | 1.1 | -0.02em | — | Walsheim | Section titles such as Latest news. |
| h3 | 24px | 900 | 1.2 | -0.02em | — | Walsheim | News-card titles and supporting content headings. |
| h4 | 22px | 800 | 1 | -0.02em | uppercase | Walsheim | Uppercase labels including CONTACT and PRESS. |
| body | 16px | 400 | 1.38 | 0 | — | Walsheim | News descriptions, supporting copy, and footer text. |
| button | 18px | 400 | 1.45 | 0 | — | Walsheim | Donation and report CTA labels. |
| nav | 16px | 400 | 1.38 | 0 | — | Walsheim | Header navigation and site links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 8, 15, 16, 20, 24, 30, 32, 40, 48, 56, 80, 120 px.
- Section rhythm 48px · element gap 16px · card padding 16px · max content width 1408px.

The page uses full-width horizontal section bands with content aligned to a broad centered frame. The hero is a single-column, full-bleed image composition with left-aligned text; the news area shifts to a centered four-column card grid. Contact details use two columns, followed by a centered newsletter form. Section changes are clear and spacious, with comfortable content density and strong alignment contrasts between left-led hero content and centered news and signup content.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat, using solid colour bands and square-edged cards rather than shadows. Strong contrast and full-width section backgrounds provide hierarchy. The hero creates its own depth through the low-light stage photograph, while card separation comes from spacing and pale surfaces instead of raised effects.

## Imagery

Photography anchors the page: a dark, warm-toned performance scene fills the hero, while news cards use documentary-style images of performers and participants. Some cards use bold purple graphic tiles with red lettering instead of photographs. Images are rectangular and prominent, with no visible decorative framing; the hero crop keeps the text legible over a darker area.

## Components

### Header navigation

Compact brand and link row over the hero, with pale text and a bright pink uppercase donation action.

### Hero

Full-bleed performance image with oversized bold white headline, edition announcement, and purple report CTA.

### Testimonial band

Full-width deep-purple section featuring oversized quote text, pink emphasis, red attribution, and carousel indicators.

### News cards

Four-column row on the warm canvas; rectangular image or graphic tile above bold red title, short copy, and a small circular arrow affordance.

### Contact block

Deep-purple area with a large centered Transform wordmark and two contact columns, using pink details.

### Mailing-list form

Centered signup content on purple with stacked pale inputs, consent text, and a bright pink uppercase submit action.

### Footer

A narrow black donation strip precedes a pale footer with compact links, partner marks, and legal copy.

### Measured component styles

- **Primary button** (“DONATE”): background #fb00c2 · text #ffffff · radius 0px · padding 8px · 800 18px Walsheim · uppercase
- **Secondary button** (“READ OUR 2025-26 BIENNIAL REPORT”): background #340068 · text #ffffff · radius 0px · padding 16px · 800 22px Walsheim · uppercase
- **Input** (“First Name”): background #f4ede9 · text #000000 · radius 0px · padding 16px · 400 18px Walsheim
- **Card** (“Transform’s 2025-2026 biennial report Ev”): background #ffffff · text #000000 · radius 0px · padding 16px · 400 18px Walsheim
- **Navigation item** (“TRANSFORM About Journal Opportunities Ar”): transparent background · text #f4ede9 · radius 0px · padding 0px · 400 18px Walsheim

## Do

- Use Walsheim or a close geometric sans-serif substitute consistently.
- Make hero and major section headings bold, large, and easy to scan.
- Use Festival Violet (#340068) for substantial content bands.
- Reserve Electric Pink (#fb00c2) for prominent actions and selected emphasis.
- Use full-width performance photography for the hero.
- Keep card edges and buttons visually flat and square.
- Preserve clear contrast between pale canvas and dark sections.

## Don't

- Do not add gradients or decorative shadows.
- Do not round card corners or primary rectangular buttons.
- Do not use a delicate serif style for headings.
- Do not replace the theatrical hero image with a generic illustration.
- Do not spread pink and red accents uniformly across every section.
- Do not compress the news cards into a dense text-only list.

## Agent prompt

Build a new Transform page in a bold, theatrical editorial style. Use Walsheim throughout, or DM Sans if unavailable; make major headlines very heavy and tightly tracked, with quieter body and navigation text. Set warm canvas (#f4ede9) against broad Festival Violet (#340068) bands. Use Electric Pink (#fb00c2) sparingly for primary actions and Signal Red (#ff1e00) for selected editorial emphasis. Lead with a full-bleed, low-light performance photograph and place large white type over a legible dark area. Organize supporting stories into a clean four-column card grid with rectangular imagery, bold titles, concise copy, and simple arrow affordances. Keep form controls stacked and clear. Prefer flat surfaces, square corners, strong section breaks, and comfortable spacing; avoid gradients, shadows, and ornamental decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed stage photography with left-aligned headline, edition line, and report CTA. | Primary navigation, Prominent report CTA | White display type, Pink donation action, Purple report button |
| 2 | testimonials | Full-width purple quote band with prominent quote and carousel indicators. | Quote carousel, Slide indicators | Pink quote text, Red attribution, Purple background |
| 3 | content-feed | Centered section heading above a four-column news-card grid on a pale canvas. | Browse latest stories, Card-level links | Rectangular image tiles, Bold red titles, Arrow affordances |
| 4 | contact | Deep-purple band with a centered wordmark above two contact columns. | Direct email links | Large white wordmark, Pink contact details |
| 5 | newsletter | Centered signup form within a full-width purple section. | Email signup, Consent acknowledgement | Stacked pale inputs, Pink submit button, Centered heading |
| 6 | footer | Narrow black donation strip followed by a pale footer with links, partner marks, and legal copy. | Footer navigation, Donation prompt | Black support strip, Pink donation action, Compact pale footer |

## Source CSS custom properties (selected)

```css
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
--cc-modal-border-radius: .5rem;
--cc-btn-border-radius: .4rem;
--cc-modal-transition-duration: .25s;
--cc-link-color: #30363c;
--cc-bg: #fff;
--cc-primary-color: #2c2f31;
--cc-secondary-color: #5e6266;
--cc-btn-primary-bg: #30363c;
--cc-btn-primary-color: #fff;
--cc-btn-primary-border-color: #30363c;
--cc-btn-primary-hover-bg: #000;
--cc-btn-primary-hover-color: #fff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/transformfestival-org