Chun Wai Chan

Reference

Design System

The editorial visual language behind every page — warm paper neutrals, a signature orange accent, and a serif/sans typographic pair.

Mood

Editorial, warm, and quietly cinematic. Paper-white surfaces, near-black ink, and a single orange accent — printed-program feel applied to the web.

Source
src/styles.css
Color space
oklch()
Radius scale
0.0625 / 0.125 / 0.25rem (architectural)
Mode
Light-only (dark theme defined but unused)
Color Tokens
--background
Background / Paper
oklch(0.985 0.005 80)
Page background
--foreground
Foreground / Ink
oklch(0.18 0.01 60)
Primary text
--primary
Primary (Orange)
oklch(0.68 0.16 48)
Brand accent, CTAs, rules
--primary-foreground
Primary Foreground
oklch(0.99 0.005 80)
Text on primary
--ink
Ink
oklch(0.16 0.008 60)
Near-black warm
--stone
Stone
oklch(0.129 0.042 264.695)
Eyebrow / muted body text
--mist
Mist
oklch(0.92 0.008 70)
Hairline dividers
--sand
Sand
oklch(0.88 0.025 70)
Warm beige surfaces
--secondary
Secondary
oklch(0.94 0.01 70)
Subtle surfaces, hovers
--muted
Muted
oklch(0.95 0.008 75)
Muted backgrounds
--muted-foreground
Muted Foreground
oklch(0.129 0.042 264.695)
Body / secondary text
--border
Border
oklch(0.9 0.008 70)
Borders & inputs
--ring
Ring
oklch(0.68 0.16 48)
Focus rings
Accent Rule
Accent Rule
.accent-rule · animated orange underline beneath text
Hairline Divider
bg-mist · 1px warm grey rule used to separate sections
Live Dot
.live-dot · pulsing orange dot for now-on-stage indicators

Try selecting this text to see the selection color.

Selection
Default browser selection — try selecting the text
Typography
Sans — Display & UI
Chun Wai
Chan
Family
Montserrat
Fallback
ui-sans-serif, system-ui
Weights
200, 300, 400, 500, 600, 700
CSS var
--font-sans
Utility
.display (weight 200, tight tracking)
Serif — Editorial Italics
Underneath there is light.
Family
Cormorant Garamond
Fallback
ui-serif, Georgia, serif
Weights
300, 400 (regular & italic)
CSS var
--font-serif
Utility
.italic-serif
H1 — Page title

Performances

.display · 4xl→6xl · weight 200 · tracking -0.02em
H2 — Section title

Selected Press

.display · 3xl→4xl · weight 200
Eyebrow
PRESS & RECOGNITION
.eyebrow · 0.68rem · uppercase · 0.32em tracking · stone
Eyebrow on dark
CHOREOGRAPHER
.eyebrow-overlay · warm light orange + text-shadow
Body — Lead

Principal Dancer, New York City Ballet. Guest artist, choreographer, cultural bridge.

text-base/lg · text-muted-foreground · leading-relaxed
UI Nav Link
.nav-link · 0.95rem · 0.24em tracking · uppercase, animated underline
Components & Motifs
SiteLayout

Top-level page frame composing Header + main + Footer, with optional overlay header for dark hero sections.

Used in
All routes
Frame
Header
main · {children}
Footer
PageIntro

Standard subpage hero: eyebrow, large display title, optional lead copy, optional sidebar image, optional belowText slot. Animates up on mount.

Used in
/performances/studio/choreography/collaboration/press/contact/design

Eyebrow

Page Title

Optional lead paragraph describing the section.

SplitSection

Two-column section pairing a portrait image on the left or right with a block of editorial copy. Image has Ken-Burns motion.

Used in
Long-form story sections

Section

Image + Copy

Triptych Panel

Three-up image grid with shared Ken-Burns animation, used on the home page. Each panel lifts and brightens on hover.

Used in
/ (home)
Movie-scroll Overlay

On hover, an opaque overlay scrolls performance details (title, choreographer, premiere, music, cast) up over the photo, like a film credit.

Used in
Performances grid
Apollo

Choreographer

George Balanchine

Premiere

November 27, 1951

On-Stage Card

Slide-in card announcing the next performance. Animates in from the left, holds, then slides out — drawing attention without blocking the hero.

Used in
/ (home hero)
On Stage

Apollo

George Balanchine

David H. Koch Theater

Full season
Press Quote

Pull quote in serif-italic with publication source. Tier-1 quotes also drive the rotating press carousel on the press page.

Used in
/press/ (PressCarousel)

“Princes can be Asian, too.”

— The New York Times
Performance Row

Date · production · venue, stacked under hairline rules. Used for season schedules and tour dates.

Used in
/performances/china-tour
JAN 29

The Wind-Up

Justin Peck

David H. Koch Theater
Tickets →
Outline Button

Minimalist letter-spaced outline button, used for primary CTAs (booking, contact, downloads). Inverts on hover.

Used in
/contact
Request booking
Header

Top-of-page navigation. Light variant available for overlaying dark hero imagery (.nav-link--light).

Used in
All routes
CWC
HOMEPERFORMANCESPRESSCONTACT
Footer

Four-column footer (brand + bio, Explore nav, Professional nav, Follow) with a bottom legal row including Privacy, Imprint, Credits, and Design.

Used in
All routes

Chun Wai Chan

Principal Dancer, NYCB

Explore

Performances
Studio
Media

Professional

Press & Awards
Brand
Booking

Follow

Instagram
YouTube
Animation
.animate-slide-up
Slides up
0.9s upward slide + fade. Used for page intros and section reveals.
.animate-fade-in-soft
Fades in
1.2s opacity fade for atmospheric content.
.animate-ken-burns
36s slow scale + drift on hero imagery. -fast variant runs in 14s.
.animate-marquee
NYTDance MagPointeAsia SocietyNYTDance Mag
60s linear horizontal scroll, used for the press marquee.
.animate-onstage
On Stage
6.5s slide-in-hold-out from the left, used for the home-hero on-stage card.
.animate-scroll-cue
Vertical line that fills then unfills — scroll affordance.
Radius Scale
--RADIUS-SM
0px
--RADIUS-MD
2px
--RADIUS-LG
4px
--RADIUS-XL
8px
Tokens live in src/styles.css. Layout primitives in src/components/SiteLayout.tsx.
Back to home
Credits
Website Design
joachim.stroh@gmail.com

Website design, management & productization for professional artists.

Send a message