Styleguide

MC Paawani: tokens and shared components

Build steps 1 and 2. Every colour, type, size and motion token, then each shared component in the three lighting schemes. Motion values are listed only; the effects arrive in step 8.

Fonts

Self-hosted from the build, font-display: swap.

Display: Fraunces italic 500, 'Fraunces Variable'
Two hours. One room. Everyone singing.
Wordmark: Fraunces italic 600
MC Paawani · The Gopis
Display upright: Fraunces 400 (venues, years, questions)
[Venue name] · 2026 · How far in advance should we book?
Hindi: Rozha One, 'Rozha One'
पावनी · भजन क्लबिंग · गोपियाँ · हरि बोल
Body: Mukta 400, 500, 600, 'Mukta'
Mukta 400: She hosts weddings, corporate evenings, festivals and spiritual gatherings.Mukta 500: Hosting · Bhajan Clubbing · Gallery · AboutMukta 600: Book MC Paawani · Send enquiryDevanagari in body text (form input, F12): नाम: पावनी, संदेश: धन्यवाद

Type scale

TokenValueSample
--type-heroclamp(3.25rem, 0.55rem + 10.8vw, 11rem)MC Paawani
--type-displayclamp(2.5rem, 1.34rem + 4.76vw, 5.625rem)Have a date in mind?
--type-h1clamp(2.75rem, 1.6rem + 4.4vw, 5.75rem)Seven artists, one stage
--type-h2clamp(2.375rem, 1.77rem + 2.48vw, 4rem)Every kind of room
--type-h31.75remWeddings and sangeet
--type-leadclamp(1.125rem, 1.05rem + 0.3vw, 1.25rem)Tell us about your event. The team replies within [response time].
--type-body1.125remWarm hosting that brings both families onto the floor.
--type-small0.9375rem[Name], [Role, Company]
--type-label0.875rem / 0.18emSection label

Sizes and spacing

TokenValueUse
--size-content1280pxContent width
--size-nav1360pxNav width
--size-pad-desktop / --size-pad-phone40px / 20pxSide padding (--pad switches at 768px)
--size-section-desktop / --size-section-phone104px / 60pxSection spacing (--section)
--size-button / --size-button-nav54px / 44pxPill buttons, in the nav
--size-touch44pxMinimum touch target
--size-label-line44pxLine before section labels
--size-frame-border2pxArch frame border

Motion values

Listed for reference. Effects are built in step 8, on top of pages that work without them.

TokenValue
--motion-ease-outcubic-bezier(0.22, 1, 0.36, 1)
--motion-ease-springcubic-bezier(0.34, 1.56, 0.64, 1)
--motion-button200ms
--motion-menu520ms
--motion-rise700ms
--motion-rise-distance24px
--motion-stagger80ms
--motion-reveal1100ms
--motion-sweep700ms
--motion-carousel700ms
--motion-opening1500ms
--motion-hover-preview-delay300ms
--motion-mandala-turn240s
--motion-band-loop60s

Shared accents, used small

  • --c-rani#B32C63
  • --c-rani-deep#8E2A55
  • --c-teal#1E8C87
  • --c-hindi-gold#A86C08
  • --c-navy#14204A
  • --c-ivory#FFF4DC
  • --c-gold#E2B04A
PairRatioNeedsResult
Aa Navy on gold band7.90:14.5:1Pass
Aa Ivory on rani (Bhajan nav button)5.56:14.5:1Pass
Aa Gold on navy (Hari bol band)7.90:13:1Pass
Aa Ivory on deep rani (Hari bol band)7.29:13:1Pass

01Lighting scheme 1 of 3

Anchor mode (theatre black)

Colours

  • Ground--ground#12100E
  • Deeper ground / card--ground-deep#1A1714
  • Photo placeholder--placeholder#1E1A16
  • Text--text#F2EBDD
  • Secondary text--text2#C9C1B3
  • Accent (labels)--accent#C9A962
  • Accent (lines)--accent-line#C9A962
  • Hairline--hairline#2E2823
  • Primary button--btn-bg#C9A962
  • On primary button--btn-fg#12100E
  • Large Hindi--hindi#C9A962
  • Jali lattice--jali-opacity7%
PairRatioNeedsResult
Aa Text on ground16.00:14.5:1Pass
Aa Secondary text on ground10.63:14.5:1Pass
Aa Text on deeper ground15.05:14.5:1Pass
Aa Secondary text on deeper ground10.00:14.5:1Pass
Aa Accent label on ground8.44:14.5:1Pass
Aa Button text on primary8.44:14.5:1Pass
Aa Large Hindi on ground8.44:13:1Pass

Type in this scheme

पावनी

On stage, she runs the room

Secondary text: script, timing, crowd and cues, handled from the first welcome to the last thank you.

Buttons

PrimaryOutlineInverseAccent (rani)
Watch showreelMeet The GopisPerforms with The Gopis
Nav size, 44pxNav outlineThe GopisBook a bhajan night

Section labels

Showreel

01Showreel, with cue number (Anchor home)

The artists, centred

Arch frame

[Artist photo]
[Photo: arch, 4:3]
[Photo: rani fill]
[Clip: gold fill]
[Photo: sharp rectangle, Anchor mode]
[Show video: wide arch]

Jali background

Two crossed 1px diagonals, 30px apart, line colour at 7%.

Toran border

Mandala

Hari bol band: navy and rani

Nav: desktop

