Cirque du Soleil

Overview

Cirque du Soleil's design system embodies **Theatrical Maximalism**—a bold, high-contrast aesthetic that channels the spectacle and wonder of live performance into digital form. The brand serves audiences seeking transformative entertainment experiences, and the UI reflects this through a deliberate interplay of deep blacks (#000000) and luminous golds (#dca85d, #f2e7bb), punctuated by electric purples (#6349e9) that evoke artistic innovation and magic. The emotional response is one of anticipation and awe: users should feel the electricity of a live show the moment they land on the site.

The voice is confident, invitational, and never apologetic. Cirque speaks in the language of wonder and transformation—precise about logistics (show times, ticket tiers, venue details) but poetic about the experience itself. Vocabulary leans theatrical: "immerse," "transcend," "witness," "transform." The tone avoids hype-speak; instead, it trusts the brand's visual power and lets the spectacle speak. Example: "Experience acrobatics that defy gravity. Witness artistry that rewires your sense of possibility."

Colors

The color palette is built on **high-contrast theatrical drama**. Primary (#dca85d, a warm burnished gold) is the signature accent—used on all call-to-action buttons, key links, and interactive highlights. It commands attention against the black background and signals luxury and prestige. Secondary (#6349e9, a vivid purple) serves as the innovation accent, used for secondary CTAs, badges, and accent highlights that suggest artistic transformation. Tertiary (#f8d248, a bright yellow) is reserved for highlights and promotional badges, adding energy without competing with primary.

The surface stack is anchored in pure black (#000000) for maximum contrast and theatrical depth. Surface-container (#191a1a) and surface-container-high (#282828) provide subtle elevation for cards and panels, creat

Typography

The type system pairs **Clash Display** (a bold, geometric display typeface) for headlines and hero copy with **Cds Sans** (a clean, modern sans-serif) for body and UI text. This pairing creates visual drama: Clash Display's angular, theatrical presence commands attention in headlines (display: 72px, font-weight: 700, line-height: 84px, letter-spacing: -0.03em), while Cds Sans provides clarity and accessibility in body copy (body-md: 16px, font-weight: 400, line-height: 24px, letter-spacing: 0.01em).

Headline hierarchy is strict: display (72px) for hero titles, headline-lg (48px) for section headers, headline-md (36px) for subsections, and title-lg (24px) for card titles. All headlines use Clash Display at font-weight 700 with negative letter-spacing (-0.01em to -0.03em) to tighten the le

Layout

The layout system uses a **12-column fluid grid** with a maximum container width of 1440px, maintaining flexibility on mobile (100vw with 24px horizontal gutters) and desktop. The spacing scale is semantic: unit (8px) is the base increment, with sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for full-page rhythm. Gutter width is consistently 24px on desktop, reducing to 16px on mobile (max-width: 600px).

White-space philosophy prioritizes **breathing room and visual focus**. Hero sections use lg spacing (40px) above and below to isolate them from adjacent content. Card grids use md spacing (24px) between items. Padding inside cards is consistently md (24px) on desktop, sm (12px) on mobile. Section containers maint

Elevation & Depth

Depth in Cirque's system is achieved through **layered contrast and subtle shadows**, not through blur or glassmorphism. The elevation scale uses three levels: Level 1 (Base) is the pure black background (#000000) with no shadow. Level 2 (Standard Cards) uses box-shadow: 0px 3px 6px rgba(27, 27, 27, 0.2), a soft shadow that lifts cards 4px off the surface, with a 6px blur radius for softness. Level 3 (Elevated/Modals) uses box-shadow: 0 4px 12px rgba(27, 27, 27, 0.25), creating a more pronounced lift (8px) with greater blur (12px) for modals, overlays, and sticky elements.

Hover states transi

Shapes

The shape language is **Architectural Precision**—sharp, intentional corners that reflect the geometric rigor of theatrical design and acrobatic movement. Border-radius follows a strict scale: sm (4px) for small UI elements like badges and inline buttons, DEFAULT (8px) for inputs and small cards, md (12px) for medium components, lg (16px) for primary cards and buttons, xl (24px) for large containers and modals, and full (9999px) for pill-shaped elements (badges, toggle buttons).

Buttons use lg (16px) radius, creating a subtle softness that feels premium without sacrificing the sharp, modern a

Components

Action Elements Buttons are the primary interactive currency. **Button-primary** uses background: {colors.primary} (#dca85d), text-color: {colors.on-primary} (#1b1b1b), padding: 12px 32px, height: 48px, border-radius: 16px, font-weight: 600, and no border. On hover, background shifts to #e8b86a (10% lighter) with transition: background-color 200ms ease-out. On focus, add box-shadow: 0 0 0 3px rgba(220, 168, 93, 0.1) for keyboard navigation. **Button-secondary** uses background: {colors.secondary} (#6349e9), text-color: {colors.on-secondary} (#f2e7bb), same padding/height/radius, with hover state shifting to #7959ff. **Button-ghost** uses transparent background, 2px solid border in primary gold, text-color: {colors.primary}, and on hover, background: rgba(220, 168, 93, 0.1) with transit

Do's and Don'ts

**Do**

• Do use primary gold (#dca85d) exclusively for primary CTAs and key interactive elements—it's the brand's signature accent and must remain distinctive.
• Do maintain high contrast: on-surface text (#f2e7bb) on black (#000000) backgrounds ensures readability and luxury. Never use pure white or near-white text.
• Do apply consistent padding (md: 24px on desktop, sm: 12px on mobile) inside cards and containers to create breathing room and prevent visual clutter.
• Do use Clash Display for all headlines (display, headline-lg, headline-md) to establish theatrical presence; reserve Cds Sans for body, labels, and UI text.
• Do transition all interactive states (hover, focus, active) over 150ms–200ms with ease-out timing to feel responsive and polished.
• Do use the full 12-column grid and respect the 1440px max-width container to maintain visual consistency across all breakpoints.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; use #f2e7bb for on-surface text and #1b1b1b for on-primary text to maintain the brand's sophisticated palette.
• Don't apply border-radius exceeding 24px except for full-radius elements (badges, toggles); excessive rounding dilutes the architectural precision of the brand.
• Don't mix Clash Display and Cds Sans within a single headline or body paragraph; maintain clear typographic hierarchy by using Clash Display for headlines only.
• Don't use secondary purple (#6349e9) or tertiary yellow (#f8d248) as primary CTAs; reserve primary gold (#dca85d) for the most important actions to maintain visual hierarchy.
• Don't apply shadows exceeding 12px blur radius; keep elevation subtle and theatrical, not soft or diffuse.
• Don't override the spacing scale (unit: 8px, sm: 12px, md: 24px, lg: 40px, xl: 64px) with arbitrary values; consistency across all pages is critical to the brand's cohesion.