Festival Violet
#340068Full-bleed section bands, secondary filled CTA, footer background — heavy, immersive, sets the serious stage
Transform
transformfestival.orgWebsite preview
The design language
Transform uses a theatrical broadside language: a warm blush cream canvas carries the entire site while oversized geometric headlines shout in heavy Walsheim weights. The palette is intentionally limited to three loud accents — spotlight magenta, festival violet, and stage orange — deployed like a punk poster printer's ink set, each one earning its place on a flat, unshadowed surface. Depth comes from full-bleed color blocking, not elevation, so sections read like clipped broadsheets stacked on warm paper. Components are weighty and rectangular; only links and a few interactive chips receive the 50px pill radius, making them feel like stickers pressed onto the page. Typography does the emotional work: weight 700–900 at 56–80px carries theatrical volume, while tight -0.02em tracking keeps the heavy forms from sprawling.
Color palette
brand
Spotlight Magenta
#fb00c2Primary filled CTA (DONATE), pull-quote text, heading borders, interactive emphasis — the loudest ink, reserved for moments that demand attention
accent
Curtain Orange
#ff1e00Pull-quote attribution, decorative heading borders — the warm third color that gives the palette a poster-like three-ink depth
neutral
Blush Cardstock
#f4ede9Page background, nav surface, dominant canvas — the warm paper everything sits on
Ink Black
#000000Primary text, section headings, hairline borders, icon strokes
Paper White
#ffffffCard surface, dark-section text, button labels on chromatic fills
Ash Gray
#d9d9d9Alternate card surface when a quieter neutral block is needed
Steel Gray
#767676Muted input borders, secondary helper strokes
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
80px · 800 · 1 · -1.6px trackingThe quick brown fox jumps
heading-lg
56px · 800 · 1.1 · -1.12px trackingThe quick brown fox jumps
heading
40px · 800 · 1.2 · -0.8px trackingThe quick brown fox jumps
heading-sm
24px · 900 · 1.38 · -0.48px trackingThe quick brown fox jumps
subheading
22px · 800 · 1.38 · -0.44px trackingThe quick brown fox jumps
body
18px · 400 · 1.45 · -0.36px trackingThe quick brown fox jumps
body-sm
16px · 400 · 1.45 · -0.32px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Walsheim
- Weights
- 400, 700, 800, 900
- Sizes
- 16px, 18px, 22px, 24px, 40px, 56px, 80px
- Line height
- 1.00–1.45 (tight on display, generous on body)
- Letter spacing
- -0.02em across all sizes — tight tracking prevents the heavy weights from feeling slab-like and keeps body text compact
- Fallback
- Plus Jakarta Sans or Inter for the closest freely available geometric sans with comparable weight range; DM Sans as a fallback
Single-family type system used for everything from nav to display; the broad weight range (400–900) carries the entire tonal system so color never has to shout alone
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 16px
- Element gap
- 16px
Border radius
tags
50pxcards
0pxlinks
50pxinputs
0pxbuttons
0pxSpacing scale
1px2px3px8px16px20px24px32px36px40px48px56px80px120pxGuidelines
Do
- Use Walsheim 700–900 for all headings and display text — never below 700, the heavy weight is the brand's voice
- Use 50px border-radius only on pill chips and link tags, and 0px on everything else — the radius dichotomy is intentional
- Use -0.02em tracking across every size; do not relax it on display headlines
- Anchor the page on the Blush Cardstock (#f4ede9) canvas; let dark sections earn their place as full-bleed bands
- Reserve Spotlight Magenta (#fb00c2) for primary CTAs and editorial emphasis; never use it as a passive background
- Keep the palette to three chromatic accents plus the cream/black/white neutrals; resist adding more colors
- Use full-bleed photographs as section backgrounds with no gradient overlay or border
Don’t
- Do not introduce shadows, glows, or blur effects — depth is built through flat color, not elevation
- Do not use thin or light weights (under 700) for headings or display text
- Do not round cards, buttons, or images — only pills get radius
- Do not use Curtain Orange (#ff1e00) for buttons or CTAs — it is a decorative editorial accent only
- Do not place content directly on Spotlight Magenta or Festival Violet without testing contrast; always use Paper White for text on these surfaces
- Do not stack more than two chromatic accents in one component — the palette relies on restraint
- Do not use gradients — no gradient tokens exist and the system is deliberately flat
Components
Primary Magenta CTA
Donate and other high-priority filled action buttonsFilled rectangle in Spotlight Magenta (#fb00c2), white (#ffffff) label, no radius (0px), 8px vertical / 16px horizontal padding, Walsheim 700–800 uppercase at 16–18px. Sits on cream or dark sections; the saturated fill against neutral surroundings is the primary visual trigger.
Secondary Violet CTA
Lower-priority filled action, event recaps, dark-band call-to-actionFilled rectangle in Festival Violet (#340068), white label, 0px radius, 8px / 16px padding, Walsheim 700–800 uppercase. Used when the page context is already light and a second weighty action is needed without repeating the magenta voice.
Ghost Navigation Link
Primary nav items, inline text linksBlack (#000000) text on cream, Walsheim 700 at 16–18px, no underline by default, 50px border-radius reserved for chip/tag treatment. When used as a chip/badge, wraps in a hairline border with the same 50px pill radius.
Header Bar
Persistent top navigation across all pagesFull-bleed Blush Cardstock (#f4ede9) bar, wordmark 'TRANSFORM' left in Walsheim 800–900 uppercase, nav items inline, DONATE button and outlined social icons right. Vertical padding 8–16px, no shadow, no border.
Hero Stage Panel
Above-the-fold performance introductionFull-bleed dark stage photograph as background, left-aligned display headline at 56–80px Walsheim 800–900 in Paper White, sub-line in smaller white body weight, dark violet secondary CTA anchored bottom-left. No gradient overlay; the photograph itself provides the tonal floor.
Pull-Quote Band
Editorial testimonials, press quotes, voice-of-the-festival momentsFull-bleed Festival Violet (#340068) section, left-aligned display-size pull quote in Spotlight Magenta (#fb00c2) at 40–56px Walsheim 700, attribution on a new line in Curtain Orange (#ff1e00) at 22–24px. Carousel pagination dots below in magenta/white.
Section Heading Block
Introduces news, archive, programme, and content gridsCentered display heading in Ink Black, Walsheim 800–900 at 40–56px, single line where possible. Sits on Blush Cardstock with 48–80px vertical breathing room above and below. No underline, no decoration — the weight and size carry the emphasis.
News Card
Editorial card in content grids (news, opportunities, archive)Top-anchored photograph fills the card, title and meta sit on Paper White (#ffffff) or Ash Gray (#d9d9d9) below the image, 0px radius, no border, no shadow. Grid: 4 columns on desktop, 2 on tablet, 1 on mobile, 16px column gap.
Input Field
Newsletter, search, and form fieldsInk Black (#000000) text on Paper White, 1px solid Steel Gray (#767676) border, 0px radius, 1px vertical / 2px horizontal padding shown in raw data but typical 12–16px effective padding, Walsheim 400 at 16px. Focus state thickens border to 2px in Ink Black.
Outlined Social Icon
Instagram, Facebook, ticket-link icons in header and footerSquare or circular outlined glyph in Ink Black (header) or Paper White (footer), ~20–24px box, 1.5–2px stroke, no fill. Sits inline with nav items.
Page Footer
Site-wide closing bandFull-bleed Festival Violet (#340068) background, Paper White text and links, generous 48–80px vertical padding, multi-column layout for addresses, social, and legal. The dark band visually seals the page against the warm cream body.
Pill Link Chip
Tag, category, or filterable inline link50px border-radius pill, Ink Black 1px border on Blush Cardstock fill, Walsheim 700 at 16px, 8px vertical / 16px horizontal padding. The only place 50px radius appears — it signals 'clickable' without needing color.
Surfaces & elevation
Level 1
Blush Cardstock
#f4ede9Default page canvas and nav surface
Level 2
Paper White
#ffffffCard body, button labels on chromatic fills
Level 3
Ash Gray
#d9d9d9Alternate card surface for quieter content blocks
Level 4
Curtain Orange
#ff1e00Section-band accent (rare, used decoratively)
Level 5
Spotlight Magenta
#fb00c2Section-band accent for editorial emphasis
Level 6
Festival Violet
#340068Full-bleed dark bands, footer, immersive sections
No shadows detected and no elevation token is used. Depth is built entirely through flat color blocking — full-bleed sections, contrasted band backgrounds, and saturated fills against the warm cream canvas. Components sit on the surface like clipped paper, never floating.
Layout & imagery
Layout
Full-bleed sections stacked vertically with no container constraint at the section level — each band fills the viewport width. Within bands, content is max-width 1200px centered. The page opens with a full-viewport dark photo hero with left-aligned display headline, then alternates between Blush Cardstock and Festival Violet full-bleed bands. Editorial rhythm: hero → cream grid → violet quote band → cream news grid → violet footer. Card grids use 4 columns at desktop collapsing to 2 then 1. Vertical rhythm is generous: 48–80px between sections, 16px between elements within a card. Navigation is a single top bar with a wordmark, inline links, and a right-aligned magenta CTA plus outlined social icons.
Imagery
Photography is the dominant visual language: large, atmospheric performance shots captured during live shows — stage lighting, audience silhouettes, dancers mid-motion. Images are treated full-bleed with no border, no rounding, and no overlay gradient; the raw photograph is the section. Subjects are stage-focused, high-contrast, often darker and warmer than the page, creating natural visual contrast against the blush canvas. There is no illustration system; the only graphic elements are outlined social icons.
Design notes
Agent Guide
Quick Color Reference: - text: #000000 - background: #f4ede9 - border: #000000 - accent: #fb00c2 - primary action: #fb00c2 (filled action) - dark band: #340068 - editorial accent: #ff1e00 Example Component Prompts: 1. Create a primary donate button: filled Spotlight Magenta (#fb00c2) background, Paper White (#ffffff) label, Walsheim 800 uppercase at 18px, 8px vertical padding, 16px horizontal padding, 0px border-radius. 2. Create a pull-quote band: full-bleed Festival Violet (#340068) background, left-aligned display quote in Spotlight Magenta (#fb00c2) at 56px Walsheim 700 with -1.12px tracking, attribution below in Curtain Orange (#ff1e00) at 24px Walsheim 700, 80px vertical padding. 3. Create a news card: top-anchored full-bleed photograph, 0px border-radius, Paper White (#ffffff) body below, title in Ink Black (#000000) at 22px Walsheim 700 with -0.44px tracking, 16px internal padding. 4. Create a header bar: Blush Cardstock (#f4ede9) background, wordmark 'TRANSFORM' in Walsheim 900 at 24px uppercase in Ink Black, nav links inline in Walsheim 700 at 18px, magenta DONATE button right-aligned, outlined social icons after it. 5. Create a section heading: centered Ink Black (#000000) text in Walsheim 900 at 56px with -1.12px tracking, 80px vertical breathing room above and below, single line, no decoration.
Color Pairing Rules
The three chromatic accents are designed to work as a three-ink poster set, not as independent UI states. Use them in this hierarchy: Festival Violet for full-bleed immersive bands (footer, quote, feature sections), Spotlight Magenta for the single loudest moment per page (one CTA, one pull-quote, one emphasis), Curtain Orange as a decorative third — almost always a single word or attribution, never a full component. Never combine all three in the same component; two maximum, and only when one is acting as a foreground accent against the other as background.
Similar brands
Barbican Centre
Performing arts venue using oversized geometric sans-serif headlines, flat color blocking, and dark photographic hero panels with no gradient overlays
ICA London
Contemporary arts institution combining a warm cream canvas with bold magenta-pink accents and heavy display type
Bold Italic
Editorial publication with a blush cream background, saturated three-color accent palette, and flat unshadowed components
Haus der Kunst
Cultural venue using heavy display typography on warm neutral surfaces with full-bleed photographic sections
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