MC Paawani
AnchorBhajan Clubbing
Book MC Paawani
Book MC Paawani
AnchorBhajan Clubbing

Nav and footer: phone (390px), menu closed and open

MC Paawani
AnchorBhajan Clubbing
Book MC Paawani
Book MC Paawani
AnchorBhajan Clubbing
WhatsAppCheck a date
[Page content]
MC Paawani
AnchorBhajan Clubbing
Book MC Paawani
Book MC Paawani
AnchorBhajan Clubbing
WhatsAppCheck a date
[Page content]

Footer: desktop

Lighting scheme 2 of 3

Bhajan Clubbing mode (daylight ivory)

Colours

  • Ground--ground#FFF4DC
  • Deeper ground / card--ground-deep#FBE9C2
  • Photo placeholder--placeholder#14204A
  • Text--text#14204A
  • Secondary text--text2#2A3566
  • Accent (labels)--accent#8A5A00
  • Accent (lines)--accent-line#C98E1B
  • Hairline--hairline#D9C393
  • Primary button--btn-bg#14204A
  • On primary button--btn-fg#FFF4DC
  • Large Hindi--hindi#A86C08
  • Jali lattice--jali-opacity11%
PairRatioNeedsResult
Aa Text on ground14.40:14.5:1Pass
Aa Secondary text on ground10.68:14.5:1Pass
Aa Text on deeper ground13.13:14.5:1Pass
Aa Secondary text on deeper ground9.74:14.5:1Pass
Aa Accent label on ground5.43:14.5:1Pass
Aa Button text on primary14.40:14.5:1Pass
Aa Large Hindi on ground3.99:13:1Pass

Type in this scheme

भजन क्लबिंग

With The Gopis, she gets the room singing

Secondary text: script, timing, crowd and cues, handled from the first welcome to the last thank you.

Buttons

PrimaryOutlineInverseAccent (rani)
Watch showreelMeet The GopisPerforms with The Gopis
Nav size, 44pxNav outlineThe GopisBook a bhajan night

Section labels

Showreel

01Showreel, with cue number (Anchor home)

The artists, centred

Arch frame

[Artist photo]
[Photo: arch, 4:3]
[Photo: rani fill]
[Clip: gold fill]
[Photo: sharp rectangle, Anchor mode]
[Show video: wide arch]

Jali background

Two crossed 1px diagonals, 30px apart, line colour at 11%.

Toran border

Mandala

Hari bol band: navy and rani

Nav: desktop

MC Paawani
AnchorBhajan Clubbing
The GopisBook a bhajan night
The GopisBook a bhajan night
AnchorBhajan Clubbing

Nav and footer: phone (390px), menu closed and open

MC Paawani
AnchorBhajan Clubbing
The GopisBook a bhajan night
The GopisBook a bhajan night
AnchorBhajan Clubbing
Watch a sessionBook a bhajan night
[Page content]
MC Paawani
AnchorBhajan Clubbing
The GopisBook a bhajan night
The GopisBook a bhajan night
AnchorBhajan Clubbing
Watch a sessionBook a bhajan night
[Page content]

Footer: desktop

Logos

MC PaawaniThe Gopis emblemThe Gopis

Lighting scheme 3 of 3

The Gopis (midnight indigo)

Colours

  • Ground--ground#111A47
  • Deeper ground / card--ground-deep#0B1236
  • Photo placeholder--placeholder#243273
  • Text--text#FFF3D6
  • Secondary text--text2#F1E2BC
  • Accent (labels)--accent#E2B04A
  • Accent (lines)--accent-line#E2B04A
  • Hairline--hairline#2B376E
  • Primary button--btn-bg#E2B04A
  • On primary button--btn-fg#14204A
  • Large Hindi--hindi#E2B04A
  • Jali lattice--jali-opacity7%
PairRatioNeedsResult
Aa Text on ground15.08:14.5:1Pass
Aa Secondary text on ground12.95:14.5:1Pass
Aa Text on deeper ground16.50:14.5:1Pass
Aa Secondary text on deeper ground14.16:14.5:1Pass
Aa Accent label on ground8.35:14.5:1Pass
Aa Button text on primary7.90:14.5:1Pass
Aa Large Hindi on ground8.35:13:1Pass

Type in this scheme

गोपियाँ

Two hours. One room. Everyone singing.

Secondary text: script, timing, crowd and cues, handled from the first welcome to the last thank you.

Buttons

PrimaryOutlineInverseAccent (rani)
Watch showreelMeet The GopisPerforms with The Gopis
Nav size, 44pxNav outlineThe GopisBook a bhajan night

Section labels

Showreel

01Showreel, with cue number (Anchor home)

The artists, centred

Arch frame

[Artist photo]
[Photo: arch, 4:3]
[Photo: rani fill]
[Clip: gold fill]
[Photo: sharp rectangle, Anchor mode]
[Show video: wide arch]

Jali background

Two crossed 1px diagonals, 30px apart, line colour at 7%.

Toran border

Mandala

Hari bol band: navy and rani

Nav: desktop

The Gopis
Book The Gopis
Book The Gopis

Nav and footer: phone (390px), menu closed and open

The Gopis
Book The Gopis
Book The Gopis
Watch the showBook The Gopis
[Page content]
The Gopis
Book The Gopis
Book The Gopis
Watch the showBook The Gopis
[Page content]

Footer: desktop

Surfaces: deeper indigo and the gold booking band

Deeper indigo

How the two hours run

Bring The Gopis to your city

Book The GopisWhatsApp